HOME Sataiva Page

SignUp page using React Native

Like login, Signup is also a primary function needed for Mobile Application.User authentication will perform only after the successful user creation in the database.

1. Creat a signup screen

To create a signup screen, i am using TextInput components to get values from user and a Button component to invoke signup functionality.


import React, { Component } from "react";
import { View, TextInput, Button } from "react-native";
class SignupScreen extends Component{
    state = {
        name:"",
        phone: "",
        password: "",
        message:""
    };

    createaccount=()=>{
    }

    render(){
        return <View>
                <TextInputplaceholder="Name" style={styles.input} onChangeText={e => this.setState({ name: e })}/>
                <TextInputplaceholder="Phone" style={styles.input} onChangeText={e => this.setState({ phone: e })}/>
                <TextInputplaceholder="Password" style={styles.input} onChangeText={e => this.setState({ password: e })}/>
                <Text style={styles.messagetext}>{this.state.message}</Text>
                <Button onPress={this.createaccount}>Signup</Button>
                </View>
    }
}
//Write your own css style here.
const styles = StyleSheet.create({....});
Smiley face

2. Define a createaccount function

This is nothing but getting values from input boxes and do some validations.After validation success hit the database to authenticate user login details.


createaccount = () => {
    const { phone, password, name, message } = this.state;
    const query= {
                    //Write your query 
    };
    const DB_ENDPOINT ="https://your-database-api-endpoint";
    const options = {
                      uri: DB_ENDPOINT,
                      headers: { 'Content-Type': 'application/json' },
                      method: 'POST',
                      body: JSON.stringify({ query })
    };

    fetch(DB_ENDPOINT, options).then(resp => {
      return resp.json()
    }).then(res => {
      //Returned result maybe different for you.
        if (res.data.result) {
          this.setState({ message: "Account registration success." });
        } else {
          this.setState({ message: "Invalid credentials" });
        }
      return res;
    }) .catch(() => {
      this.setState({ message: "Can't able to create user.Please try again." });
    });

3. Display result

Now we have to enter a name, phone number and password to create user account.The database result will be displayed as a message.

Previous
Next