(0, _reactI18next.translate) is not a function - react-native

Question

Actually I am new to react native and here I am trying to change language to Arabic using 'react-i18next' but when executed the following error ocures
ReactNativeJS ▶︎ (0, _reactI18next.translate) is not a function. (In
'(0, _reactI18next.translate)('common', {
bindI18n: 'languageChanged',
bindStore: false
})', '(0, _reactI18next.translate)' is undefined)
this is my code
import React from 'react';
import AppNavigator from './src/controller/AppNavigator';
import { translate } from 'react-i18next';
// import i18n from './src/I18n/index';
console.reportErrorsAsExceptions = false;
const WrappedStack = ({ t }) => {
return <AppNavigator screenProps={{ t }} />;
};
const ReloadAppOnLanguageChange = translate('common', {
bindI18n: 'languageChanged',
bindStore: false,
})(WrappedStack);
export default class App extends React.Component {
render() {
return (
<ReloadAppOnLanguageChange/>
);
}
}
AppNavigator.js
import {
createStackNavigator,
createAppContainer,
} from 'react-navigation';
import SScreen from '../view/sScreen/SScreen';
import Login from '../view/login/Login';
import SignUp from '../view/signUp/SignUp';
import TabNavigation from '../controller/TabNavigation';
import ForgotPassword from '../view/forgotPassword/ForgotPassword';
import AddAppointment from '../view/addAppointment/AddAppointment';
import DrProfile from '../view/drProfile/DrProfile';
import PaymentHistory from '../view/paymentHistory/PaymentHistory';
const AppNavigator = createStackNavigator({
SScreen: {
screen: SScreen,
navigationOptions: {
header: null
}
},
Login: {
screen: Login,
navigationOptions: {
header: null
}
},
SignUp: {
screen: SignUp,
navigationOptions: {
header: null
}
},
ForgotPassword: {
screen: ForgotPassword,
navigationOptions: {
header: null
}
},
TabNavigation: {
screen: TabNavigation,
navigationOptions: {
header: null,
title: "TabNavigation",
headerStyle: {
backgroundColor: '#B78FC3',
},
headerTintColor: 'white',
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleStyle: {
flex: 1,
textAlign: 'center',
},
headerLeft: null
},
},
AddAppointment: {
screen: AddAppointment,
navigationOptions: {
title: "Add An Appointment",
headerStyle: {
backgroundColor: '#B78FC3',
},
headerTintColor: 'white',
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleStyle: {
flex: 1,
textAlign: 'center',
},
},
},
DrProfile: {
screen: DrProfile,
navigationOptions: {
headerStyle: {
backgroundColor: '#B78FC3',
},
headerTintColor: 'white',
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleStyle: {
flex: 1,
textAlign: 'center',
},
},
},
PaymentHistory: {
screen: PaymentHistory,
navigationOptions: {
title: "Payment History",
headerStyle: {
backgroundColor: '#B78FC3',
},
headerTintColor: 'white',
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleStyle: {
flex: 1,
textAlign: 'center',
},
},
},
},
{ headerLayoutPreset: 'center' });
const App = createAppContainer(AppNavigator);
export default App;

Answer 1

Use withTranslation() instead of translate() HOC.
Seems like this one is missing in the migration docs.