React Native - TypeError: undefined is not an object

1.1k Views Asked by At

React Native version 0.62. I am a bit noob in React Native and I am trying to set up react-native-localize as per this guide https://heartbeat.fritz.ai/how-to-use-react-native-localize-in-react-native-apps-3bb3d510f801 but when I change language and come back to my app I am struggling with this error:

enter image description here

Below you can see my App.js

import React, { Component } from 'react';
import { StatusBar, Text } from 'react-native';
import * as RNLocalize from 'react-native-localize'
import {Router, Scene, Tabs} from 'react-native-router-flux';
import Search from '@screens/Search';
import MyAppointments from '@screens/MyAppointments';
import MyAccount from '@screens/MyAccount';
import CustomTabBar from '@components/CustomTabBar';
import theme from '@styles/theme';
import memoize from 'lodash.memoize';
import i18n from 'i18n-js';

const translationGetters = {
  en: () => require('./translations/en.json'),
  it: () => require('./translations/it.json')
};

const translate = memoize(
  (key, config) => i18n.t(key, config),
  (key, config) => (config ? key + JSON.stringify(config) : key)
);

const setI18nConfig = () => {
  const fallback = { languageTag: 'en' };
  const { languageTag } =
  RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
  fallback;

  translate.cache.clear();

  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

export default class App extends Component {
  constructor(props) {
    super(props);
    setI18nConfig()
  }

  componentDidMount() {
    RNLocalize.addEventListener('change', this.handleLocalizationChange)
  }

  componentWillUnmount() {
    RNLocalize.removeEventListener('change', this.handleLocalizationChange)
  }

  handleLocalizationChange = () => {
    setI18nConfig()
      .then(() => this.forceUpdate())
      .catch(error => {
        console.error(error)
      })
  };

  render() {
    return (
      ... render code not important for the issue
    );
  }
}

Many thanks to who will help me.

1

There are 1 best solutions below

2
On BEST ANSWER

seti18nConfig function doesn't return a promise for you to use a .then on it. It is a synchronous function. You can simply write

handleLocalizationChange = () => {
    setI18nConfig()
    this.forceUpdate()
};