CODEWITHSUNDEEP
react-nativereact-navigationreact-native-navigationreact-navigation-v5react-navigation-stack
Onkar Mehra
Onkar Mehra

Reputation: 83

How to include two buttons at headerLeft position?

I have been trying to include two icon buttons at headerLeft position but only one icon button appears at the position. I have mentioned my code below which has no errors. Using the code, I am unable to obtain the desired output that is only one of the two icon buttons is appearing at the headerLeft position. I have created AccountStack using createStackNavigator(). At the headerRight position hamburger icon appears to access the drawer. I want settings icon button and help icon button to appear at the headerLeft position together.

 export default function AccountStack({navigation}) {
              return (
                <Stack.Navigator>
                <Stack.Screen name="Account" component= {AccountScreen} 
    options={{headerRight: () => (<Ionicons.Button name="reorder-three" color={"#FF0000"} size={32} onPress={() => navigation.openDrawer()}/>), 
        headerLeft: ()=> ( <Ionicons.Button name= "settings" color={"#FF0000"} size={32}/> , 
                           <Ionicons.Button name= "md-help-circle" color={"#FF0000"} size={32}/> )}}/> 
                <Stack.Screen 
        name="Help" 
        component= {HelpScreen} 
        options={{headerRight: () => (<Ionicons.Button     name="reorder-three" color={"#FF0000"} size={32} onPress={() => navigation.openDrawer()}/> )  }}/>
                <Stack.Screen 
        name="Settings" 
        component= {SettingScreen} 
        options={{headerRight: () => (<Ionicons.Button     name="reorder-three" color={"#FF0000"} size={32} onPress={() => navigation.openDrawer()}/> )  }}/>
                </Stack.Navigator>
              );
            }

I am a beginner, kindly help me out in resolving the problem.

Upvotes: 0

Views: 933

Answers (1)

dianaqqq
dianaqqq

Reputation: 668

You can only render a single component in the headerLeft, therefore you need to wrap the two icons you want to set in a View (Just for you to know: you can also build a more complex component to render in the headerLeft, with multiple buttons/texts etc)

<View>
  <Ionicons.Button name= "settings" color={"#FF0000"} size={32}/> , 
  <Ionicons.Button name= "md-help-circle" color={"#FF0000"} size={32}/>  
</View>

Upvotes: 2

Related Questions