Remove element from react-native navigation

Question

Just wondering how I can remove the (Back) text in navigation and just use the arrow for navigating I am using react native expo.

 <Stack.Screen
    name="ChatRoom"
    component={ChatRoomScreen}
    options={({route}) => ({
    
      title: route.params.name, 
      
      headerRight: () => (
        <View 
        style={{
          flexDirection: "row",
          width: 100,
          justifyContent: "space-between",
          marginRight: 10,
        }}
      >
     
          <MaterialIcons name="call" size={22} color={'white'} />
          <FontAwesome5 name="video" size={22} color={'white'} />
          <MaterialCommunityIcons name="dots-vertical" size={22} color={'white'}/>
        </View>
      )
    })}
  />

Wen W · Accepted Answer · 2020-10-15 01:05:02Z

1

I found that react navigation behaves weirdly sometimes. But first, you can try this:

headerBackTitle: ' ',

if that makes the back arrow missing, you can add it manually like so:

headerBackImage: ()=> (<Icon name='chevron-left' color='#FFFFF' onPress={()=>{ navigation.goBack();}} />),

you also need to make sure your options has navigation like so:

options={({route, navigation}) => ({

Note: the Icon i used it from react-native-elements.

answered Oct 15, 2020 at 1:05

Wen W

2,6371 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hakki · Accepted Answer · 2020-10-19 11:31:38Z

0

You need to

headerBackTitleVisible: false,

add this to options like

options={{
...
headerBackTitleVisible: false,
}}

Proof: https://reactnavigation.org/docs/stack-navigator/#headerbacktitlevisible

answered Oct 19, 2020 at 11:31

hakki

1

Collectives™ on Stack Overflow

Remove element from react-native navigation

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related