How do I detect if a language has been changed when using the goBack() in React Native?

Question

I have 3 pages that will be interacting with each other. a Login page, a Settings page, and a HomeScreen page. The login page contains a toolbar which has a clickable back arrow image(uses goBack()) and a clickable settings image which redirects to a settings page where a language can be picked.

There is no problem detecting a language change on the settings page because state is updated upon a change in language. However, if the user taps the backarrow image, the login page does NOT detect a change in state. How do I make sure that the login page can detect if the language has been changed(on the Settings page)?

I found on question that is similar to my problem here however, the answer provided uses navigate, whereas I'm using goBack. I know they're similar, but I'm unsure as to how/where I could pass a callback function on my settings page, and where to use refresh() on my Login page.

I use this method on my Login page

componentWillMount() {
        AsyncStorage.getItem('language', (err, result) => {
            langCode = result;
            this.setState({
                currLang: result,

            })
        }); 

    }

On my Settings page:

onLangChange(value, index){
        Config.langCode = value;
        this.setState({ currLang: Config.langCode });
        AsyncStorage.setItem('language', value)
        console.log( 'here is your new lang ' + Config.langCode);
    }

and then

render(){
        const {navigate} = this.props.navigation;
        const {goBack} = this.props.navigation
        const langText = Config.langText[this.state.currLang];  // Object that has text in current language.

        return(
            <ScrollView style={styles.mainContainer}>
                <View style={styles.headerContainer}>
                    <View style={styles.iconContainer}>
                        <TouchableOpacity onPress={ () => goBack('') } >
                            <Image source={Config.images.leftArrowIcon} style={styles.leftArrowIcon} />
                        </TouchableOpacity>

I can answer the question, but before that, can I ask you this first, do you know `redux`? — K.Wu, Jan 19 '18 at 05:54

score 0 · Answer 1 · answered Jan 19 '18 at 06:46

0

Use redux for global states like language in your example. It's just much simpler. If you have like 30 screens in your app, and every screen must display texts in correct language, this means that you have to send language back and forth between 30 screens, that's just horrible. redux is a state container, it's strongly recommended that you put those global states (states that many screens share) in redux and send them to each screen. If you don't know how to use redux yet, don't worry, it's not hard to understand, there're plenty good tutorials online. Here is the LanguagePickerExample I wrote for this question using redux, simply

npm install

or

yarn

then

react-native link

The result looks like this:

answered Jan 19 '18 at 06:46

K.Wu

3,553
6
31
55

Thank you for responding and coming up with a solution. – VK1 Jan 19 '18 at 07:18
Is there any chance this can be done using refresh or by sending properties back when the goBack function is fired? – VK1 Jan 19 '18 at 09:01
@VincentKuneen Not with `this.props.navigation.goBack()`, because this function doesn’t take any arguments, but you can certainly pass states in `this.props.navigation.dispatch(NavigationActions.back({ params: { ... }}))`, where `NavigationActions` is from `import { NavigationActions } from ‘react-navigation’;` Again, believe me, since your next step is to learn `redux`, it’s a complete waste of time trying to pass states while navigating, might as well just learn `redux` now – K.Wu Jan 19 '18 at 09:17
Thanks again for responding..so quickly. I'm looking at a redux tutorial now – VK1 Jan 19 '18 at 09:18

How do I detect if a language has been changed when using the goBack() in React Native?

1 Answers1