CODEWITHSUNDEEP
react-nativereact-navigation
John Doah
John Doah

Reputation: 1999

React Navigation - Animating, Replacing screens and Tabs

I'm using React-Navigation inside my application and I couldn't find a way to do a couple of things. First, I want to change the transition animation, but I couldn't find anyway to do so, would glad if you guys could help me.

Second, I have a login screen, When logging in, the user is moved to the Homescreen, in the Homescreen I get a back button on it so I can go to login again (which I don't want) I tried using this code:

handlePress(navigate){
    firebaseRef.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then(function(firebaseUser){
      //Success, move to homepage.
      navigate.replace("Home");
    }).catch(function(error){
      //Failed to log in, print error.
    }); 
}

but it won't work, nothing happens (it won't navigate to the home), only if I use navigate("Home"); it navigates to home.

this is navigate (inside render): 

const { navigate } = this.props.navigation;

Third, I have few screens (Login, Register, Home and Friends),This is my StackNavigator:

const Stylelist = StackNavigator({
  Login:{
     screen: LoginScreen,
     navigationOptions: ({navigation}) =>({
       header: null,
     }),
  },
  Register:{
      screen: RegisterScreen,
      navigationOptions: ({navigation}) =>({
        header: null,
      }),
  },
  Home:{
     screen: HomeScreen,
     navigationOptions: ({navigation}) =>({
       header: "float",
       title: "Home",
     }),
  },
});

I want the Home screen to be part of a TabNavigator as well (with Friends screen.) I searched the web but couldn't find how to do this. Can you guys help me out? giving me information sources/examples. Thanks in advance!

Upvotes: 2

Views: 4565

Answers (2)

Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18803

import {StackActions} from 'react-navigation';
import {NavigationActions} from 'react-navigation';

const resetAction = StackActions.reset({
    index: 1,
    actions: [
        // add other screen if you want
        NavigationActions.navigate({routeName: 'screen2'}),
        NavigationActions.navigate({routeName: 'newScreen'}),
    ],
});

Upvotes: 1

Caleb Tolu
Caleb Tolu

Reputation: 473

This should remove the back button see doc 

import { NavigationActions } from 'react-navigation';


     handlePress(){
        firebaseRef.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then(function(firebaseUser){
          //Success, move to homepage.
          const resetAction = NavigationActions.reset({
          index: 0,
          actions: [
            NavigationActions.navigate({ routeName: 'Home'})
          ]
        })
        this.props.navigation.dispatch.(resetAction);
        }).catch(function(error){
          //Failed to log in, print error.
        }); 
       }

Upvotes: 4

Related Questions