Expoで使えるSF Symbolsのネイティブモーフィングアニメーションライブラリ

概要

「expo-ios-morph-symbol」は、iOSの標準アイコンセットであるSF SymbolsをReact Native（特にExpo）環境下で滑らかにモーフィング（形状変化）させるためのライブラリです。Apple純正のSwiftUIで実装されたネイティブアニメーションを活用することで、高パフォーマンスかつ美しいトランジションを実現。さらに、アイコンのサイズ、色、ぼかし効果（ブラー）などを柔軟にカスタマイズできるため、デザインの幅が広がります。iOS専用のためAndroidでは使えませんが、iOSアプリ開発においてSF Symbolsの表現力を大きく高めることができます。

リポジトリの統計情報

スター数: 9
フォーク数: 0
ウォッチャー数: 9
コミット数: 8
ファイル数: 10
メインの言語: TypeScript

主な特徴

Apple純正SwiftUIベースのネイティブアニメーションで高品質なモーフィングを実現
Expo環境に対応し、React Nativeプロジェクトにシームレスに統合可能
アイコンの色、サイズ、アニメーション時間、ブラー効果を柔軟にカスタマイズ可能
iOS専用ながらパフォーマンスに優れ、滑らかなUI体験を提供

技術的なポイント

本ライブラリの最大の技術的特徴は、iOSのSF SymbolsのモーフィングアニメーションをSwiftUIのCanvasとアニメーション機能を活用して実装している点です。SF SymbolsはAppleが提供するベクターアイコンセットで、iOS 13以降で標準的に利用されています。これらのアイコンは形状がベクターであり、SwiftUIではシームレスな形状変化（モーフィング）が可能です。

一方でReact NativeはJavaScriptで動作し、iOSのネイティブアニメーションとは異なるレンダリングパスを持つため、単純にReact NativeだけでSF Symbolsのモーフィングを再現するのは困難です。そこで本リポジトリはExpoのカスタムネイティブモジュール機能を活用し、SwiftUIのネイティブコードとReact NativeのJavaScriptコードの橋渡しを行っています。これにより、「expo-ios-morph-symbol」はReact Nativeのコンポーネントとして扱える一方で、アニメーションの処理はSwiftUIに任せることで、パフォーマンスの低下を防ぎつつ美しいアニメーションを実現しています。

さらに、ユーザーがアイコンのサイズや色を簡単に指定できるAPIを提供し、モーフィングの継続時間やブラー効果も任意に設定可能です。これにより、アプリのUIデザインに合わせて柔軟に調整ができ、使い勝手が良いのもポイントです。

ライブラリはTypeScriptで記述されており、型安全なコードベースでメンテナンス性も高いです。Expoプロジェクトに容易に導入できるように設計されているため、Swiftの知識がなくてもReact Native開発者が気軽にSF Symbolsの高度な表現を取り入れられます。

ただしiOS専用であるため、Android対応はされていません。これはSF Symbols自体がApple独自の技術であり、Androidには存在しないためです。iOSアプリの差別化や表現力向上を目的としたニッチなライブラリといえます。

プロジェクトの構成

主要なファイルとディレクトリ：

.eslintrc.js: ESLint設定ファイル
.gitignore: Git管理除外ファイルの設定
.npmignore: npm公開時に除外するファイル設定
README.md: プロジェクト説明ドキュメント
example: サンプルコードやデモアプリのディレクトリ
package.json: npmパッケージ設定
tsconfig.json: TypeScriptコンパイラ設定
ios: SwiftUIネイティブモジュールのiOS側コード（推測）
src: TypeScriptソースコード
index.ts: ライブラリのエントリーポイント

まとめ

Expo環境でiOSアプリのUI表現を格上げするSF Symbolsモーフィングライブラリ。

リポジトリ情報：

名前: expo-ios-morph-symbol
説明: 🔄 Morph SF Symbols with smooth native animations in Expo (React Native) ✨ 🎨 Custom size, color & blur | ⚡ Native SwiftUI performance | 📱 iOS only
スター数: 9
言語: TypeScript
URL: https://github.com/rit3zh/expo-ios-morph-symbol
オーナー: rit3zh
アバター: https://avatars.githubusercontent.com/u/119659853?v=4