react native validation how can get value check how to pass value and set in Toast Android, how to used toast

Tutorial 0 Comments

react native validation how can get value check, how to pass value and set in Toast Android, how to used toast

validation registration in react native on submit input box empty form connect with php mysql code, how to used exit

this.setState() = used to input write that used update
this.state.emailError = used to display time that used get value

get value

const n1=this.state.userName;

console.log(n1);

how to used exit mean that code not run next used return;

  console.log(n1);
     // return; // used to exit not run code next
————————–

<TextInput placeholder=”Enter Phone” keyboardType={‘numeric’} style={{width:200,borderWidth:1,margin:10}} maxLength={12} onChangeText={userName=>this.setState({userName})} />

 

PHP mysql jason file download check

jassion file download on click

jason file in php

click and download validation with mysql php file download using nexted if else

validation registration on submit input box empty form connect with php mysql code all code used best

zip file download validation onsubmit empty php mysql

validation with mysql php

click and download validation on blure on submit connect with php mysql

 

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import * as  React from 'react';
import{
  View,
  TextInput,ToastAndroid,
  SafeAreaView,  
  StyleSheet,
  Text,
  Button
} from 'react-native';

interface State{
  userName: string;
  userEmail: string;
  userPassword: string;


}
interface Props{

}

export class App extends React.Component<Props, State>{
constructor(props) {
super(props);
 this.state ={
  userName:'',
  userEmail:'',
  userPassword:'',
 };

}

userRegister = () =>{
 // console.log('Login');
 const {userName}=this.state;
 const {userEmail}=this.state;
 const {userPassword}=this.state;   
 //console.log(userName);

 const n1=this.state.userName;
 console.log(n1);

 if (n1.length) {
  //your code here
 


 fetch('https://www.howcanfind.com/mobileapp/reg.php',{
   method:'post',
   headers:{
     'Accept':'application/json',
     'Content-type':'application/json'
   },
   body:JSON.stringify({
         name:userName,
         email:userEmail,
         password:userPassword,

   })
 })
 .then((response) => response.json())
    .then((responseJson)=>{
        ToastAndroid.show(responseJson,ToastAndroid.CENTER);
        this.setState({userName : ''})        

    })
    .catch((error)=>{
      console.error(error);
    });

  }// if
else {  
  console.log('enter number');

  } // if

  this.setState({userName : ''})
}// func




  render(){
    return(
      <SafeAreaView 
      style={styles.container}>
        <Text>Sign-up {this.state.userName} </Text>

        <TextInput
        placeholder="Enter Phone"  
        keyboardType={'numeric'}      
        style={{width:200,borderWidth:1,margin:10}}
        maxLength={12} value={this.state.userName}
        onChangeText={userName=>this.setState({userName})}
        />
        <TextInput
        placeholder="Enter Email"
        style={{width:200,borderWidth:1,margin:10}}
        onChangeText={userEmail=>this.setState({userEmail})}
        />
        <TextInput
        placeholder="Enter Password"
        style={{width:200,borderWidth:1,margin:10}}
        onChangeText={userPassword=>this.setState({userPassword})}
        />
        
        <Button title="Signup" onPress={this.userRegister} />
        

        
            
      </SafeAreaView>
    )
  }

}

const styles = StyleSheet.create({
  container:{
    flex:1,justifyContent:'center',alignItems:'center'
  },

  
});

 

how to pass value and set in Toast Android, how to used toast

 

//console.log(‘enter number’);  // show message in editor terminal

//console.error(‘enter number’); // show message on mobile screen

// console.warn(‘enter number’); // show message on mobile screen

//ToastAndroid.show(“enter number”,ToastAndroid.CENTER); // show message on mobile screen and best used

const n1=’enter no’; // how to variable pass in toast

ToastAndroid.show(n1,ToastAndroid.CENTER);

 

 

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import * as  React from 'react';
import{
  View,
  TextInput,ToastAndroid,
  SafeAreaView,  
  StyleSheet,
  Text,
  Button
} from 'react-native';

interface State{
  userName: string;
  userEmail: string;
  userPassword: string;


}
interface Props{

}

export class App extends React.Component<Props, State>{
constructor(props) {
super(props);
 this.state ={
  userName:'',
  userEmail:'',
  userPassword:'',
 };

}

userRegister = () =>{
 // console.log('Login');
 const {userName}=this.state;
 const {userEmail}=this.state;
 const {userPassword}=this.state;   
 //console.log(userName);

 const n1=this.state.userName;
 console.log(n1);

 if (n1.length) {
  //your code here
 


 fetch('https://www.howcanfind.com/mobileapp/reg.php',{
   method:'post',
   headers:{
     'Accept':'application/json',
     'Content-type':'application/json'
   },
   body:JSON.stringify({
         name:userName,
         email:userEmail,
         password:userPassword,

   })
 })
 .then((response) => response.json())
    .then((responseJson)=>{
        ToastAndroid.show(responseJson,ToastAndroid.CENTER);
        //this.response = responseJson;

    })
    .catch((error)=>{
      console.error(error);
    });

  }// if
else {  
  //console.log('enter number');
  //console.error('enter number');
  //ToastAndroid.show("enter number",ToastAndroid.CENTER);
  const n1='enter no';
  ToastAndroid.show(n1,ToastAndroid.CENTER);

  } // if

  //this.setState({userName : ''})
}// func




