CODEWITHSUNDEEP
react-nativereact-navigationstack-navigator
Barry Michael Doyle
Barry Michael Doyle

Reputation: 10628

React Navigation Stack Navigator Back Button Styling for Android

I have implemented a Stack Navigator as follows:

const MainNav = StackNavigator({
    notes: { screen: NotesScreen },
    addNote: { screen: AddNoteScreen }
}, {
    initialRouteName: 'notes'
});

Now when I go from my NotesScreen to my AddNoteScreen I get the back arrow as expected. However, I've styled my header for AddNoteScreen using the following navigationOptions:

static navigationOptions = () => ({
    title: 'Add a note',
    headerStyle: {
        height: Platform.OS === 'android' ? 54 + STATUS_BAR_HEIGHT : 54,
        backgroundColor: '#2196F3'
    },
    headerTitleStyle: {
        marginTop: Platform.OS === 'android' ? STATUS_BAR_HEIGHT : 0,
        color: 'white'
    }
})

Now the headerTitleStyle doesn't affect the back arrow on Android. How can I make the back arrow on android adopt the same styles as the headerTitleStyle?

This is an image of the current problem:

Demo of the problem

Upvotes: 0

Views: 3183

Answers (2)

Klaudia Brysiewicz
Klaudia Brysiewicz

Reputation: 129

Why not hidding a status bar in Android ? : 

import { View, StatusBar } from 'react-native';

class App extends React.Component {

  render() {
    return (

     <View style={{flex : 1}}>
       <StatusBar hidden = {true}/>
       <Search/>
     </View>

    );
  }
}

Upvotes: 0

Ravi Raj
Ravi Raj

Reputation: 6687

There is a property headerTintColor in navigationOptions which can be used to change the back button icon color. Except that there is no other option right now in react-navigation v1.0.0-beta.11 to customise back button.

static navigationOptions = () => ({
    title: 'Add a note',
    headerStyle: {
        height: Platform.OS === 'android' ? 54 + STATUS_BAR_HEIGHT : 54,
        backgroundColor: '#2196F3'
    },
    headerTitleStyle: {
        marginTop: Platform.OS === 'android' ? STATUS_BAR_HEIGHT : 0,
        color: 'white'
    },
    headerTintColor: 'white'
})

BTW instead of handling Status bar height in header styles, just render StatusBar component of react-native inside your root component like

import {
  AppRegistry,
  View,
  StatusBar,
} from 'react-native';

class AppWithStatusBar extends Component {

  render() {
    return(
      <View style={{flex: 1}}>
        <StatusBar barStyle="light-content"/>
        <MainNav />
      </View>
    );
  }
}

Then render this 'AppWithStatusBar' component

AppRegistry.registerComponent('your_app', () => AppWithStatusBar);

Upvotes: 1

Related Questions