CODEWITHSUNDEEP
javascriptreactjsreact-nativeexpo
shira
shira

Reputation: 394

react native- there is way to change the arrow navigation icon to menu icon?

there is way to hide the right arrow in the header ? i need to change the arrow icon to a menu icon and i dont understand how to do it .

this is my code :

PrototypePointsScreen.navigationOptions = (navData) => {
  return {
    headerTitle: "pointing",
    headerRight: () => (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title="home button"
          iconName={Platform.OS === "android" ? "md-home" : "ios-home"}
          onPress={() => {
            navData.navigation.navigate("go");
          }}
        />
      </HeaderButtons>
    ),
  };
};

Upvotes: 1

Views: 1296

Answers (1)

Ajin Kabeer
Ajin Kabeer

Reputation: 2186

You can add custom back button component using headerBackImage prop inside the navigationOptions. For the you have to import Image from react-native.

import { Image } from 'react-native'

PrototypePointsScreen.navigationOptions = (navData) => {
  return {
    headerTitle: "pointing",
    headerRight: () => (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title="home button",
           headerBackImage: (
                <Image source={require('../assets/icons/your-icon.png')} />
            ),
          headerBackTitle: null,
          iconName={Platform.OS === "android" ? "md-home" : "ios-home"}
          onPress={() => {
            navData.navigation.navigate("go");
          }}
        />
      </HeaderButtons>
    ),
  };
};

Upvotes: 2

Related Questions