React navigation 5 really slow and dropping JS FPS on Expo

Android devices are a lot more sensitive to unoptimized JavaScript code because they typically have far worse JS performance when compared to iOS devices, so you have less headroom to write inefficient code. The same code running on iOS can feel smooth and on Android it can end up frequently dropping frames.

It's recommended to use React Devtools to understand the source of slow rendering performance in React apps, and I think this is a fine option here and something you certainly should do.

Another thing you can do is switch to createNativeStackNavigator wherever you are using createStackNavigator, and that will help push some of your performance concerns a little bit down the road. You can also learn more about this navigator in this YouTube video.

I'd personally do both of the above right now: 1) profile your React rendering performance and find where you're doing unnecessary / extra work, eliminate that. 2) switch to using createNativeStackNavigator.

Create your own animation

This animation will make your app more fast

 const App = () => {   
   const Stack = createStackNavigator();

   const TransitionScreen = {
    gestureDirection: 'horizontal',
    transitionSpec: {
      open: TransitionSpecs.TransitionIOSSpec,
      close: TransitionSpecs.TransitionIOSSpec,
    },
    cardStyleInterpolator: ({current, next, layouts}) => {
      return {
        cardStyle: {
          transform: [
            {
              translateX: current.progress.interpolate({
                inputRange: [0, 1],
                outputRange: [layouts.screen.width, 0],
              }),
            },
            {
              translateX: next
                ? next.progress.interpolate({
                    inputRange: [0, 1],
                    outputRange: [0, -layouts.screen.width],
                  })
                : 1,
            },
          ],
        },
        overlayStyle: {
          opacity: current.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 0.5],
          }),
        },
      };
    },
 

     };
    
      const CardOptions = {
        cardStyle: {backgroundColor: 'transparent'},
        ...TransitionScreen,
        headerShown: false,
        gestureEnabled: false,
      };

 return (
    <NavigationContainer theme={DarkTheme}>
      <Stack.Navigator>
        <Stack.Screen
          name="preloader"
          component={PreLoader}
          options={CardOptions}
        />
      </Stack.Navigator>
    </NavigationContainer>  
 );
 };
    
    export default App;