CODEWITHSUNDEEP
reactjsreact-native
Justin Priede
Justin Priede

Reputation: 119

Passing state to parent and then to child

I have app.js which assigns values to a state. I am then trying to pass that state to a Home screen which renders a Screen1. I need this state in Screen1.

You can see I am trying to display the users latitude and longitude on Screen1 but I am not able to render anything.

I have listed the code below as well as in this snack demo here. The goal is for the state to go from App.js -> Home.js -> Screen1.js

EDIT:: I might use React native context but never have before. If the current way I am doing it is considered a poor practice then context is the way to go.

Home.js

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

  return (
    <View style={styles.container}>
        <Screen1 />
    </View>
  );
}

Screen1.js

export default class Screen1 extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>latitude:</Text>
        <Text style={styles.paragraph}>{this.props.latitude}</Text>
        <Text style={styles.paragraph}>longitude:</Text>
        <Text style={styles.paragraph}>{this.props.longitude}</Text>
      </View>
    );
  }
}


export default function MyTabs() {
  const [latitude, setLatitude] = useState(null);
  const [longitude, setLongitude] = useState(null);
  
 const permissionAlert = () => {
    Alert.alert(
      'You did not allow location permissions',
      'Please go to settings and allow location permissions for full functionality',
      [
      ],
      { 
        cancelable: true 
      }
    );
  }

  useEffect(() => {
    (async () => {
      
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        permissionAlert();
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLatitude(location.coords.latitude)
      setLongitude(location.coords.longitude);
    })();
  }, []);

  console.warn("latitude: ", latitude);
  console.warn("longitude: ", longitude);
  
  return (
<NavigationContainer>
    <Stack.Navigator
     initialRouteName="Home">        
      <Stack.Screen name="Home" options={{headerShown: false}}>
        {(props) => <Home {...props} latitude={latitude} longitude={longitude} />}
      </Stack.Screen>
      <Stack.Screen name="Screen1" options={{headerShown: false}}>
        {(props) => <Screen1  {...props} latitude={latitude} longitude={longitude} />}
      </Stack.Screen>
    </Stack.Navigator>
    </NavigationContainer>
);
}

Upvotes: 0

Views: 33

Answers (1)

superhawk610
superhawk610

Reputation: 2653

You need to pass latitude/longitude from MyTabs -> Home -> Screen1. Currently, you're setting them on Home, but not on Screen1. To fix, add the props to <Screen1 /> in Home.js

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

  return (
    <View style={styles.container}>
        <Screen1 latitude={latitude} longitude={longitude} />
    </View>
  );
}

It's also worth noting that you're rendering Screen1 both

  • directly within MyTabs
  • indirectly in MyTabs, when you render Home

Basically, make sure you always pass all expected props when you render a component and you should be good to go!

Upvotes: 1

Related Questions