✨ Native SwiftUI-powered animated text view for React Native (Expo). Supports smooth, customizable animations like typing, slide, blur, drop, twist, and more.
npm install expo-ios-text-animationshttps://github.com/user-attachments/assets/c5080829-a970-4f23-a32f-a0be5ceb913c
Beautiful, native SwiftUI-powered animated text component for React Native (Expo) apps.
Supports a variety of animation styles like typing, drop, blur, twist, slide, and more!
- ⚡️ Smooth native animations powered by SwiftUI
- 🧩 Supports both word and letter based animations
- 🎨 Customizable text style, font size, duration, and color
- 🧱 Easy integration with Expo's custom dev client
---
``bash`
npx expo install expo-ios-text-animations
`bash`
cd ios && pod install
`bash`
npx expo prebuild --platform ios
`bash`
pnpm ios
---
`tsx
import React from "react";
import { View } from "react-native";
import { AnimatedTextView } from "expo-ios-text-animations";
export default function App() {
return (
type="typo"
unit="letters"
fontSize={24}
fontColor="#ff5e5e"
animationDuration={2}
animating={true}
/>
);
}
`
---
| Prop | Type | Default | Description |
| ------------------- | ---------------------- | ------- | -------------------------------------- |
| text | string | — | Text to animate |type
| | AnimationType | — | Type of animation (see below) |unit
| | AnimationUnitType | — | Split text by "words" or "letters" |fontSize
| | number | 24 | Text font size |fontColor
| | string | #000 | Text color |animationDuration
| | number | 2 | Duration in seconds |animating
| | boolean | true | Whether animation is active |style
| | StyleProp | — | Container style |
---
`ts`
enum AnimationType {
Opacity,
Blur,
BottomTop,
Offset,
Chain,
Drop,
Spring,
Typo,
ChimeBell,
Curtain,
Hang,
Paper,
RandomTypo,
Twist,
Rotate,
Scale,
Slide,
TopBottom,
}
Use them like this:
`tsx``
type = "chimebell";
---
Built natively with SwiftUI + integrated into React Native via Expo Modules Core.
---
Pull requests, issues, and feedback are always welcome 🙌
---
MIT © rit3zh