I changed the direction the screen moves to move from left to right. However, while the screen moves from left-right, the header title moves still from right to left which looks of course weird. Is there a way to make the header also move from left to right?
<Stack.Screen
name="Tabs"
options={({navigation,route}) => ({
headerTitleStyle: styles.headerTitleStyle,
headerShown: false,
})}>
{(props) => <MyTabs {...props} />}
</Stack.Screen>
<Stack.Screen
name="Settings"
component={SettingsScreen}
options={{
headerTitle: 'Settings',
headerTitleStyle: styles.headerTitleStyle,
headerShown: true,
gestureDirection: 'horizontal-inverted',
headerLeft: () => <BackButton />
}}
/>
</Stack.Navigator>
const Tab = createBottomTabNavigator();
...
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
headerTitleStyle: styles.headerTitleStyle,
headerShown: true,
}}
/>
...