Translate react navigation tabBarLabel in react native - react-native

Question

I have couple of screens in one of them i have a materialTopTabNavigator with two tabs, i need to translate tab names for different languages.
i tried using useNAvigation and withTranslation but it seems i don't have access to i18next t function to translate.
const Stack = createStackNavigator();
const Router = () => {
const Tab = createMaterialTopTabNavigator();
function MyAdsTabs() {
return (
<Tab.Navigator
tabBarOptions={{
activeTintColor: colors.darkGray,
labelStyle: {fontSize: 12},
style: {backgroundColor: colors.white, borderTopWidth: 0, elevation: 0, shadowOpacity: 0},
}}>
<Tab.Screen
name="MyActiveAds"
component={MyActiveAds}
options={{tabBarLabel: 'MyActiveAds'}}
/>
<Tab.Screen
name="MyDeactiveAds"
component={MyDeactiveAds}
options={{tabBarLabel: 'MyDeactiveAds'}}
/>
</Tab.Navigator>
);
}
function MainStackScreen() {
return (
<Stack.Navigator initialRouteName={'Splash'} headerMode="none">
<Stack.Screen name="Splash" component={Splash} />
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Setting" component={Setting} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="Terms" component={Terms} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="EditProfile" component={EditProfile} />
<Stack.Screen name="Search" component={Search} />
<Stack.Screen name="FavouriteAds" component={FavouriteAds} />
<Stack.Screen options={{title: 'My home'}} name="MyAdsTabs" component={MyAdsTabs} />
</Stack.Navigator>
);
}
renderLoading = () => (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>KojaChera</Text>
<ActivityIndicator size="large" color={colors.darkerTeal} />
</View>
);
return (
<Provider store={store}>
<PersistGate persistor={persistor} loading={this.renderLoading()}>
<Root>
<NavigationContainer>
<MainStackScreen />
</NavigationContainer>
</Root>
</PersistGate>
</Provider>
);
};
export default Router;
and this is a part of my package.json:
"react": "16.11.0",
"react-i18next": "^11.3.4",
"react-native": "0.62.2",
"#react-native-community/masked-view": "^0.1.9",
"#react-navigation/material-top-tabs": "^5.1.14",
"#react-navigation/native": "5.2.3",
"#react-navigation/stack": "5.2.18",
"i18next": "^19.4.2",

Answer 1

i solved it by passing i18n as a prop into my router component
const App = () => {
return(
<I18nextProvider i18n={ i18n }>
<Router i18n={ i18n } />
</I18nextProvider>
);
}
and used it this way:
<Tab.Screen name="MyDeactiveAds" component={MyDeactiveAds}
options={{ tabBarLabel: i18n.t('myAds:inActiveAds') }}/>