CODEWITHSUNDEEP
javascriptreactjsreact-nativenavigation
user8662191
user8662191

Reputation:

Creating my own Menu Component in React Native

I'm creating a "Menu" component that I call on every pages and it shows correctly but I can't get it working. I can't navigate as easily as I did in my Login page: Button with OnPress Event and a Call to one function with /if correct logins/ execute: this.props.navigation.navigate("Accueil")

So... I taught that it could be the same and on my component "Menu" I tried to call the same code:

<TouchableOpacity style={[styles.menu_item_selected,styles.menu_item]} onPress={() => nav("Home")}>
   <FontAwesome name="home" size={40} color="#fff"/>
   <Text style={styles.menu_text}>Home</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.menu_item}  onPress={() => nav("Datas")}>
   <FontAwesome name="user" size={40} color="#fff"/>
   <Text style={styles.menu_text}>Datas</Text>
</TouchableOpacity>

But it doesn't work, it crashes on button press.

Here is my Navigation file:

import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'

import Login from '../Components/Login'
import Menu from '../Components/Menu'
import Home from '../Components/Home'
import Datas from '../Components/Datas'

const SearchStackNavigator = createStackNavigator({
  Login: {
    screen: Login
  },
  Home:{
    screen: Home
  },
  Datas:{
    screen: Datas
  }
})

export default createAppContainer(SearchStackNavigator)

I tried to use props, but didn't worked too.

More info:

Any ideas? Or sample codes? I couldn't find any custom menu sample that fill my needs

Upvotes: 0

Views: 953

Answers (1)

Charlie
Charlie

Reputation: 1042

You need to pass the navigation prop to your Menu component like this(Assuming you are using it in a Screen declared in your Navigation config):

<Menu navigation={this.props.navigation} />

with that your Menu component will have access to navigation prop

this.props.navigation.navigate('Datas');

Upvotes: 0

Related Questions