Header title overlap back arrow

[rutvikwebmobtech]

My code

 const AppRoute = createStackNavigator({

        Login: {
            screen: Login,
            navigationOptions: {
                title: 'Login'
            },
        },
        Home: {
            screen: Home,
            navigationOptions: {
                title: 'Home',
                headerStyle:{
                    backgroundColor:'yellow'
                }
           },
        }
    },
    {
        initialRouteName: 'Login',
    }
);

Output

My Environment

software	version
react-navigation	2.9.0
react-native	0.56.0
node	8.10.0
npm or yarn	5.10.0

[simpleblack]

The same problem

software	version
react-navigation	2.9.0
react-native	0.55.4

[Dimous]

It is the opposite in my case. A big left margin appeared.
It seems like devs mixed up styles in 12b21f0

[Dimous]

public static navigationOptions: NavigationStackScreenOptions = {
        title: "Бюджет",
        headerRight: <View
            style={
                     {
                        flex: 1,
                        flexDirection: "row",
                        alignItems: "center",
                        justifyContent: "space-between",
                        width: 28+28+10,
                        marginRight: 10,
                    }
            }
        >
            <TouchableOpacity
                onPress={
                    () => {}
                }
            >        
                <Feather
                    name="filter"
                    size={28}
                    color="#000000"
                />
            </TouchableOpacity>
            <TouchableOpacity
                onPress={
                    () => {}
                }
            >            
                <Feather
                    name="plus"
                    size={28}   
                    color="#000000"                
                />
            </TouchableOpacity>
        </View>,
        headerStyle: {
            elevation: 1,
            marginBottom: 1,
            backgroundColor: "#fafafa",            
        },
        headerTitleStyle: {
            fontWeight: "200",
            fontFamily: "Roboto",
        },        
        headerTransparent: true,
        headerTitleAllowFontScaling: true,
    };

[Ariel-Rodriguez]

I am facing same problem

Sharing my work around to avoid this, until this issue gets solved. (However, margins are still wrong)

  static navigationOptions = {
    title: 'Seguidores',
    // Empty view to avoid small bug https://github.com/react-navigation/react-navigation/issues/4754
    headerRight: <View />,
  }

[brentvatne]

thanks @Ariel-Rodriguez for the info, I'll fix this right away

[ShawnSheehan]

Having the same issue as @Dimous & @Ariel-Rodriguez, happened when I upgraded from 2.3 release.

[brentvatne]

fixed in 2.9.1, thank you everybody for the info to help track it down!