React Navigation Transition on Android

Question

I have a Bottom Tab Navigator and on a button press, it will navigate me to Stack Screen. On Android device, the transition is from bottom to top. I want to achieve the transition from Left to Right like on iOS but I don't know how to achieve it.

I have added this on my Stack Screen,

<Stack.Navigator
  screenOptions={{
    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
  }}
>
    <Stack.Screen name="Screen 1" component={ScreenComponent1} />
    <Stack.Screen name="Screen 2" component={ScreenComponent2} />
</Stack.Navigator>

but it only works from Stack Screen 1 to Screen 2, and not from Screen with Bottom Tab to Stack Screen. Please if you have any solution?

This is my Bottom Tab Navigator:

<Tab.Navigator>
  <Tab.Screen name="Home" component={Home} />
  <Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>

And this is the Home:

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {Button} from '../../components';

const Home = () => {
  return (
    <View>
      <Text>Go To Screen1</Text>
      <Button title="Screen1" />
    </View>
  );
};

export default Home;

Answer 1

Try this

import {
  CardStyleInterpolators,
} from '@react-navigation/stack';

<NavigationContainer ref={NavigationService.navigationRef}>
        <Navigator
          
          screenOptions={{
            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, // Transition as IOS
          }}
      
          {...{headerMode}}>
          {screens.map(({name, component}, key) => (
            <Screen
              {...{name, component, key}}
              initialParams={
                name === 'App'
                  ? {
                      initRoute,
                      params,
                    }
                  : {}
              }
            />
          ))}
        </Navigator>
      </NavigationContainer>