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

Question

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?

score 5 · Accepted Answer · answered Jul 27 '16 at 18:42

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

For "const defaultReducer = Reducer(params)", where are you importing the "Reducer" function that you pass params to? I'm not sure what the point of it is: "return defaultReducer(state, action)". — Squeaky, Aug 16 '16 at 17:26
Once the custom reducer does it's job (which is helping me track page changes to google analytics) I return the state and action to the default reducer so the router can do it's magic and change the view in app, otherwise router stops working. Default reducer is part of the library: import { Scene, Switch, Router, Reducer } from 'react-native-router-flux' — Oscar Franco, Aug 17 '16 at 13:40
Here's the example this is based on: https://github.com/aksonov/react-native-router-flux/blob/b11a84962e4e4d9265770382b8859d21d1a12ea0/Example/Example.js — justinmoon, Dec 30 '16 at 11:44
Thanks ! Here I only had to replace the action type to REACT_NATIVE_ROUTER_FLUX_FOCUS — Fabricio, May 27 '20 at 14:35

Farhan · Answer 2 · 2018-12-26T13:36:39.127

4

On react-native-router-flux v4 you can use Actions.currentScene

edited Dec 26 '18 at 13:36

answered Nov 11 '18 at 07:35

Farhan

1,445
16
24

1

For me, I had to use `Action.currentScene`. It wasn't a function – Jordan Daniels Dec 25 '18 at 08:47

score 1 · Answer 3 · answered May 16 '18 at 08:35

use Action.currentScene to compare with Route Name

in my case:

onBackPress(){
    if (Actions.currentScene == "Home") {
      Alert.alert(
          'Thoát ứng dụng',
          'Bạn có muốn thoát không?', [{
              text: 'Cancel',
              onPress: () => console.log('Cancel Pressed'),
              style: 'cancel'
          }, {
              text: 'OK',
              onPress: () => BackHandler.exitApp()
          }, ], {
              cancelable: false
          }
      )
      return true;
    }
  }

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

3 Answers3