I’m new to React Native
and I’m trying to add translation in my navigation. In any other page it goes fine but not in my navigation.
My i18n.js
JavaScript
x
62
62
1
import i18n from 'i18next';
2
import { initReactI18next } from 'react-i18next';
3
import storage from '../app/services/storage';
4
import { USER_LANG, getDeviceLang } from './utils';
5
6
/** Localization */
7
import en from './en.json';
8
import es from './es.json';
9
import no from './no.json';
10
/** Localization */
11
12
/*---------------------------------
13
LANGUAGE DETECTOR
14
---------------------------------*/
15
const languageDetector = {
16
init: Function.prototype,
17
type: 'languageDetector',
18
async: true, // flags below detection to be async
19
detect: async (callback) => {
20
const userLang = await storage.get(USER_LANG);
21
22
const deviceLang = userLang || getDeviceLang();
23
//RNRestart.Restart();
24
callback(deviceLang);
25
},
26
cacheUserLanguage: () => { },
27
};
28
29
/*---------------------------------
30
I18N CONFIG
31
---------------------------------*/
32
i18n
33
.use(languageDetector)
34
.use(initReactI18next)
35
.init({
36
compatibilityJSON: 'v3',
37
fallbackLng: 'en',
38
resources: {
39
en,
40
es,
41
no,
42
},
43
// have a common namespace used around the full app
44
ns: ['translation'],
45
defaultNS: 'translation',
46
47
debug: true,
48
49
// cache: {
50
// enabled: true
51
// },
52
53
interpolation: {
54
escapeValue: false,
55
},
56
react: {
57
useSuspense: false,
58
}
59
});
60
61
export default i18n;
62
My StackNavigators.js
JavaScript
1
85
85
1
import React, { useState, useEffect } from 'react';
2
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
3
import { Keyboard } from 'react-native';
4
import TodayRates from '../pages/todayrates';
5
import Dashboard from '../pages/dashboard';
6
import UserService from '../services/userService';
7
import Profile from '../pages/profile';
8
import TodayActivities from '../pages/todayActivities';
9
import Tasks from '../pages/tasks';
10
import Task from '../pages/task';
11
import Settings from '../pages/settings';
12
import { BottomNavigation, BottomNavigationTab } from '@ui-kitten/components';
13
import { CreateTaskIcon } from '../assets/icons';
14
15
// For translation
16
import '../../i18n/i18n';
17
import { useTranslation } from 'react-i18next';
18
const { t, i18n } = useTranslation(); //<-- This is the issue and not sure where to add
19
20
const { Navigator, Screen } = createBottomTabNavigator();
21
22
const BottomTabBar = ({ navigation, state }) => (
23
<BottomNavigation>
24
<BottomNavigationTab title='Dashboard'/>
25
<BottomNavigationTab title='Activities' />
26
<BottomNavigationTab
27
icon={<CreateTaskIcon fill="#fff" width={30} height={30} />}
28
/>
29
<BottomNavigationTab title='Tasks' />
30
<BottomNavigationTab title='Rates' />
31
</BottomNavigation>
32
);
33
34
const StackNavigators = () => {
35
const [user, setUser] = useState({});
36
const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
37
const getUser = async () => {
38
await UserService.getCurrentUser().then((user) => {
39
setUser(user);
40
})
41
}
42
43
useEffect(() => {
44
getUser();
45
46
const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
47
setIsKeyboardVisible(true);
48
});
49
const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
50
setIsKeyboardVisible(false);
51
});
52
53
return () => {
54
showSubscription.remove();
55
hideSubscription.remove();
56
};
57
}, [isKeyboardVisible]);
58
59
const getVisibilityStyle = (keyboardVisibility, props) => {
60
if (!keyboardVisibility){
61
return <BottomTabBar {props}/>;
62
}
63
return null;
64
}
65
66
return (
67
<Navigator
68
initialRouteName="Dashboard"
69
tabBar={
70
props => getVisibilityStyle(isKeyboardVisible, props)
71
}>
72
<Screen name="Dashboard" component={Dashboard} options={{ headerShown: false }} />
73
<Screen name="Activities" initialParams={{ user: user }} component={TodayActivities} options={{ headerShown: false }} />
74
<Screen name="+" component={Task} options={{ unmountOnBlur: true, headerShown: false }} />
75
<Screen name="Tasks" component={Tasks} options={{ unmountOnBlur: true, headerShown: false }} />
76
<Screen name="TodayRates" initialParams={{ user: user }} component={TodayRates} options={{ unmountOnBlur: true, headerShown: false }} />
77
<Screen name="Profile" component={Profile} options={{ headerShown: false }} />
78
<Screen name="Settings" component={Settings} options={{ headerShown: false }} />
79
<Screen name="EditTask" component={Task} options={{ unmountOnBlur: true, headerShown: false }} />
80
</Navigator>
81
);
82
}
83
84
export default StackNavigators;
85
What I’m trying to do is to add translation in BottomTabBar
as title
of each BottomNavigationTab
and when I add const { t, i18n } = useTranslation();
I get Invalid hook call
and I’m not sure what would the correct place/way be.
Appreciate any help and thanks in advance!
Advertisement
Answer
You cannot call a hook outside of a React component or hook (see Rules of Hooks). Move this line const { t, i18n } = useTranslation();
inside BottomTabBar
component. Like so:
JavaScript
1
14
14
1
const BottomTabBar = ({ navigation, state }) => {
2
const { t, i18n } = useTranslation();
3
return(
4
<BottomNavigation>
5
<BottomNavigationTab title='Dashboard'/>
6
<BottomNavigationTab title='Activities' />
7
<BottomNavigationTab
8
icon={<CreateTaskIcon fill="#fff" width={30} height={30} />}
9
/>
10
<BottomNavigationTab title='Tasks' />
11
<BottomNavigationTab title='Rates' />
12
</BottomNavigation>)
13
};
14