stefalda / ReactNativeLocalization

Class to localize the ReactNative interface
MIT License
899 stars 122 forks source link

Requested keys of a value that is not an object ERROR #137

Open kesepara opened 5 years ago

kesepara commented 5 years ago

When user presses on changeLocale button this error happens and the app is crashing in Android.

https://i.stack.imgur.com/Lcicy.png

Homepage.js

constructor(props) {
    super(props);

    this.state = {
        locale: {},
        token: '',
    };

    this._changeLocale = this._changeLocale.bind(this);
}

_changeLocale() {

    if(this.state.locale.short === 'TR') {

        changeLocale({id: 2, short: 'EN'}, this.state.token);
        this.setState({
            locale: {id: 2, short: 'EN'}
        })
    } else {
        changeLocale({id: 1, short: 'TR'}, this.state.token);
        this.setState({
            locale: {id: 1, short: 'TR'}
        })
    }

}

renderContent() {

    return(
        <Container style={styles.container}>

            <HomepageHeader _changeLocale={this._changeLocale} locale={this.state.locale} />
        ...
        </Container>
}

HomepageHeader.js

render() {

    return(

        <Header style={styles.header} androidStatusBarColor={'#243f65'}>
         ...

            <Right style={styles.right}>
                <TouchableOpacity style={styles.loginButton} onPress={() => {this.props._changeLocale()}}>
                    <Text style={styles.loginText}>{this.props.locale.short}</Text>
                </TouchableOpacity>
            </Right>

        </Header>
    );
}

Function.js

export function changeLocale(locale, token) {

Variables.LOCALE.setLanguage(locale.short);

AsyncStorage.setItem('locale', JSON.stringify(locale));

return axios({
    method: 'POST',
    url: Variables.API_URL + 'auth/changeLocale',
    data: {
        locale_id: locale.id
    },
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Authorization': 'Bearer ' + token
    },
});
}

Variables.js

static LOCALE = new LocalizedStrings({
    TR: {
        pages: {
            invitation: 'Davet',
            boards: 'Kurullar',
            program: 'Bilimsel Program',
            accommodation: 'Kayıt & Konaklama',
            courses: 'Kurslar',
            general: 'Genel Bilgiler',
            contact: 'İletişim',
            live: 'Canlı',
            papers: 'Bildiriler',
            search: 'Ara',
            speakers: 'Konuşmacılar',
            favorites: 'Favoriler'
        },
    },
    EN: {
        pages: {
            invitation: 'Invitation',
            boards: 'Boards',
            program: 'Scientific Program',
            accommodation: 'Registration & Accommodation',
            courses: 'Courses',
            general: 'General Information',
            contact: 'Contact',
            live: 'Live',
            papers: 'Papers',
            search: 'Search',
            speakers: 'Speakers',
            favorites: 'Favorites'
        }
    }
});

package.json

"dependencies": {
    "axios": "^0.18.0",
    "lodash": "^4.17.11",
    "native-base": "^2.8.0",
    "react": "16.4.1",
    "react-native": "0.56.1",
     ...
    "react-native-localization": "^2.0.1",
    "react-native-vector-icons": "^5.0.0",
    "react-navigation": "^2.13.0"
  }

So basically i want to press a button to change the localization of project which is in Variables.js file.

I was able to do it my previous projects but in this, i can not manage it.

I think that the problem might have been occur because of Android API level. I just read this https://facebook.github.io/react-native/docs/improvingux#use-android-ripple

But still i have no solutions.

Any help would be appreciated. Thanks.

m00gl3 commented 5 years ago

I'm getting the same issue with

react-native 0.57 and react-native-localization": "^2.0.1"

It's failing on new LocalizedString()

gremech commented 5 years ago

+1 It depends on nested objects. Works fine in debug mode react-native 0.57.2 react-native-localization 2.0.3

wkoutre commented 5 years ago

FWIW, I spent too long troubleshooting this only to find I:

1) was using a number and not a string for as one of my LocalizedString's key's values and 2) recently introduced an (apparently breaking) circular dependency

Only experience the error with the debugger disconnected, but this was my issue.

EslamNasser commented 5 years ago

Got the same problem even in debug mode:

react-native: 0.57.0
react-native-localization: 2.0.3

Anybody found a solution/workaround? @stefalda can you please help with this?

wkoutre commented 5 years ago

@EslamNasser Check that all of your values are of type string, string[], or { [key: string]: string }. Also check that your project doesn't have any circular imports.

EslamNasser commented 5 years ago

@wkoutre I have some values that are numeric, but it's only throwing the error when i'm setting the language to arabic, also it works absolutely fine if i'm in debug mode.

wkoutre commented 5 years ago

@EslamNasser Yes, the same was happening to me (language was Chinese, though).

Try changing the numeric values to strings, and account for that where applicable in the code referencing the LocalizedString.

Also, beware of circular imports.

Biplovkumar commented 5 years ago

same here with "hi" . When i setting language hindi then error came.

Biplovkumar commented 5 years ago

FWIW, I spent too long troubleshooting this only to find I:

  1. was using a number and not a string for as one of my LocalizedString's key's values and
  2. recently introduced an (apparently breaking) circular dependency

Only experience the error with the debugger disconnected, but this was my issue.

Really in debug,it is like charm.

wmonecke commented 5 years ago

This is so weird. It is ONLY happening on Android. On iOS it is working fine. @wkoutre I did what you said about numeric values and the app still crashes when I try to change the language. What do you mean with circular imports? Like recursive importing?

wkoutre commented 5 years ago

@wmonecke Yes, recursive importing is what I meant. In the console, you may see warning messages that end in Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle..

If this is the case, do your best to clean them all up by refactoring your directory and import/require structure.

PM me if you want, and I'll try my best to help you figure it out. Since you're trying to change the language on the fly, there are many possible contributing factors at play.