I am facing a peculiar scenario which I am not able to understand. I have a registration screen (functional component) and additional info screen (functional Component) in stack navigator. In the registration screen I have a method which updates the value of Input Text Field on click of signup button. Method is provided below (Unwanted code removed for simplicity). When I click the signup button in the same screen (Registration screen), I see the method signup is getting called which updates the string to Check 1 and also reflects in the input field , no issues there... But When I navigate to the next screen (Additional Info Screen) by passing this method as one of the property in Navigation object and call the same method from that screen using the navigate props object, I see the same method is getting called but the state of the string is not changed to Check 1 . Below code block which i used to call the sign up method from the other screen .
**
// this line takes the user back to the registration screen
navigation.dispatch(
StackActions.push("RegisterScreen", {
params: validateParam,
})
);
// This line calls the signup Method in the registration screen
route.params.params.myParam(validateParam);
**
One more thing I noticed in the logs is when the Signup method is called in that same screen (Registration Screen), below log line is not getting printed. console.log("Inside Register Screen"); But when it is called as a property from the other screen this line is showing in the console right after that method execution which I think is what causing the problem . Can someone please explain why its not working.
const RegisterScreen = ({ navigation, route, ...props }) => {
console.log("Inside Register Screen");
const [additionalInfo, setadditionalInfo] = useState(
" Additional Information"
);
function signup() {
console.log(
"Inside Signup method ********************************************"
);
setadditionalInfo("check 1");
console.log(
"all Done Signup methods ********************************************"
);
return;
}
useEffect(() => {
if (prevRoute !== undefined && prevRoute.name === "additionalScreen") {
console.log("Error Check");
prevRoute.params.params.myParam();
}
});
return (
<ScrollView
id="d1"
contentContainerStyle={{ flexGrow: 1 }}
>
<View
>
<Input
// style={{ height: 10, maxHeight: 10 }}
containerStyle={{
maxHeight: 50,
marginTop: hp(2),
width: "85%",
marginBottom: hp(2),
//backgroundColor: "pink",
}}
onFocus={() => {
navigation.navigate("additionalScreen", {
params: { myParam: signup },
prevState: navigation.state,
});
}}
inputStyle={{ fontSize: 15 }}
//placeholderTextColor="grey"
placeholder=" additional"
//placeholderTextColor="black"
value={additionalInfo}
showSoftInputOnFocus={false}
//disabled
errorStyle={{ color: "red" }}
errorMessage={additionalInfoErrorMessage}
leftIcon={
<FontIcon name="building-o" size={15} color="grey" />
}
keyboardType="email-address"
/>
<TouchableOpacity
onPress={() => {
signup();
}}
style={styles.signUpButton}
>
<Text style={{ color: "black", fontSize: wp(4) }}>
Sign Up
</Text>
</TouchableOpacity>
</View>
</LinearGradient>
</ScrollView>
);
};
I am facing a peculiar scenario which I am not able to understand. I have a registration screen (functional component) and additional info screen (functional Component) in stack navigator. In the registration screen I have a method which updates the value of Input Text Field on click of signup button. Method is provided below (Unwanted code removed for simplicity). When I click the signup button in the same screen (Registration screen), I see the method signup is getting called which updates the string to Check 1 and also reflects in the input field , no issues there... But When I navigate to the next screen (Additional Info Screen) by passing this method as one of the property in Navigation object and call the same method from that screen using the navigate props object, I see the same method is getting called but the state of the string is not changed to Check 1 . Below code block which i used to call the sign up method from the other screen .
**
// this line takes the user back to the registration screen
navigation.dispatch(
StackActions.push("RegisterScreen", {
params: validateParam,
})
);
// This line calls the signup Method in the registration screen
route.params.params.myParam(validateParam);
**
One more thing I noticed in the logs is when the Signup method is called in that same screen (Registration Screen), below log line is not getting printed. console.log("Inside Register Screen"); But when it is called as a property from the other screen this line is showing in the console right after that method execution which I think is what causing the problem . Can someone please explain why its not working.
const RegisterScreen = ({ navigation, route, ...props }) => {
console.log("Inside Register Screen");
const [additionalInfo, setadditionalInfo] = useState(
" Additional Information"
);
function signup() {
console.log(
"Inside Signup method ********************************************"
);
setadditionalInfo("check 1");
console.log(
"all Done Signup methods ********************************************"
);
return;
}
useEffect(() => {
if (prevRoute !== undefined && prevRoute.name === "additionalScreen") {
console.log("Error Check");
prevRoute.params.params.myParam();
}
});
return (
<ScrollView
id="d1"
contentContainerStyle={{ flexGrow: 1 }}
>
<View
>
<Input
// style={{ height: 10, maxHeight: 10 }}
containerStyle={{
maxHeight: 50,
marginTop: hp(2),
width: "85%",
marginBottom: hp(2),
//backgroundColor: "pink",
}}
onFocus={() => {
navigation.navigate("additionalScreen", {
params: { myParam: signup },
prevState: navigation.state,
});
}}
inputStyle={{ fontSize: 15 }}
//placeholderTextColor="grey"
placeholder=" additional"
//placeholderTextColor="black"
value={additionalInfo}
showSoftInputOnFocus={false}
//disabled
errorStyle={{ color: "red" }}
errorMessage={additionalInfoErrorMessage}
leftIcon={
<FontIcon name="building-o" size={15} color="grey" />
}
keyboardType="email-address"
/>
<TouchableOpacity
onPress={() => {
signup();
}}
style={styles.signUpButton}
>
<Text style={{ color: "black", fontSize: wp(4) }}>
Sign Up
</Text>
</TouchableOpacity>
</View>
</LinearGradient>
</ScrollView>
);
};
1 Answer
Reset to default 0Use React Context
Create a Context wrap your app and use context from screens. But in your case This behavior occurs because the state of the string being updated in your RegistrationScreen is part of the state of that component, and when you navigate to a new screen, the RegistrationScreen is no longer active in the React tree. you have to have BLL which is Business logic layer so you can use it globally without sending as a props To ensure state updates are accessible across both screens, you can share the state and methods globally or in a higher-level component.