React Navigation Preventing Going back to loading screen, reset not working

Question

I have a React Native application which I have implemented. Currently the app opens up on a loading screen which after mounting checks the firebase.auth().onAuthStateChang

Answer 1

it is my solution :)
I have StageArea page. it is bridge between from login to timeline . User is not login then go to LoginPage. User is login then go to Timeline. User press back button then again go to TimeLine page not go to login page .( Sory for my english)

import React, { Component } from 'react';
import { View  } from 'react-native';
import LoginForm from './LoginForm';
import Timeline from './Timeline';
import firebase from 'firebase';
import InitialPage from './InitialPage'
class StageArea extends  Component {


    state = {isLoggin:''};

    componentWillMount(){
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                    this.setState({ isLoggin:true})
            }else {
                this.setState({ isLoggin:false})

            }
        })

    }

    render() {
        if(this.state.isLoggin)
        {
            return(<Timeline/>);

        }
        else if (this.state.isLoggin===false) {
            return(<LoginForm/>);
        }

    }
}

export default StageArea;

Answer 2

Write the code below ,

   static navigationOptions = {
       header:null
     };

Just before

render() {
     return (

on the NotesScreen,There will not be any back button.

Answer 3

use a switch navigator until the user logs in(loading and login page ) successsfully after that use a stack navigator(user homepage and otherpages which follow).

switchNavigator(loading, login, stackNavigator)

stackNavigator(user homepage,....)

Answer 4

Try a custom navigation component with custom back button support. Dont forget to add the reducer to yoru combine reducers function.

Create a navigation component:

import React, { Component } from 'react';
import { BackHandler } from 'react-native';
import { connect } from 'react-redux';
import { addNavigationHelpers } from 'react-navigation';
import MainNavigator from './MainNavigator';

class AppWithNavigationState extends Component {
  componentDidMount () {
    BackHandler.addEventListener('hardwareBackPress', () => {
      this.props.dispatch({
        type: 'Navigation/BACK'
      });

      return true;
    });
  }

  componentWillUnmount () {
    BackHandler.removeEventListener('hardwareBackPress');
  }

  render () {
    return (
      <MainNavigator navigation={addNavigationHelpers({
        dispatch: this.props.dispatch,
        state: this.props.nav
      })}/>
    );
  }
}

export default connect((state) => ({ nav: state.nav }))(AppWithNavigationState);

Create a navigation reducer:

import { NavigationActions } from 'react-navigation';
import MainNavigator from './MainNavigator';
import { NAVIGATION_ON_SIGN_IN } from '../redux/actions/ActionTypes';
import { BackHandler } from 'react-native';

const initialState = MainNavigator.router.getStateForAction(MainNavigator.router.getActionForPathAndParams('loading'));

function appShouldClose (nextState) {
  const { index, routes } = nextState;

  return index === 0 || routes[1].routeName === 'auth';
}

export default (state = initialState, action) => {
  const { router } = MainNavigator;
  let nextState;

  switch (action.type) {
    case NavigationActions.BACK:
      nextState = router.getStateForAction(action, state);
      appShouldClose(nextState) && BackHandler.exitApp();
      break;

    default:
      nextState = router.getStateForAction(action, state);
  }

  return nextState || state;
};