2

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,
    }}
/>
...
learncode
  • 127
  • 6
  • Can you post the definition of ```headerTitleStyle``` – Michael Bahl Jun 26 '23 at 09:16
  • there is nothing important - only fontSize and fontFamily. – learncode Jun 26 '23 at 09:28
  • The header just perform an crossfade (sample: https://snack.expo.dev/@m.bahl/stack-navigator-header-naimation) – Michael Bahl Jun 26 '23 at 09:44
  • thank you. I am navigating to the settings screen from my Home screen which is a nested tab (not stack) navigator so Im not sure how to add the transitions there. I edited my question with the tabnavigatior – learncode Jun 27 '23 at 08:24
  • What do you mean by nested tab ? You have a tabgroup within another tabgroup ? – Michael Bahl Jun 27 '23 at 11:11
  • my tab navigator (to which Home belongs to, from which I navigate to my Settings) is nested in my stack navigator (please see edited code). I dont know where I would add ...TransitionPresets.ModalSlideFromBottomIOS, since Home is not a stack but a Tab – learncode Jun 29 '23 at 10:30

0 Answers0