The Problem I have can be shown in the following GIF:
As you may notice, when I select the Back Button from the Stack Navigator, this weird bug appears, where the width of the back button seems to be too high.I wasn't able to fix this with the headerBackTitleStyle
option.
This is my code:
export const AccountStackNavigation = () => (<Stack.Navigator initialRouteName="Account"><Stack.Screen name="Account" component={AccountPage} options={({navigation}) => ({ headerRight: () => (<TouchableOpacity onPress={() => navigation.navigate('Settings')} style={globalStyles.borderRadius}><UilCog size={Typography.TITLE_1} color={Colors.TEXT_PRIMARY} /></TouchableOpacity> ), headerRightContainerStyle: globalStyles.stackContainer, headerTitleAlign: 'center', })}></Stack.Screen> // here's the settings stack screen where the problem occurs<Stack.Screen name="Settings" component={SettingsPage} options={{ headerBackTitleVisible: true, headerBackTitle: 'Done', headerTitleAlign: 'center', }}></Stack.Screen></Stack.Navigator>);
I was sadly unable to find a similar problem online, so my guess would be that something with my code isn't right?
Also something to note; It works perfectly find on IOS. A possibile solution would be of course, that I write a back button from scratch for Android, however I am hoping on a better solution.