Passing parameter navigation from stack navigation to child component

Question

I’m new to React On and I’m building an app where I need to rethink the same code several times with only a few differences, so I’m creating components for this, but in one of the components there is a button and when pressed it navigates to another route, usually when I need to do this the stack navigation always passes as props the navigation property and we use it as follows navigation.navigate('nome-da-rota'), however I need to use this property inside the child component, but every time I try I get the error ERROR Warning: Cannot update a component from inside the function body of a different component.

My component is in another file

My code:

export default function Main({navigation}) {
   return (
    <>
      <View style={styles.header}>
        <TouchableOpacity style={styles.touch} onPress={logout}>
          <Image source={Logout} style={styles.logoutImage}></Image>
          <Text style={styles.outText}>Sair</Text>
        </TouchableOpacity>
      </View>
      <ScrollView>
        {admin && <Admin navigation={navigation} />}
      </ScrollView>
    </>
  )
}

Answer 1

Hook useNavigation

An alternative, besides the one given by @Lucassouza, is to use the hook useNavigation. Like the documentation itself says, it is most useful when you do not want to pass the prop navigation for a child component, or when you have a very nested component tree, where you would have to stay passing the prop for each component of the tree, until you reach the point where you want it. For example:

<Main>
  <Header>
    <NavList>
       {/* aqui usa a prop `navigation` */}
       <NavLink />
    </NavList>
  </Header>
</Main>

---

To use the hook useNavigation, is the same as the others Hooks:

import React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function MyButton() {
    const navigation = useNavigation();

    return (
        <Button
            title="Click me!"
            onPress={() => navigation.navigate('MyRoute')}
        />
    );
}

You import it and make the function call.

The warning message

Another thing to note is that the error message:

ERROR Warning: Cannot update a component from inside the function body of a different component.

Appears when you change a state of a component in rendering, from another component, as per can be seen in the React documentation.

So depending on how you’re doing, or maybe how the react-navigation works, the state of one component is being changed by another, in an inappropriate way.

Answer 2

An alternative for your case would be to centralize in your Main component the navigation functions and descend these functions via direct link, example:

export default Main = ({navigation}) => {
    const navegaAdmin = navigation => navigation.navigate('nome-da-rota');
    
    return (
     <>
       <View style={styles.header}>
         <TouchableOpacity style={styles.touch} onPress={logout}>
           <Image source={Logout} style={styles.logoutImage}></Image>
           <Text style={styles.outText}>Sair</Text>
         </TouchableOpacity>
       </View>
       <ScrollView>
         {admin && <Admin navegar={navegaAdmin} />}
       </ScrollView>
     </>
   )
 }

And your Admin component on the button would look something like this:

<TouchableOpacity onPress={navegar} />

If you do not want to destructing the props in your Admin component then the navigation button would look like this:

<TouchableOpacity onPress={props.navegar} />