React Native Navigating Between Two Screens

Question

In React Native, I need to navigate from a screen to another screen. But I didn't understand the concept for that.So, I have done as following,

In App.js

import React, {Component} from 'react';
import LinearGradient from 'react-native-linear-gradient';
import {StyleSheet, Text, Alert, View} from 'react-native';
import { Container, Header, Content, Button} from 'native-base';
import { createStackNavigator, createAppContainer } from 'react-navigation';


type Props = {};
export default class App extends Component<Props> {
ShowAlertDialog = () =>{

Alert.alert(

  // This is Alert Dialog Title
  'Lopels',

  // This is Alert Dialog Message. 
  'Welcome to Lopels',
  [
    // First Text Button in Alert Dialog.
    {text: 'Ask me later', onPress: () => console.log('Ask me later Button Clicked')},

    // Second Cancel Button in Alert Dialog.
    {text: 'Cancel', onPress: () => console.log('Cancel Button Pressed'), style: 'cancel'},

    // Third OK Button in Alert Dialog
    {text: 'OK', onPress: () => console.log('OK ButtonPressed')},

  ]

)

}
render() {
return (
  <Container>
  <LinearGradient colors={['#007991', '#78ffd6']} style={styles.linearGradient}>
    <Text style={styles.logoText}>
      Lopels
    </Text>
    <Text style={styles.tagText}>
      The Complete Loyalty Platform
    </Text>
    <Button style={styles.button} onPress={this.ShowAlertDialog}>
        <Text style={styles.buttonText}>Get Started</Text>
    </Button>
  </LinearGradient>
  </Container>
);
}
}

const styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 5,
paddingRight: 5,
},

  logoText: {
    fontSize: 50,
    fontFamily: 'Graceland',
    textAlign: 'center',
    marginTop: 170,
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
  tagText:{
    fontSize:15,
    letterSpacing: 3,
    fontFamily:'Actor',
    textAlign: 'center',
    color: 'black',
    backgroundColor: 'transparent',
  },
  button:{
    marginLeft: '15%',
    marginTop: '8%',
    width:250,
    borderRadius: 10,
    backgroundColor:'#ffffff',
    borderColor: "transparent",
  },
  buttonText:{
    marginTop: '8%',
    marginLeft: '35%',
    fontFamily: 'Actor',
    color: '#282828',
    fontSize: 18,
  }
});

And the folder other screen is in folder ./src/Login Screen/index.js

I need to navigate to Login Screen after clicking Get Started button from App.js

Answer 1

The entry of the application is App.js which is imported into index.ios.js

index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry
} from 'react-native';

import App from './component/stackScreens/App';

AppRegistry.registerComponent('reactNav', () => App);

In the App.js, the StackNavigator is imported. App.js is a stack that has all components needed for your navigation.

App.js

import React from 'react';

import { StackNavigator } from 'react-navigation';
import ScreenOne from './ScreenOne';
import ScreenTwo from './ScreenTwo';
import ScreenThree from './ScreenThree';

const App = StackNavigator({
    ScreenOne: { screen: ScreenOne},
    ScreenTwo: { screen: ScreenTwo},
    ScreenThree: {screen: ScreenThree}
})

export default App;

ScreenOne.js

class ScreenOne extends Component {
  render() {
    const { navigate } = this.props.navigation
    return (
      <View style={styles.container}>
        <TouchableHighlight
          onPress={() => navigate("ScreenTwo")}
          style={styles.button}>
          <Text
            style={styles.buttonText}>Screen One </Text>
        </TouchableHighlight>
      </View>
    );
  }
};

const { navigate } = this.props.navigation: specifies the screen to navigate.