be redirect after valide authentification form

hello there,

I’m trying to figure out how to redirect my user to a page after he has authenticated himself thanks to a simple form. FROM ScreenSignIn TO ScreenProfil.

can i have some help ?

this is my APP.JS :

import React, { Component } from 'react';
import { Image, Alert, Button, TextInput, View, StyleSheet, Text, Navigator, TouchableHighlight, ImageBackground} from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class ScreenSignIn extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      mail: '',
      pwd: '',
    };
  }
  onLogin() {
    const { mail, pwd } = this.state;

    if (!mail) {
      Alert.alert('No Email detected');
    } else if (!pwd) {
      Alert.alert('No password detected');
    } else if (mail && pwd) {
      var details = {'token' : '#################################', 'username': mail, 'password': pwd };
      var formBody = [];

      for (var property in details) {
        var encodedKey = encodeURIComponent(property);
        var encodedValue = encodeURIComponent(details[property]);
        formBody.push(encodedKey + "=" + encodedValue);
      }
      formBody = formBody.join("&");

      fetch('http://XX.XX.XX.XX:5151/login', { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}, body: formBody }).then(function(response) {
      if (response.status === 400 || response.status === 200 || response.status === 401) {
        return response.json()
      }
    }).then(function(object) {
      if (object.type === 'error') {
        console.log(object.type, object.message)
      } else {
        Alert.alert("login success")
        console.log('login success')
        ..... ???
      }
    })

    }
  }
  render() {
    return (
      <ImageBackground source={require('./assets/Sign.gif')} style={{ flex: 1 }}>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Image source={require('./assets/logo.png')}  style={{width: 100, height: 100}} ></Image>
          <Text style={styles.Text}>GeoTracker</Text>
          <TextInput value={this.state.mail} onChangeText={(mail) => this.setState({ mail })} placeholder={'Email'} style={styles.input} />
          <TextInput value={this.state.pwd} onChangeText={(pwd) => this.setState({ pwd })} placeholder={'Password'} secureTextEntry={true} style={styles.input} />
          <View style={{flexDirection: 'row'}}>
            <View style={{marginRight: 5}}>
              <Button title="Sign-up" color="grey" onPress={() => this.props.navigation.navigate('SignUp')} />
            </View>
            <View style={{marginLeft: 5}}>
              <Button title="Sign-in" color='green' onPress={this.onLogin.bind(this)} />
            </View>
          </View>
        </View>
      </ImageBackground>
    );
  }
}
class ScreenSignUp extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      mail01: '',
      mail02: '',
      pwd01: '',
      pwd02: ''
    };
  }
  subscription() {
    const { mail01, mail02, pwd01, pwd02 } = this.state;

    if (!mail01 || !mail02 || mail01 != mail02) {
      Alert.alert('Error : Email are empty or different !');
    } else if (!pwd01 || !pwd02 || pwd01 != pwd02) {
      Alert.alert('Error : Passwords are empty or different !');
    } else if (pwd01.length < 8) {
      Alert.alert('Error : Password too weak (must be more than 8 characters)');
    } else if (pwd01.length >= 1023) {
      Alert.alert('Error : Password too long (must be less than 1024 characters)');
    } else {
        var details = {'token' : '##################################', 'username': mail01, 'password': pwd01 };
        var formBody = [];

        for (var property in details) {
          var encodedKey = encodeURIComponent(property);
          var encodedValue = encodeURIComponent(details[property]);
          formBody.push(encodedKey + "=" + encodedValue);
        }
        formBody = formBody.join("&");

        fetch('http://XX.XXX.XX.XX:5151/signup', { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}, body: formBody }).then(function(response) {
        if (response.status === 400 || response.status === 200 || response.status === 401) {
          return response.json()
        }
      }).then(function(object) {
        if (object.type === 'error') {
          console.log(object.type, object.message)
        } else {
          Alert.alert("subscription success")
          console.log('subscription success')
        }
      })
    }
  }
  render() {
    return (
      <ImageBackground source={require('./assets/Sign.gif')} style={{ flex: 1 }}>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Image source={require('./assets/logo.png')}  style={{width: 100, height: 100}} ></Image>
          <Text style={styles.Text}>GeoTracker - Subscription</Text>
          <TextInput value={this.state.mail01} onChangeText={(mail01) => this.setState({ mail01 })} placeholder={'Email'} style={styles.input} />
          <TextInput value={this.state.mail02} onChangeText={(mail02) => this.setState({ mail02 })} placeholder={'Confirm Email'} style={styles.input} />
          <TextInput value={this.state.pwd01} onChangeText={(pwd01) => this.setState({ pwd01 })} placeholder={'Password'} secureTextEntry={true} style={styles.input} />
          <TextInput value={this.state.pwd02} onChangeText={(pwd02) => this.setState({ pwd02 })} placeholder={'Confirm Password'} secureTextEntry={true} style={styles.input} />
          <View style={{flexDirection: 'row'}}>
            <View style={{marginRight: 5}}>
              <Button title={'Sign-in'} color='grey' onPress={() => this.props.navigation.navigate('SignIn')} />
            </View>
            <View style={{marginLeft: 5}}>
              <Button title={'Subscribe'} color='green' onPress={this.subscription.bind(this)} />
            </View>
          </View>
        </View>
      </ImageBackground>
    );
  }
}
class ScreenProfil extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    SignIn: ScreenSignIn,
    SignUp: ScreenSignUp,
    Profil: ScreenProfil,
  },
  {
    headerMode: 'none',
    initialRouteName: 'SignIn',
  }
);
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  input: {
    textAlign: 'center',
    width: 200,
    height: 44,
    padding: 10,
    borderWidth: 1,
    borderColor: 'white',
    marginBottom: 10,
    borderRadius: 30,
  },
  Text: {
    color:'white',
    padding: 10,
  },
});