android - React Native - How to get picker data

Question

I am new to React Native. If I asked something so easy sorry 'bout that. I have Picker Component in my App.js. I want to go to component depending on a Picker item. So, for example; I picked the second item of Picker, when I Clicked the 'Next' button it has to go to second.js

Here is some Part of my Code:

My App.js:

...
...
function Third({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.circle}>2</Text><Text style={styles.titles}>Operating Mode</Text>
      <Text />
      <Text style={styles.description}>Please select operating mode</Text><Text/>
      <Picker/>
      <Button title="Next" style={styles.buttons} color="#FF7F11" onPress={() => navigation.navigate("Fourth")}/><Text/>
      <Button title="Back" style={styles.buttons} color="#FF7F11" onPress={() => navigation.goBack()} /><Text/>
    </View>
  );
}
...
...

and my Picker.js:

import React, { Component } from "react";
import { Text, View, StyleSheet } from "react-native";
import { Picker } from "@react-native-picker/picker";

class Picker extends Component {
    state = {router: ''}
      updaterouter = (router) => {
        this.setState({ router: router })
    }
  render() {
    return (
      <View>
        <Picker selectedValue={this.state.router} style={styles.drop} onValueChange = {this.updaterouter}>
          <Picker.Item label="Rt" value="rt" />
          <Picker.Item label="Ap" value="ap" />
          <Picker.Item label="Rp" value="rp" />
          <Picker.Item label="Wp" value="wp" />
        </Picker><Text></Text>
      </View>
    );
  }
}
export default Picker

const styles = StyleSheet.create({
    drop: {
        height: 30, 
        width: 200, 
        backgroundColor: "#FFF"
    }
 })

question from:https://stackoverflow.com/questions/65950355/react-native-how-to-get-picker-data

Answer 1

One option is to pass the value to the parent via a callback function, something like this:

updaterouter = (router) => {
    this.setState({ router: router })
    props.onRouterUpdated && props.onRouterUpdated(router)
}

 <Picker onRouterUpdated={(r)=>{/*do something with r*/}}/>

Another would be to use common store (e.g. Redux)