Passing functions in React Native using navigation in Javascript

Context Providers offer a way to supply components with values throughout your application, eliminating concerns over component hierarchy and passing states as props. For further information, please refer to the link provided.
To implement this, consider passing an arrow function as a prop in your component instead of directly passing the AppDrawer component. This function should return the AppDrawer component.


Solution:

Your functional component lacks destructuring of the

navigation

property, which is the root issue with your code. As a result, the

Home

component’s

navigation.navigate('Screen1')

action will not have any effect.

The issue lies in the fact that the latitude and longitude states are confined to the

Home

component, preventing access from the

Screen1

component. To resolve this, the state should be elevated to the

MyTabs

component and passed down to both components as

props

, along with the built-in props of the Stack Navigator. Consider the following example:

 } options={{headerShown: false}}/>

As you pass the props in the Stack Screen, it is necessary to destructure them in the child components.

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

Check out my modified version of your snack project at https://snack.expo.dev/DTysd-eVa, where I have provided a working example.

To furnish you with further understanding and knowledge,

It is crucial to grasp the fundamental concepts of states and props in React. In case you need to access a state from a non-direct child component, it’s best to elevate the state to their common parent and then pass it down as props. However, if you realize that you need to access a state from a sibling component, it is advisable to rethink your approach and move the state higher up in the component hierarchy.

React has a useful feature called Context Providers, which allow you to share values across components in your app without worrying about the component hierarchy or passing down states as props. However, in your current scenario, it would be more logical to pass down the state as props.

Frequently Asked Questions