Create a navigation button with a props using react-navigation in React Native

Question

I'm trying to create a component Button that can help me navigate between stacks. I use react-navigation to navigate in the app. The problem is that I have 3 files :

-App.js

<SafeAreaProvider>
  <StatusBar barStyle="dark-content" backgroundColor="#ecf0f1" />
  <NavigationContainer>
    <Stack.Navigator initialRouteName="Accueil">
      <Stack.Screen name="Accueil" component={AccueilScreen} options={{headerShown: false}}/>
      <Stack.Screen name="Progression" component={ProgressionScreen} />
      <Stack.Screen name="Themes" component={ThemesScreen} />
      <Stack.Screen name="Quizz" component={QuizzScreen} />
    </Stack.Navigator>
  </NavigationContainer>
</SafeAreaProvider>

-Accueil.js

function Accueil({ navigation }) {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content_container}>
        <Image style={styles.logo} source={require('../assets/logo.jpg')} />
        <Button buttonText="Progression" navigation={navigation}/>
      </View>
   </SafeAreaView>
  )
}

-Button.js

export default function Button(props, navigation) {
  return (
    <TouchableOpacity style={styles.button} onPress={() => navigation.navigate(props.buttonText)}>
      <Text style={styles.button_text}>{props.buttonText}</Text>
    </TouchableOpacity>
  )
}

My problem is that I can't make the navigation.navigate works in the Button component whereas it totally work when I put it directly in the Accueil.js file.

Can you help me?

Poptocrack · Accepted Answer · 2021-05-27 14:12:14Z

2

navigation is a part of props from your Button component

export default function Button({ navigation, ...props }) {
  return (
    <TouchableOpacity style={styles.button} onPress={() => navigation.navigate(props.buttonText)}>
      <Text style={styles.button_text}>{props.buttonText}</Text>
    </TouchableOpacity>
  )
}

You could also do it this way:

export default function Button(props) {
  const { navigation } = props
  ...rest of your code

answered May 27, 2021 at 14:12

Poptocrack

3,0281 gold badge15 silver badges29 bronze badges

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

1 Comment

franjuju Over a year ago

Thank you very much, it works! I missed the 3 little dots before the props when I tried to put it inside the curly brackets. Can you tell me what is the name of adding these dots so I can learn more about it please?

Collectives™ on Stack Overflow

Create a navigation button with a props using react-navigation in React Native

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related