Skip to main content

​
Prerequisites

Before installing, ensure you have the following in your React Native project:
  • React Native: 0.73 or higher
  • React Navigation: 6.0 or higher (if using with navigation)
  • Reanimated: 3.0 or higher

​
Install the Package

npm install react-native-screen-transitions

​
Install Peer Dependencies

The library depends on several peer dependencies that must be installed separately: 
npm install react-native-reanimated react-native-gesture-handler react-native-screens

​
Babel Configuration

Add the Reanimated plugin to your babel.config.js: 
module.exports = {
  presets: ['babel-preset-expo'], // or other presets
  plugins: [
    'react-native-reanimated/plugin',
  ],
};
The Reanimated Babel plugin must be last in the plugins array.

​
Platform-Specific Setup

​
iOS

No additional setup required for iOS.

​
Android

Add the following to your android/app/build.gradle: 
android {
  compileSdkVersion 34

  packagingOptions {
    pickFirst 'lib/x86/libc++_shared.so'
    pickFirst 'lib/x86_64/libc++_shared.so'
    pickFirst 'lib/armeabi-v7a/libc++_shared.so'
    pickFirst 'lib/arm64-v8a/libc++_shared.so'
  }
}

​
Expo Setup

If using Expo, the dependencies are already configured in the Expo SDK: 
expo install react-native-screen-transitions
expo install react-native-reanimated react-native-gesture-handler react-native-screens
Then add the Reanimated plugin to app.json: 
{
  "expo": {
    "plugins": [
      "react-native-reanimated/plugin"
    ]
  }
}

​
Verify Installation

Test that everything is working by creating a simple transition: 
import { Transition } from 'react-native-screen-transitions';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <Transition.Stack>
      <Transition.Screen name="Home">
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Home</Text>
        </View>
      </Transition.Screen>
    </Transition.Stack>
  );
}
If the app runs without errors, installation is complete!

​
Troubleshooting

​
”React Native Reanimated not found”

Ensure the Reanimated plugin is in your babel.config.js and rebuild the app.

​
Build errors on Android

Run gradlew clean in the android directory: 
cd android && ./gradlew clean && cd ..
Then rebuild the app.

​
TypeScript errors

Make sure your tsconfig.json includes the necessary type definitions: 
{
  "compilerOptions": {
    "types": ["react-native-reanimated"],
    "skipLibCheck": true
  }
}

​
Next Steps

Once installed, follow the Quick Start guide to build your first transition.