rn-animation-kit
v1.0.5TypeScript
A powerful and easy-to-use animation library for React Native using react-native-reanimated. Includes FadeIn, SlideIn, ScaleIn, RotateIn, BounceIn, FlipIn, ZoomIn and composition components.
react-nativereact-native-animationanimationanimationsreanimatedreact-native-reanimatedtransitionsanimatedmotionui
0/weekUpdated 1 months agoMITUnpacked: 55.2 KB
Published by Noman Ali Akram
npm install rn-animation-kitReact Native Animation Package 🎨
A powerful and easy-to-use animation library for React Native using react-native-reanimated. Animate your components with simple wrapper components.
Demo
https://github.com/user-attachments/assets/b0881382-9f49-4afe-ba72-7e058c8853fa
See the animations in action!
Features ✨
- 🎭 Multiple Animation Types: FadeIn, SlideIn, ScaleIn, RotateIn, BounceIn, FlipIn, ZoomIn
- 🔄 Flexible Directions: Animate from any direction (top, bottom, left, right, diagonals)
- ⚡ Performance: Built on react-native-reanimated for 60fps animations
- 🎯 TypeScript: Full TypeScript support with type definitions
- 🎪 Composable: Combine animations with Sequence and Parallel components
- 🎛️ Customizable: Control timing, delays, distances, and more
- 📱 Cross-platform: Works on iOS and Android
Installation
``bash`
npm install rn-animation-kitor
yarn add rn-animation-kit
$3
This package requires react-native-reanimated (v3.0.0 or higher):
`bash`
npm install react-native-reanimatedor
yarn add react-native-reanimated
Follow the react-native-reanimated installation guide for additional setup.
Usage
$3
`tsx
import { FadeIn, SlideIn, ScaleIn } from 'rn-animation-kit';
import { View, Text } from 'react-native';
function App() {
return (
);
}
`
Animation Components
$3
Fades in with optional directional movement and scaling.
`tsx`
distance={75} // Distance to travel (default: 75)
scale={1.2} // Initial scale (default: 1, no scale)
delay={0} // Delay before animation starts (ms)
animate={true} // Enable/disable animation
onAnimationComplete={() => console.log('Done!')}
>
Examples:
`tsx
// Fade in from top with slight scale
// Fade in from bottom-left corner
`
$3
Slides in from specified direction.
`tsx`
distance={300} // Custom distance (optional, defaults to screen width)
delay={0}
>
Examples:
`tsx
// Slide in from right
// Slide in from top with custom distance
`
$3
Scales up from small to full size.
`tsx`
finalScale={1} // Ending scale (default: 1)
direction="bottom" // Optional directional movement
delay={0}
>
Examples:
`tsx
// Scale from 0 to 1
// Scale with upward movement
`
$3
Rotates while fading in.
`tsx`
direction="clockwise" // 'clockwise' | 'counter-clockwise'
delay={0}
>
Examples:
`tsx
// Full rotation clockwise
// Half rotation counter-clockwise
`
$3
Bounces in with elastic effect.
`tsx`
bounceHeight={100} // Height of bounce (default: 100)
delay={0}
>
Examples:
`tsx
// Bounce from bottom
// High bounce from top
`
$3
Flips in on X or Y axis.
`tsx`
direction="forward" // 'forward' | 'backward'
delay={0}
>
Examples:
`tsx
// Flip on Y axis (horizontal flip)
// Flip on X axis (vertical flip)
`
$3
Zooms in with optional overshoot effect.
`tsx`
overshoot={1.1} // Overshoot scale (default: 1.1)
delay={0}
>
Examples:
`tsx
// Zoom with slight overshoot
// Zoom from 0.5 with large overshoot
`
Composition Components
$3
Animates children one after another with staggered timing.
`tsx`
Example - List Items:
`tsx`
{items.map((item, index) => (
))}
$3
Animates all children simultaneously.
`tsx`
Real-World Examples
$3
`tsx`
function CardList({ cards }) {
return (
{cards.map((card, index) => (
))}
);
}
$3
`tsx`
function AnimatedModal({ visible }) {
return (
);
}
$3
`tsx`
function HeroSection() {
return (
);
}
$3
`tsx`
function TabContent({ activeTab }) {
return (
<>
{activeTab === 'home' && (
)}
{activeTab === 'profile' && (
)}
);
}
$3
`tsx`
function Toast({ visible, message }) {
return (
direction="top"
bounceHeight={80}
onAnimationComplete={() => console.log('Toast shown')}
>
);
}
Configuration
$3
Pre-configured spring animations:
`tsx
import { SPRING_CONFIGS } from 'rn-animation-kit';
// Available configs:
SPRING_CONFIGS.default // Balanced (damping: 14, stiffness: 75)
SPRING_CONFIGS.gentle // Smooth (damping: 20, stiffness: 90)
SPRING_CONFIGS.bouncy // Elastic (damping: 8, stiffness: 100)
SPRING_CONFIGS.stiff // Quick (damping: 26, stiffness: 180)
SPRING_CONFIGS.slow // Gradual (damping: 20, stiffness: 50)
`
$3
You can customize the spring configuration in each component:
`tsx`
// Modify in the component files
const SPRING_CONFIG = {
damping: 15,
stiffness: 100,
mass: 1,
overshootClamping: false,
restDisplacementThreshold: 0.01,
restSpeedThreshold: 2,
};
Common Props
All animation components support these common props:
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| children | ReactNode | required | Component(s) to animate |delay
| | number | 0 | Delay before animation starts (ms) |animate
| | boolean | true | Enable/disable animation |style
| | StyleProp | undefined | Additional styles |onAnimationComplete
| | () => void | undefined | Callback when animation finishes |
Tips & Best Practices
1. Performance: Use animate={false} to disable animations during testing or for accessibilityanimate
2. Delays: Keep delays short (50-200ms) for better UX
3. Stagger: Use 75-150ms stagger for list items
4. Composition: Combine different animations for unique effects
5. Conditional: Toggle prop based on state for re-triggering animations
TypeScript
Full TypeScript support with exported types:
`tsx``
import type {
FadeInProps,
SlideInProps,
ScaleInProps,
AnimationDirection,
} from 'rn-animation-kit';
License
MIT
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.