React native create routing using react-navigation in 5 minute

React React native navigation react-navigation routing

By Code solution
Jan 20th, 2021
0 comments
1

Navigation is hard. Especially in mobile.In this tutorial we will implementing React-Navigation.

React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution written entirely in JavaScript (so you can read and understand all of the source), on top of powerful native primitives.

Install the react-navigation package in your React Native project.

npm install --save react-Navigation

Creating New Project run this command

 react-native init <Project-name>

After then create a project add node package

npm install --save native-base react-native-elements react-native-gesture-handler react-navigation

After then install node package then run this command

react-native link

After then Open index.js under Project folder and add this code.

/**
 * @format
 */
import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

After then src folder under ther project folder like "project-name/src/" and cut the App.js of the root folder and paste src folder
After that add this code in App.js

import React, {Component} from 'react';
import { Root } from "native-base";
import Routes from "./routes/route/";

export default class App extends React.Component{
  render() {
    return (
      <Root>
        <Routes />
      </Root>
    );
  }
}

.After then create routes folder under ther src folder and create a file route.js then add this code

import React from "react";
import {createStackNavigator, createAppContainer} from 'react-navigation';
import Login from "../Components/login/login"
import Signup from "../Components/signup/signup"

const MainNavigator = createStackNavigator({
  Login: {screen: Login},
  Signup: {screen: Signup}, 
},
{
  initialRouteName: "Login",
  headerMode: "none",
  swipeEnabled: false
});
const MainRoute = createAppContainer(MainNavigator);
export default MainRoute;

After then create Components folder under ther src folder and create a login and singup folder and file then add code

login.js

import React, {Component} from 'react';
import { View, StyleSheet } from 'react-native';
import { Container, Header, Body, Right, Title, Text, Content, Form, Item, Input, Label, Button } from 'native-base';

const styles = StyleSheet.create({
  margincss: {
    margin:20
  }
});
export default class Login extends React.Component {
    gotosingup = () => {
         this.props.navigation.navigate('Signup');
    }
    render() {
        return (
          <Container>
              <Header>
                <Body>
                  <Title>Login</Title>
                </Body>
                <Right>
                  <Button onPress={this.gotosingup} transparent>
                    <Text>Singup</Text>
                  </Button>
                </Right>
              </Header>
              <Content>
                <Form>
                  <Item floatingLabel>
                    <Label>Email</Label>
                    <Input  />
                  </Item>
                  <Item floatingLabel last>
                    <Label>Password</Label>
                    <Input />
                  </Item>
                </Form>
                <Button style={[styles.margincss]} block>
                  <Text>Login</Text>
                </Button>
              </Content>
        </Container>
        );
      }
}

signup.js

import React, {Component} from 'react';
import { View, StyleSheet } from 'react-native';
import { Container, Header, Body, Right, Title, Text, Content, Form, Item, Input, Label, Button } from 'native-base';

const styles = StyleSheet.create({
  margincss: {
    margin:20
  }
});
export default class Signup extends React.Component {
  gotoLogin = () => {
      this.props.navigation.navigate('Login');
  }
    render() {
        return (
          <Container>
              <Header>
                <Body>
                  <Title>Singup</Title>
                </Body>
                <Right>
                  <Button onPress={this.gotoLogin} transparent>
                    <Text>Login</Text>
                  </Button>
                </Right>
              </Header>
              <Content>
                <Form>
                  <Item floatingLabel>
                    <Label>Name</Label>
                    <Input  />
                  </Item>
                  <Item floatingLabel>
                    <Label>Email</Label>
                    <Input  />
                  </Item>
                  <Item floatingLabel last>
                    <Label>Password</Label>
                    <Input />
                  </Item>
                </Form>
                <Button style={[styles.margincss]} block>
                  <Text>Submit</Text>
                </Button>
              </Content>
        </Container>
        );
      }
}

Routing are done after that you can run this project.

Run command

react-native run-android
react-native run-ios

if you are change the App name then you delete android and ios folder of you project. After then run this command

 react-native eject

this command help to create android and ios folder with clean status

Thank you

github link
https://github.com/Sudarshan101/ReactnativeRouting

youtube :
https://www.youtube.com/watch?v=hmASiYiFIas

About the author

Code solution

info@codesolution.co.in

Discussion

0 comments

Add comment To Login

Add comment