expo-ios-morph-symbol

🔮 Morphing SF Symbols for Expo (React Native)

✨ Bring your iOS app to life with fluid SF Symbol transitions!

🚀 Why use this?

• 🎨 Beautiful native animation – Apple-like morph transitions
• ⚡ High performance – Built on SwiftUI & Canvas
• 🛠 Customizable – Colors, sizes, duration & blur
• 🔗 Expo-ready – Works seamlessly with Expo projects

📦 Installation

npm install expo-ios-morph-symbol
# or
yarn add expo-ios-morph-symbol

🔑 Props

Prop	Type	Default	Description
icons	SymbolIcon[]	[]	List of SF Symbols with config
index	number	0	The active icon index to display
style	StyleProp<ViewStyle>	-	Custom style for the container
morphingImageDuration	number	0.5	Animation duration in seconds
blurRadius	number	-	Optional extra blur effect

🔥 Usage

import { MorphSfSymbolView } from "expo-ios-morph-symbol";

export default function App() {
  const icons = [
    { name: "heart.fill", size: 80, tint: "red" },
    { name: "star.fill", size: 80, tint: "#FFD700" },
    { name: "bolt.fill", size: 80, tint: "blue" },
  ];

  return (
    <MorphSfSymbolView
      icons={icons}
      index={1} // current active icon
      morphingImageDuration={0.8}
      blurRadius={10}
      style={{ alignItems: "center", justifyContent: "center" }}
    />
  );
}

--

🧠 How it Works?

• Uses SwiftUI Canvas and alpha thresholding for smooth shape transitions
• Animates blur & color using native SwiftUI animations
• React Native just updates the index → SwiftUI handles the morph

📜 License

MIT © 2025