some tips & tricks on using react-native-router-flux...

disable `swiping back` function on using react-native-router-flux

// use `panHandlers={null}` on `Scene` Components

return (
      <Router>
        <Scene key="root" hideNavBar={true}>
            <Scene key="login" component={Login} title="Login" panHandlers={null}/>
            <Scene key="frontPage" component={FrontPage} title="FrontPage" initial={true}/>
            <Scene key="mainPage" component={MainPage} panHandlers={null}/>
        </Scene>
      </Router>  
    );

Hide Navigation Bar in react-native-router-flux

// use `hideNavBar={true}` on `Scene`(key=``root``) Component

return (
      <Router>
        <Scene key="root" hideNavBar={true}>
            <Scene key="login" component={Login} title="Login"/>
            <Scene key="frontPage" component={FrontPage} title="FrontPage" initial={true}/>
            <Scene key="mainPage" component={MainPage}/>
        </Scene>
      </Router>
    );

How to use `Actions` when using RESTful APIs

// Use `{}` on `Actions.key()`; example below...

async onLoginPressed(){
    this.setState({showProgress: true});
    try{
      let response = await fetch(url, {
          method: 'POST',
          headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
          },
          body: JSON.stringify({
              email: this.state.emailAdd,
              password: this.state.passwd
          })
      });

      let res = await response.text();

      if(response.status >= 200 && response.status < 300){
          let accessToken = res;
          console.log(accessToken);
          this.storeToken(accessToken);
          {Actions.mainPage()} // <---- Notice this part?!...
      }else{
          let error = res; throw error;
      }

    }catch(error) {
      console.log("error " + error);
      
      let formError = JSON.parse(error);
      let errorsArray = [];
      for(let key in formError){
        if(formError[key].length > 1){
            formError[key].map(error => errorsArray.push(` ${error}`));
        }else{
            errorsArray.push(` ${formError[key]}`);
        }
      }
      this.setState({
        errors: errorsArray,
        showProgress: false,
      });
    }
  }

use `type="replace" ` instead of pop()

/* first, define `type="replace" ` on every `Scene` Components.. */

//app.js
  return (
    <Router>
      <Scene key="root" hideNavBar={true}>
          <Scene key="login" component={Login} title="Login" panHandlers={null} type="replace"/>
          <Scene key="frontPage" component={FrontPage} title="FrontPage" initial={true} type="replace"/>
          <Scene key="mainPage" component={MainPage} panHandlers={null} type="replace"/>
      </Scene>
    </Router>
  );
    
/* then, instead of using `Actions.pop()` for navigating back to previous page, just call that page by typing `Actions.[previous_page_key]` */ 

//login.js
    return(
        <View style={[styles.flexBox, styles.adjustCenter]}>
            <TouchableOpacity onPress={Actions.frontPage}>
                <Text style={{fontSize: 40}}>Login Page</Text>
            </TouchableOpacity>

        </View>
    );
    
/* its safer to popout from current page by using `type="replace" ` because its going to conflict on state management(i.e. `Redux`). 
Actions.pop() won't function properly. By using `type="replace" `, pages won't store on stack method(such as `push-pop`); its only replace the current stack to new stack*/

using `Actions.pop()` for better gesture

/* use `Arrow Function` when declaring Actions.pop() on onPress 
Plus, if you want your app to navigate from top to bottom; just type `direction="vertical"` */

//app.js
  return (
    <Router>
      <Scene key="root" hideNavBar={true}>
          <Scene key="frontPage" component={FrontPage} title="FrontPage" initial={true} direction="vertical" />
          <Scene key="login" component={Login} title="Login" panHandlers={null} direction="vertical" />
          <Scene key="mainPage" component={MainPage} panHandlers={null} direction="vertical" />
      </Scene>
    </Router>
  );
  
//frontPage.js
  return(
    <View style={[styles.flexBox, styles.adjustCenter, styles.backDrop]}>

        <TouchableOpacity onPress={Actions.login} style={[styles.adjustCenter, styles.button]}>
            <Text>Sign In</Text>
        </TouchableOpacity>

        <Text>{"\n"}</Text>

        <TouchableOpacity  onPress={Actions.mainPage} style={[styles.adjustCenter, styles.button]}>
            <Text>Sign Up</Text>
        </TouchableOpacity>
    </View>
  );
  
//login.js
  return(
    <View style={[styles.flexBox, styles.adjustCenter]}>
        <TouchableOpacity onPress={() => Actions.pop()}>
            <Text style={{fontSize: 40}}>Login Page</Text>
        </TouchableOpacity>        
    </View>
  );
  
//mainPage.js
  render(){
    return(
        <View style={[styles.flexBox, styles.adjustCenter]}>
            <Text>Hello World</Text>
            <TouchableOpacity onPress={() => Actions.pop()}>
                <Text style={{fontSize: 40}}>Go Back</Text>
            </TouchableOpacity>
        </View>
    );
  }