I'm working on an old React Native app and am not familiar with class based components, I have a boolean value (isJobOwner) which I want to pass from one screen to the other, and then on that next screen check whether the isJobOwner boolean is true or false, in which case I will take the user onto a final screen dependent on the truthy or falsy value of that using a ternary operator.
My 2 files currently look like this:
SignUpChoice.js:
class SignUpChoice extends React.Component {
static navigationOptions = ({ navigation }) => ({
header: (
<Header
leftComponent={<GoBackComponent onPress={() => navigation.goBack()} />}
containerStyle={commonStyles.headerContainer}
centerComponent={<CustomHeader name="Account Type" />}
/>
),
});
onChooseRole(isJobOwner) {
saveRole(isJobOwner ? 'owner' : 'seeker');
NavigationService.navigate('Tutorial', { isJobOwner: isJobOwner });
}
render() {
return (
<Container>
<Content>
<View style={styles.signUpChoiceContainer}>
<Button
style={styles.jobButton}
onPress={() => this.onChooseRole(true)}
>
<Text style={styles.jobText}>
Are you looking for a Tradesman?
</Text>
</Button>
<Button
style={styles.jobButton}
onPress={() => this.onChooseRole(false)}
>
<Text style={styles.jobText}>Are you looking for work?</Text>
</Button>
</View>
</Content>
</Container>
);
}
}
Tutorial.js:
class Tutorial extends React.Component {
static navigationOptions = { header: null };
constructor(props) {
super(props);
this.state = {
isLoading: false,
};
}
onNextStep() {
// NavigationService.navigate(isJobOwner ? 'FindEmployers' : 'FindJobs');
this.props.navigation.navigate(
this.props.isJobOwner ? 'FindEmployers' : 'FindJobs'
);
}
onGoBack() {
this.props.navigation.navigate('SignUpChoice');
}
render() {
return (
<Container>
{(this.props.requesting || this.state.isLoading) && (
<Loader size={'large'} color={colors.white} />
)}
<Content contentContainerStyle={{ height: '100%' }}>
<View style={styles.buttonsContainer}>
<Button
transparent
style={styles.tutorialButton}
onPress={() => this.onNextStep()}
>
<Text style={styles.tutorialButtonText}>Next Step</Text>
</Button>
<Button
transparent
style={styles.backButton}
onPress={() => this.onGoBack()}
>
<Text style={styles.backButtonText}>Go Back</Text>
</Button>
</View>
</Content>
</Container>
);
}
}
When onNextStep is clicked, I want to navigate to either the FindEmployers or FindJobs screen dependent on if isJobOwner is true or false.
I know this is pretty simple but any quick advice would be greatly appreciated! Many thanks.
CodePudding user response:
If you are using reactnavigation you can:
this.props.navigation.navigate('Tutorial', { isJobOwner: isJobOwner });
And then retrieve the route params with:
class Tutorial extends React.Component {
render() {
const { navigation } = this.props;
const isJobOwner = navigation.getParam('isJobOwner', false);
...
}
}
Check the documentation https://reactnavigation.org/docs/3.x/params for more
CodePudding user response:
Your code is wrong.
this.props.isJobOwner
This is correct code.
this.props.route.params.isJobOwner
Please test using console.info(this.props.route.params)
In summary,
First screen : this.props.navigation.navigate('Tutorial', { isJobOwner: isJobOwner })
Second screen : console.info(this.props.route.params.isJobOwner