CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Adrian Carolli
Adrian Carolli

Reputation: 695

React-navigation and custom left button onPress?

I want to create a custom left button in react-navigation. I need the onPress event of this left button to go to a specific screen; how do I do this? Ideally I want to stay away from writing my own redux navigation as that got complicated. Can I do this without redux?

Upvotes: 0

Views: 497

Answers (1)

Claus Shapeshifter
Claus Shapeshifter

Reputation: 112

Its easy to get this, try this:

const stackNavigatorConfiguration = {
  // set first Screen
  initialRouteName: 'Login',
  // headerMode: 'none'(disable header)
  // style of switching screens(options: modal/card)
  mode: Platform.OS === 'ios' ? 'card' : 'card',
  navigationOptions: ({navigation}) => ({
    headerRight: <DrawerButton navigation={navigation} />,
    headerBackTitle: null,
    headerStyle: {
      backgroundColor: '#282b3a'
    },
    headerTitleStyle: {
      color: 'white'
    },
    // color of the back button
    headerTintColor: 'white',
    headerBackTitleStyle: {
      color: 'white'
    }
  })
}

...

const DrawerButton = ({ navigation }) => (
  <TouchableOpacity>
    <Ionicons
      style={styles.drawerIcon}
      name='ios-menu-outline'
      size={32}
      onPress={() => navigation.navigate('DrawerOpen')}
    />
  </TouchableOpacity>
)

You can define your button with navigationOptions - headerRight there your import a component (see DrawerButton)

Upvotes: 1

Related Questions