as for someone new to react native, how can I get the updated value from usestate and apply it to another function? for example here is my code:

function HomeScreen({ navigation }) {
    return (
        <View style={styles.container}>
            <TouchableOpacity
                style={styles.scanButton}
                title="Scan"
                onPress={() => navigation.navigate("BarcodeScanner")}
            >
                <Text style={styles.scanText}>Scan</Text>
            </TouchableOpacity>
            <TextInput
                style={styles.input}
                placeholder="Barcode Value ... "
                // i want to put the updated value here in "value"
                value=""
            />
        </View>
    );
}

function BarcodeScanner() {
    const [barcodeData, setBarcodeData] = useState();

    const handleBarCodeScanned = ({ data }) => {
        setScanned(true);
        Alert.alert("Result", `Barcode data ${data} has been scanned!`, [
            {
                text: "Cancle",
                onPress: () => console.log("Cancle pressed"),
            },
            {
                text: "Apply",
              onPress: () => setBarcodeData(data),
            },
        ]);
        
    };

I have tried for hours but I didn't come to a solution, any suggestions?

CodePudding user response：

We could pass the barcodeData back to the HomeScreen using route params. Actually, from the code that you have provided, we could remove the state in BarcodeScanner and pass data in the handleBarCodeScanned function directly.

This could be implemented as follows. I assume that HomeScreen is a Screen defined in a navigator.

function BarcodeScanner() {
       const navigation = useNavigation()

        Alert.alert("Result", `Barcode data ${data} has been scanned!`, [
            {
                text: "Cancle",
                onPress: () => console.log("Cancle pressed"),
            },
            {
                text: "Apply",
              onPress: () => navigation.navigate("HomeScreen", {data: data}),
            },
        ]);
        
};

In Homescreen, we handle the state.

function HomeScreen({ navigation, route }) {
    const [barcodeData, setBarcodeData] = useState();

    useEffect(() => {
         if (route.params) {
             setBarcodeData(route.params.data)
         }
    }, [route.params])
    return (
        <View style={styles.container}>
            <TouchableOpacity
                style={styles.scanButton}
                title="Scan"
                onPress={() => navigation.navigate("BarcodeScanner")}
            >
                <Text style={styles.scanText}>Scan</Text>
            </TouchableOpacity>
            <TextInput
                style={styles.input}
                placeholder="Barcode Value ... "
                value={barcodeData}
            />
        </View>
    );
}