How can I read the value inside a TextInput? - reactjs

Question

I have a TextInput, and have a function named onEnterPin.
But i just couldnt reach that value. All I want is to get the value inside TextInput, and navigate to another screen if the value inside TextInput is correct
Could you help me? Btw one more question: After the pin is correct, i navigate to Home screen, and on Home screen I should have rooms(like living room etc, and items(tv, internet etc) under the room name and picture. Could you give me hint?
Here is the code
import React, { useState } from "react";
import { Text, View, Button, StyleSheet, TextInput, Alert } from "react-native";
const SplashScreen = ({ navigation }) => {
const [pin, setPin] = useState('');
const CORRECT_PIN = "5555";
const onEnterPin = (pin)=>{
if(pin === CORRECT_PIN) {
navigation.navigate("Home");
}
else{
Alert.alert("problem here")
}
};
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Welcome to Rooms Page</Text>
<Button
title="Go to HomeScreen"
onPress = {() => {
navigation.navigate("Home", {
itemId: 86,
otherParam: "anything you want here"
});
}} // go to the screen named Home
/>
<Text>PIN gir</Text>
<TextInput value={pin} style={styles.textInput} onChangeText={pin => setPin(pin)}></TextInput>
<Button
title="Enter"
onPress = {() => {
onEnterPin(value); // i guess the problem is here, what should i write
}}
/>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#307ecc',
},
textInput: {
borderWidth:.5,
height:35,
margin:12,
}
});
export default SplashScreen;
HomeScreen.js
import React from "react";
import { View, Text, Button } from "react-native";
const HomeScreen = ({ route, navigation }) => {
const { itemId } = route.params;
const { otherParam } = route.params;
return(
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Text>itemId: {JSON.stringify(itemId)}</Text>
<Text>otherParam: {JSON.stringify(otherParam)}</Text>
<Button
title="Go back"
onPress = {() => navigation.goBack()}
/>
<Button
title="go to example screen"
onPress={() => navigation.navigate("Example")}
/>
<Button
title="go to Home page again, using push"
onPress = {() => {
navigation.push("Home", {
itemId: Math.floor(Math.random() * 100)
}),
navigation.setParams({itemId:200}) // it updates itemId as 200, then does random number job in Math.random()
}}
/>
</View>
// Avoid using setParams to update screen options such as title etc. If you need to update options, use setOptions instead.
)
}
export default HomeScreen;

Answer 1

Change onEnterPin parameter from value to pin like this:
<Button
title="Enter"
onPress = {() => {
onEnterPin(pin); // <<<<<<<<<<<<<<<<
}}
/>

Answer 2

my Textinput has an ID and with this we can do this:
document.getElementById(id).value
to get the value of the Input.

Answer 3

You don't need to pass it to a function since the pin value already exists in local state:
const onEnterPin = () => {
if (pin === CORRECT_PIN) {
navigation.navigate("Home");
}
else {
Alert.alert("problem here")
}
};
and:
<TextInput value={pin} style={styles.textInput} onChangeText={setPin} />
<Button
title="Enter"
onPress={onEnterPin}
/>

Answer 4

As the 'pin' variable exists as a local state, you can use it in the 'onEnterPin()' method, without using a parameter.
The 'onEnterPin' method will be as:
const onEnterPin = () => {
if(pin === CORRECT_PIN) {
navigation.navigate("Home")
}
else{
Alert.alert("problem here")
}
}