Post working example of Switch?

[rlau1115]

I've tried implementing this example based on the docs:

<Scene key="root" component={connect(state=>({profile:state.profile}))(Switch)} tabs={true}
               selector={props=>props.profile.sessionID ? "main" : "signUp"}>
            <Scene key="signUp" component={SignUp}/>
            <Scene key="main" component={Main}>
        </Scene>

but I get a red screen with the error:

console.error: selector should be defined

Any advice?

Any advice?

[aksonov]

I can't reproduce it. I've just replaced TabBar within Demo to Switch:

            <Scene key="tabbar" component={Switch} tabs={true} default="tab2" selector={props=>props.default}>

And it works well - it selects 'default' tab.

[matt-d-rat]

@aksonov I am also getting the console.error: "selector should be defined" error:

scenes.js

import React from 'react';
import { Actions, Scene, Switch } from 'react-native-router-flux';
import { connect } from 'react-redux';

import Login from './containers/Login';
import Home from './containers/Home';

export default scenes = Actions.create(
    <Scene key="root"
           component={connect( state => ({user:state.user}) )(Switch)}
           tabs={true}
           selector={props => props.user.accessToken ? 'home' : 'login'}>
        <Scene key="login" component={Login} title="Login"></Scene>
        <Scene key="home" component={Home} title="Replace"></Scene>
    </Scene>
);

main.js

import React, { Component } from 'react-native';
import { Router } from 'react-native-router-flux';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import scenes from './scenes';

const store = configureStore({});

export default class Main extends Component {
    render() {
        return (
            <Provider store={store}>
                <Router scenes={scenes} />
            </Provider>
        );
    }
}

My project has the following dependencies at these versions:

{
    "react-native": "0.22.0-rc",
    "react-native-flip-view": "1.0.4",
    "react-native-google-signin": "0.4.3",
    "react-native-router-flux": "3.0.15",
    "react-native-vector-icons": "1.3.2",
    "redux": "3.3.1",
    "react-redux": "4.4.1",
    "redux-logger": "2.6.1",
    "redux-thunk": "2.0.1"
  }

[falconx]

I too has this issue but resolved it by updating my react-native-router-flux dependency from 3.0.9 to ^3.2.3.

[Fatxx]

@matt-d-rat can you please share how did you manage to check for token before render the app?

When I try to dispatch an action which alter state, I'm get in an error ExceptionsManager.js:76 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component. in NavigationExperimental/NavigationCard.js from React Native.

I can't manage to get component={connect(state => ({token: state.auth.token}))(Switch)} selector={props => props.token ? 'jam' : 'login'}> this state update before it render, so it will always render the login page.

Anyone facing this issue?

[shakdoesgithub]

@matt-d-rat how are you passing your redux state to the components?

[Fatxx]

Couldn't get this working with Switch, I had to create condition which shows the scenes or a loading indicator view depending in the state of the authentication request.

\\ index.js
import Root from './root';
import { isAuthenticated } from './auth/auth.actions';

class Tagjam extends Component {
  render() {
      return (
        <Root store={store}/>
      );
  }
}

store.dispatch(isAuthenticated()); // Dispatch action when application bootstraps which checks for token

Then I render the actual application when above function ends.

class Root extends Component {
  constructor(props) {
    super(props);
  }

  render() {
      let container = null;
      if (!this.props.isRequesting) {
          container = <Scenes/>;
      }
      return (
        <Provider store={this.props.store}>
          <View style={styles.main}>
            {container}
          </View>
        </Provider>
      );
  }
}

const mapStateToProps = (state) => {
    return {
      isRequesting: state.auth.isRequesting
    };
};

If I use switch there it will just throw the error which I pointed out in the comment above, somehow NavigationCard is setting state but isn't rendered yet. Instead I check for email prop and set the boolean value for initial property.

<Scene key='login' initial={!this.props.email} component={Login} title='Login'/>
<Scene key='register' component={Register} title='Register'/>
<Scene key='jam' initial={!!this.props.email} component={Jam}/>

[matt-d-rat]

@Fatxx I ended up abandoning using this library and going back to react-native-router-redux as I could get that to work with relatively little effort.

@shakdoesgithub the same way in any redux project, via connect with a function which maps the state to props. But I don't use this router anymore as I couldn't get it to work. Opted to go back to react-native-router-redux as it is more redux centric.