First of all, We are newbies we react-native and NativeBase it is a good API, we love it.
We are using Nativebase KitchenSink example because, we think, it fits our needs for a demo app we want to develop. We are trying to have a login screen but we have problems with logout steps.
In js/cardRedurcers.js
const initialState = {
key: 'global',
index: 0,
routes: [
{
key: 'login',
index: 0,
},
],
};
In AppNavigator
_renderScene(props) { // eslint-disable-line class-methods-use-this
switch (props.scene.route.key) {
case 'login':
return ;
case 'logout':
return ;
...
in login/index.js
const {
replaceAt,
} = actions;
class Login extends Component {
static propTypes = {
setUserProfile: React.PropTypes.func,
replaceAt: React.PropTypes.func,
navigation: React.PropTypes.shape({
key: React.PropTypes.string,
}),
}
.....
function bindActions(dispatch) {
return {
replaceAt: (routeKey, route, key) => dispatch(replaceAt(routeKey, route, key)),
........
when a valid user is given :
this.replaceRoute('home');
replaceRoute(route) {
this.props.replaceAt('login', { key: route }, this.props.navigation.key);
}
the action when we made logout is:
this.navigateTo('logout') //navigateTo is the funcion inside sideBarNav.js
And "works", we logout, and go to login screen, but when we log in again, it give an exception
on the source
this.props.replaceAt('login', { key: route }, this.props.navigation.key);
exception:
Invariant Violation: invalid index -1 for replacing route home
We suspect than the fail occur because we are not using the proper way for change screen from login to home. And when we logout something get wrong.
So, We would appreciate some light about how we can approach the problem.