Search code examples
javascriptreact-nativejsxreact-native-router-flux

Accessing flag in react native router flux scene


I have a scene called places.js and in that I have passed props for a flag I set up. With two scenes cities.js and countries.js, I have no problem passing the props to them individually. However, I have setup these two scenes to be in tabs using react-native-router-flux-tabs. The problem is here, when I navigate to the tabbed scene, the props for flag appear to be saved and rendered only once. I am confused as to why this is happening when passing props to those scenes without including them in a tabbed scene works. My code is below. Any help is appreciated.I know the props pass through at least once because I logged it but why they aren't stored is my question. this is the setup for the tabbed scene in router This is how I am navigating to the tabbed scene while passing props


Solution

  • For performance issues, the Tabs just render once. If you are using RNRFv4 you should use the onEnter and onExit props of your scenes where your navigator is defined.

    <Scene key="welcome" tabs swipeEnabled={true} hideNavBar >
            <Scene
              key="nav"
              component={NavContainer}
              onEnter={onNavigate}
              initial />
    
            <Scene
                key="scanner"
                component={Scan}
                onEnter={onThis}
                onExit={onThis}
            />
    
            <Scene key="search" component={Search} />
    </Scene>
    
    
    const onNavigate = () => {
      // some logic
      return true;
    };
    
    const onThis = () => {
      // some logic
      return true;
    };