Navigating to function and passing state to function

user_12060231 0
Viewed 117

I have two simple questions. The first question deals with being able to navigate to a functional screen. I have a stack of screens in App.js. In my Home screen, you can see I ask the user for location permissions and log the latitude and longitude. I would like to be able to navigate from my Home screen to Screen1. You can see below how I am attempting to do so, I can do it with components but I am confused how to do it with functions.

My second question is dealing with the latitude and longitude states. I would like to access those values on Screen1. How can I pass those states to screen1 to be able to display them?

Here is the code below as well as a working snack demo here.

I appreciate any insight more than you know. Thank you.

EDIT:: enter image description here

App.js

export default function MyTabs() {
  return (
<NavigationContainer>
    <Stack.Navigator
     initialRouteName="Home">        
      <Stack.Screen name="Home" component= {Home} options={{headerShown: false}}/>
       <Stack.Screen name="Screen1" component= {Screen1} options={{headerShown: false}}/>
    </Stack.Navigator>
    </NavigationContainer>
);
}

Home.js

return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{latitude}</Text>
      <Text style={styles.paragraph}>{longitude}</Text>

      <TouchableOpacity onPress={() => navigation.navigate('Screen1')}>
      <Text style={styles.paragraph}>Click me to go to screen1</Text>
      </TouchableOpacity>
      
    </View>
  );
}

Screen1.js

export default function Screen1() {
  const [latitude, setLatitude] = useState(null);
  const [longitude, setLongitude] = useState(null);
  
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{latitude}</Text>
      <Text style={styles.paragraph}>{longitude}</Text>
    </View>
  );
}
react-native reactjs
1 Answers

The main problem with your code here is that you're not destructuring the navigation property in your functional component, therefore the navigation.navigate('Screen1') action in your Home component will not do anything.

The other problem is that the latitude and longitude states are only in the Home component, so they won't be able to be accessed from the Screen1 component either. If you want these values passed to both components, you should move the state up into the MyTabs component. After moving the state up, you'll then need to pass the states as props to each component, while also passing the Stack Navigator built-in props. Here's an example:

<Stack.Screen name="Home" component={(props) => <Home {...props} latitude={latitude} longitude={longitude} />} options={{headerShown: false}}/>

Since you're now passing the props in the Stack Screen, you'll also need to destructure them in the child components like so:

export default function Home({ navigation, latitude, longitude }) {
// ... code

I modified your snack project, you can see my working example here: https://snack.expo.dev/DTysd-eVa

To provide some additional insight and learns for you:

Make sure you take some time to understand the basic React principles of states and props. If you ever want to access a state from one component in another component that isn't a direct child, you should always move the state up to the component that is a parent of both of them, and then pass the state down as props to each one. If you ever find yourself realizing that you want to access a state from a component's sibling, you should reconsider your logic and move the state upward.

Another awesome tool in React are Context Providers. If you aren't familiar with these, you should definitely check them out. Context Providers can be used to share values with components anywhere in your app so that you don't have to worry as much about component hierarchy and passing down states as props, etc. But in your particular situation, passing down a state as props is the most logical solution.

user_171789150
Related