React Native Motion Elements

A comprehensive showcase of React Native animation libraries and UI components, demonstrating the capabilities of Reanimated, Moti, Lottie, and Skia.

Features

• Reanimated Demos: Advanced animations using React Native Reanimated
• Moti Animations: Declarative animations with Moti
• Lottie Animations: Vector animations with Lottie
• Skia Graphics: High-performance 2D graphics with React Native Skia
• Custom UI Components: Animated tab bars, blur effects, and more
• Modern Architecture: Built with Expo Router and React Native's New Architecture

Tech Stack

• React Native 0.81.5 with New Architecture enabled
• Expo SDK 54
• React Native Reanimated 4.1
• Moti 0.30
• Lottie React Native 7.3
• React Native Skia 2.2
• Expo Router 6.0 for file-based routing
• TypeScript for type safety

Getting Started

Prerequisites

• Node.js (LTS version)
• npm or yarn
• Expo CLI
• iOS Simulator (macOS) or Android Emulator

Installation

# Clone the repository
git clone https://github.com/delta4/react-native-motion-elements.git

# Navigate to project directory
cd react-native-motion-elements

# Install dependencies
npm install

# Start the development server
npm start

Running the App

# iOS
npm run ios

# Android
npm run android

# Web
npm run web

Project Structure

.
├── app/                    # Expo Router pages
│   ├── index.tsx          # Home screen
│   ├── reanimated-demos.tsx
│   ├── moti-demos.tsx
│   ├── lottie-demos.tsx
│   ├── skia-demos.tsx
│   └── bottom-tabs/       # Tab navigation
├── components/            # Reusable components
│   ├── animated-tab-bar.tsx
│   ├── edge-blur-gradients.tsx
│   └── themed-text.tsx
├── constants/             # Theme and constants
└── assets/               # Images and fonts

Key Components

Animated Tab Bar

Custom animated bottom tab bar with smooth transitions and haptic feedback.

Edge Blur Gradients

Blur effects at screen edges for enhanced visual hierarchy.

Themed Components

Dark mode support with automatic theme switching.

Configuration

The project uses:

• New Architecture: Enabled for improved performance
• Expo Router: File-based routing with typed routes
• React Compiler: Experimental optimization enabled
• Edge-to-Edge: Full-screen immersive experience on Android

EAS Build & Publishing

Initial Setup

1. Install EAS CLI globally:

npm install -g eas-cli

2. Login to your Expo account:

eas login

3. Initialize EAS for this project:

eas init

This will create a new EAS project ID and add it to your app.json.

Building

# Development build for iOS
eas build --profile development --platform ios

# Development build for Android
eas build --profile development --platform android

# Production build
eas build --profile production --platform all

Submitting to Stores

# Submit to App Store
eas submit --platform ios

# Submit to Play Store
eas submit --platform android

OTA Updates

After your first build, you can push updates without rebuilding:

eas update --branch production --message "Your update message"

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT

Author

delta4

Acknowledgments

Built with the amazing React Native animation ecosystem:

• React Native Reanimated
• Moti
• Lottie React Native
• React Native Skia