How to navigate from one menu option to other screen

Question

I am using 'react-native-popup-menu'

<MenuOptions customStyles={{ optionText: styles.text }}>
   <MenuOption value="History" text='History' 
                   onPress={()=>{this.props.navigation.navigate('History')}} />
    <MenuOption value="Logout" text='Logout'  onPress={()=>{this.props.navigation.navigate('Login')}}/>
 </MenuOptions>

I want to navigate when I click on any of the menu options to another screen, how can I achieve it?

are you able pass in the login component rather than the string login to the navigate function ? — mad.meesh, Sep 24 '18 at 15:12

score 2 · Accepted Answer · answered Sep 24 '18 at 15:36

2

Looking at the docs from the Library, MenuOption takes an onSelect prop rather than onPress

From their example:

<MenuOptions>
        <MenuOption **onSelect**={() => alert(`Save`)} text='Save' />
        <MenuOption **onSelect**={() => alert(`Delete`)} >
          <Text style={{color: 'red'}}>Delete</Text>
        </MenuOption>
        <MenuOption onSelect={() => alert(`Not called`)} disabled={true} text='Disabled' />
      </MenuOptions>

Changing your onPress to onSelect should start working as per your requirements.

answered Sep 24 '18 at 15:36

Umair Ahmed

506
3
10

Can we add both alert and navigation for single menu option? i,e for example if I give the menu options as Logout it should throw me an alert stating I am about to log out with "Yes" or "No" options if click on 'Yes,' its should navigate me to the Login page if "No" it should stay on the current page only. Similar to the 'Alert' in react native. – Nishar sheik Sep 24 '18 at 16:49
Yes if you use `Alert.alert` from React Native then you can use the above code, and then add the `onPress` actions to do that for you. – Umair Ahmed Sep 24 '18 at 17:24

How to navigate from one menu option to other screen

1 Answers1