routesreact-nativereact-routing

react-native-router-flux, how to get current scene key


Hey I'm trying to get current scene key while using react-native-router-flux.

my route file:

const AppRouter = connect()(Router)

class Routes extends Component {
  render() {
    function selector(props) {
      console.log(props)
      // GoogleAnalytics.trackView(props.navigationState)
      return props.auth.isLoggedIn ? (props.auth.isVerified? 'home': 'authenticate') : 'authenticate'
    }

    const component = connect(state => ({
      auth: state.auth,
    }))(Switch)

    return (
      <AppRouter>
        <Scene key="root" component={component} tabs selector={selector} hideNavBar hideTabBar>
          <Scene key="authenticate" hideTabBar>
            <Scene type="replace" key="login" title="Login" initial component={GradientBackground(LoginScreen)} hideNavBar/>
            <Scene type="replace" key="register" component={GradientBackground(RegisterScreen)} hideNavBar/>
            <Scene type="replace" key="forgotPassword" title="forgotPassword" component={GradientBackground(ForgotPasswordScreen)} hideNavBar/>
            <Scene type="replace" key="emailConfirmation" component={GradientBackground(EmailConfirmationScreen)} hideNavBar/>
          </Scene>
          <Scene key="home" component={NavigationDrawer} type="replace">
            {require('./scenes/home')}
          </Scene>
        </Scene>
      </AppRouter>
    )
  }
}

export default Routes

as you can see I'm trying to send current scene name to google analytics for tracking, but I can't seem to be able to get current displayed scene key, any ideas?


Solution

  • I ended up implementing a middle reducer:

    const AppRouter = connect()(Router)
    
    class Routes extends Component {
    
      render() {
        let catchInitialState = false
    
        function selector(props) {
          return props.auth.isLoggedIn ? (props.auth.isVerified? 'home': 'authenticate') : 'authenticate'
        }
    
        const reducerCreate = params => {
          const defaultReducer = Reducer(params)
          return (state, action) => {
            if(action.type == 'RootContainerInitialAction') {
              catchInitialState = true
            }
    
            if(catchInitialState && action.type != 'RootContainerInitialAction') {
              GoogleAnalytics.trackScreenView(action.scene.sceneKey)
              catchInitialState = false
            }
    
            if(action.type == 'REACT_NATIVE_ROUTER_FLUX_REPLACE') {
              GoogleAnalytics.trackScreenView(action.key)
            }
    
            return defaultReducer(state, action)
          }
        }
    
        const component = connect(state => ({
          auth: state.auth,
        }))(Switch)
    
        return (
          <AppRouter createReducer={reducerCreate}>
            <Scene key="root" component={component} tabs selector={selector} hideNavBar hideTabBar>
              <Scene key="authenticate" hideTabBar>
                <Scene type="replace" key="login" initial component={GradientBackground(LoginScreen)} hideNavBar/>
                <Scene type="replace" key="register" component={GradientBackground(RegisterScreen)} hideNavBar/>
                <Scene type="replace" key="forgotPassword" component={GradientBackground(ForgotPasswordScreen)} hideNavBar/>
                <Scene type="replace" key="emailConfirmation" component={GradientBackground(EmailConfirmationScreen)} hideNavBar/>
              </Scene>
              <Scene key="home" component={NavigationDrawer} type="replace">
                {require('./scenes/home')}
              </Scene>
            </Scene>
          </AppRouter>
        )
      }
    }
    
    export default Routes