How prevent navigation stack from rerendering entire tree upon state update?

user_14057608 0
Viewed 143

I have a stack of screens. Each screen has a state which toggles languages. Problem is when I toggle the language RN rerenders the entire stack tree which takes me back to the first screen.

What I want is to rerender the screen Im at and stay there.

    const [lang, setLang] = useState ('EN');
    const toggleLang = () => {
       (lang === 'EN')?setLang ('FR'):setLang('EN');
    }
    
    <NavigationContainer>
       <Stack.Naviator>
          <Stack.Screen name = { (lang === 'EN')?'English':'French' } options = {{headerRight () => onPress = {toggleLang} }}/>
          <Stack.Screen name = { (lang === 'EN')?'English':'French' }options = {{headerRight () => onPress = {toggleLang} }}/>
          <Stack.Screen name = { (lang === 'EN')?'English':'French' }options = {{headerRight () => onPress = {toggleLang} }}/>
       </Stack.Naviator>
    </NavigationContainer>
react-navigation-stack react-native state rendering
1 Answers

Try this way

<NavigationContainer>
  <Stack.Naviator>
    {lang === "EN" ? (
      <Stack.Screen
        name="English"
        options={{ headerRight: () => (onPress = { toggleLang }) }}
      />
    ) : (
      <Stack.Screen
        name="French"
        options={{ headerRight: () => (onPress = { toggleLang }) }}
      />
    )}
  </Stack.Naviator>
</NavigationContainer>
user_12833450
Related