  render(){
    return(
      <SafeAreaView 
      style={styles.container}>
        <Text>Sign-up {this.state.userName} </Text>

        <TextInput
        placeholder="Enter Phone"  
        keyboardType={'numeric'}      
        style={{width:200,borderWidth:1,margin:10}}
        maxLength={12}
        onChangeText={userName=>this.setState({userName})}
        />
        <TextInput
        placeholder="Enter Email"
        style={{width:200,borderWidth:1,margin:10}}
        onChangeText={userEmail=>this.setState({userEmail})}
        />
        <TextInput
        placeholder="Enter Password"
        style={{width:200,borderWidth:1,margin:10}}
        onChangeText={userPassword=>this.setState({userPassword})}
        />
        
        <Button title="Signup" onPress={this.userRegister} />
        

        
            
      </SafeAreaView>
    )
  }

}

const styles = StyleSheet.create({
  container:{
    flex:1,justifyContent:'center',alignItems:'center'
  },

  
});

 

this is correct validation on blur and on submit

on blur = just check condition when click and go to next inputbox

on submit = on submit is proper validation check if else nexted if else so last if is correct

 

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import * as  React from 'react';
import{
  View,
  TextInput,ToastAndroid,
  SafeAreaView,  
  StyleSheet,
  Text,
  Button
} from 'react-native';

interface State{
  userName: string;
  nameError: string; // this is used to on blur only
  userEmail: string; // this is used to on blur only
  emailError: string;
  userPassword: string;


}
interface Props{

}

export class App extends React.Component<Props, State>{
constructor(props) {
super(props);
 this.state ={
  userName:'',
  nameError: '', // this is used to on blur only
  emailError:'', // this is used to on blur only
  userEmail:'',
  userPassword:'',
 };

}

userRegister = () =>{
 // console.log('Login');
 const {userName}=this.state;
 const {userEmail}=this.state;
 const {userPassword}=this.state;   
 //console.log(userName);
 const n1=this.state.userName;
 const e1=this.state.userEmail;
 const p1=this.state.userPassword;
 const num = /^[0-9]+$/;   // just insilize used enter number only
 const reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; // email check
 if( n1=="")
    {
      //console.log(n1); 
      console.log("enter phone");      
    }
    else if( num.test(n1) === false) // phone check top insilize
    {
      console.log("enter correct phone no"); 
     }
    else if( e1=="" )
    {
      console.log("enter email"); 
     }     
     else if( reg.test(e1) === false) // email check top insilize
    {
      console.log("enter correct email"); 
     }
    else if( p1==""  )
    { 
      console.log("enter password"); 
     }
    else
    {
      console.log(n1); 
 }
  //this.setState({userName : ''})
}// func

// start on blur validation used only phone
phonevalid()
{
  const namepho=this.state.userName;
  if(namepho=="")
  {
    //console.warn('enter email');
    this.setState({nameError:"Enter phone no"})
  }
  else {     
    //let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    const num = /^[0-9]+$/;
    if (num.test(namepho) === false) {
     // console.warn("phone is Not Correct");
      this.setState({nameError:"phone is not correct"})
    } else {
      //console.log("phone is Correct");  
      this.setState({nameError:""})  
    }
  }
}
// start on blur validation used

// start on blur validation used only email
emailvalid()
{
  const eml=this.state.userEmail;
  if(eml=="")
  {
    //console.warn('enter email');
    this.setState({emailError:"Enter email"})
  }
  else {     
    let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if (reg.test(eml) === false) {
     // console.warn("Email is Not Correct");
      this.setState({emailError:"email is not correct"})
    } else {
      //console.log("Email is Correct");  
      this.setState({emailError:""})  

    }

  }


}
// start on blur validation used only email

  render(){
    return(
      <SafeAreaView 
      style={styles.container}>
        <Text>Sign-up {this.state.userName} </Text>

        <TextInput
        placeholder="Enter Phone"  
        keyboardType={'numeric'}  
        onBlur={()=>this.phonevalid()}    
        style={{width:200,borderWidth:1,margin:10}}
        maxLength={12}
        onChangeText={userName=>this.setState({userName})}
        />
        <Text style={{color:'red'}}>{this.state.nameError}</Text>
        <TextInput
        placeholder="Enter Email"
        onBlur={()=>this.emailvalid()}
        style={{width:200,borderWidth:1,margin:10}}
        onChangeText={userEmail=>this.setState({userEmail})}
        />
        <Text style={{color:'red'}}>{this.state.emailError}</Text>
        <TextInput
        placeholder="Enter Password"
        style={{width:200,borderWidth:1,margin:10}}
        onChangeText={userPassword=>this.setState({userPassword})}
        />
        
        <Button title="Signup" onPress={this.userRegister} />
        

        
            
      </SafeAreaView>
    )
  }

}

const styles = StyleSheet.create({
  container:{
    flex:1,justifyContent:'center',alignItems:'center'
  },

  
});