I'm using react navigation for react native in an app whose UI can be in English or in Hebrew. In the settings menu, there's an option to toggle between the two languages, which should toggle the header title between "Settings" and "הגדרות."
updateTranslation() {
this.props.navigation.setParams({
title: this.state.settings.hebrew ? 'הגדרות' : 'Settings',
});
}
The code that actually displays the title is pretty much just taken from the react-navigation documentation:
class App extends React.Component {
render() {
return (
<NavigationContainer>
<Navigator>
<Screen
name="SettingsMenu"
component={SettingsMenu}
options={({route}) => {
console.log('route', route);
return {
title: route.params ? route.params.title : "Settings",
};
}}
/>
</Navigator>
</NavigationContainer>
When I toggle the option to Hebrew though, the title just disappears. I know the change was successful because when I console.log(route), it says "params": {"title": "הגדרות"}. Nonetheless, it doesn't actually render anything until I switch the title back to English, and then it shows "Settings".
At first I thought that maybe react navigation might always have trouble with non-English characters, but if a route's title is initially in Hebrew, and it's never changed, the title will render. The only time it won't is if it was originally in English and then it's changed to Hebrew. There is also no issue with changing the title from one English word to another. The problem only happens when I change it from English to Hebrew.
Does anyone know how I might fix this? (Also, this is my first post, so please bear with me)