New App.js -- 27-Apr-2021

PHOTO EMBED

Tue Apr 27 2021 11:43:12 GMT+0000 (Coordinated Universal Time)

Saved by @arsal #react.js

import React from 'react';
import {
  Button,
  DrawerLayoutAndroid,
  Text,
  TextInput,
  TouchableOpacity,
  View,
  StyleSheet
} from 'react-native';

import {NavigationContainer} from '@react-navigation/native'
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import {createStackNavigator} from '@react-navigation/stack'
import axios from 'axios'
import {createDrawerNavigator} from '@react-navigation/drawer'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import LoginTextbox from './components/Textbox'
import Signup from './components/Signup'
import FlatList3 from './components/FlatList'
import FlatList_Api from './components/FlatList_Api'
import Class_comp from './components/Class_comp';
import Func_comp from './components/Func_comp'
import { useState } from 'react';
import { color } from 'react-native-reanimated';
import FormValidation from './components/FormValidation';

// const drawer = createDrawerNavigator()
const stack = createStackNavigator()
// const tab = createBottomTabNavigator()

 
function App(){  
    return(
       <NavigationContainer>
         <stack.Navigator>
           <stack.Screen name="Login" component={Appdata}/>
           <stack.Screen name="Home" component={home}/>
           <stack.Screen name="Signup" component={Signup}/>
           <stack.Screen name="FlatList3" component={FlatList3}/>
           <stack.Screen name="FlatList_Api" component={FlatList_Api}/>
           <stack.Screen name="FormValidate" component={FormValidation}/>
         </stack.Navigator>
       </NavigationContainer>
    )
}

const Appdata = (props, route) =>
{
 const [state, stateupt] = useState({cardnum:'', pass:''})
 const LoginPress2 = () => {

    var cardno = state.cardnum
    var password = state.pass
    if(cardno.length == 0 || password.length == 0)
    {
      alert("Required Fields Missing!")
    }else 
    {

    //   Login with axios

    //   var Data =
    //   {
    //     'cardno': cardno,
    //     'password': password
    //   }
    //   console.warn(JSON.stringify(Data))
    //  let URL1 = 'https://scrapcollector12.000webhostapp.com/cardLogin.php'
    //  axios.post(URL1, JSON.stringify(Data))
    // .then(function (response) {
    //  alert(response)
    // })
    // .catch(function (error) {
    //   console.warn(error);
    // });

    //   Login With PHP API

    //   let URL = 'https://scrapcollector12.000webhostapp.com/cardLogin.php'
    //   var headers = {
    //       'Accept' : 'application/json',
    //       'Content-Type': 'application.json' 
    //   }
    //   var Data =
    //   {
    //     cardno: cardno,
    //     password: password
    //   }
    //   fetch(URL, {
    //     method: 'POST',
    //     headers: headers,
    //     body: JSON.stringify(Data)
    //   })
    //   .then((response)=> response.json())
    //   .then((response) => 
    //   {
    //     alert(response[0].Message)
    //     if (response[0].Message =='success') {
          
    //        props.navigation.navigate('Home')
    //     }else{
             
    //     }
    // })
    //   .catch(error =>
    //     {
    //       alert("Error" + error)
    //     }
    //   )

    //   REST API

      let URL = 'http://www.smartpaygs.com:87/Api/Users/Authentication'
      var headers = {
          'Accept': 'application/json',
          'Content-Type': 'application.json' 
      }
      let Data =
      {
        'Username': cardno,
        'Password': password
      }
      fetch(URL, {
        method: 'POST',
        headers: headers,
        body: JSON.stringify(Data)
      })
      .then((response)=> response.json())
      .then((response) => 
      {
        alert(response.EmbossLine)
        // if (response[0].Message =='success') {
          
        //    props.navigation.navigate('Home')
        // }else{
             
        // }
    })
      .catch(error =>
        {
          alert("Error" + error)
        }
      )


    // var Data =
    //   {
    //     cardno: cardno,
    //     password: password
    //   }
    //   // let data = { Users: { cardno: cardno, Password: password } }
    //   //   console.log(JSON.stringify(data))
    //   axios.post('http://www.smartpaygs.com:87/Api/Users/Authentication',Data)
    //   .then(function (response) {
    //     console.warn(response);
    //   })
    //   .catch(function (error) {
    //     console.warn(error);
    //   });
    }
  }

  return(
      <View>
        <LoginTextbox 
          placeholder='Enter card Number'
          keyboardType='numeric'
          placeholderTextColor='darkgrey'
          width='60%'
          value={state.cardnum}
          onChangeText={(e) => stateupt({...state, cardnum:e})}
        />
         <LoginTextbox 
          placeholder='Enter Your Password'
          secureTextEntry={true}
          placeholderTextColor='darkgrey'
          width='60%'
          value={state.pass}
          onChangeText={(e) => stateupt({...state,pass:e})}
        />
        <Text>{state.cardnum}</Text>
        <Text>{state.pass}</Text>
       {/* <Button title="Login" onPress={()=> {LoginPress2()} /*(props.navigation.navigate('Home')}/> */}
       <TouchableOpacity style={styles.btn} activeOpacity={0.8} onPress={()=>{LoginPress2()}}>
           <Text style={styles.btnText}>Login</Text>
       </TouchableOpacity> 
       <Text onPress={() => {props.navigation.push('Signup',state.cardnum)}} style={{marginTop:30, marginLeft: 30}}>Sign Up</Text>
       {/* const regular_icon_btn = <FontAwesome5.Button name={'comments'} />; */}
      </View>
  )
}
const home = (props) => {
  const data = "some data!!!"

  return (
    <View>
       <Text style={{fontSize:30}}>Functional Component!!!</Text>
       <TextInput placeholder={"Enter Your Name"} onChangeText={(e)=>{console.warn(e)} }/>
       <Button title="Logout" onPress={() => props.navigation.navigate('Login')}/>
       <Func_comp Data={data} />

       <TouchableOpacity style={styles.btn} activeOpacity={0.8} onPress={()=>{props.navigation.navigate('FlatList3')}}>
           <Text style={styles.btnText}>Flat List</Text>
       </TouchableOpacity> 
      
       <TouchableOpacity style={styles.btnAPi} activeOpacity={0.8} onPress={()=>{
         props.navigation.navigate('FlatList_Api')}}>
           <Text style={styles.btnText}>Flat List with Api</Text>
       </TouchableOpacity>

       <TouchableOpacity 
       style={styles.btnFormValid} activeOpacity={0.8}
        onPress={()=>{
         props.navigation.navigate('FormValidate')}}
         >
           <Text style={styles.btnText}>Form Validation</Text>
       </TouchableOpacity>
    </View>
  )
}

function Detailscr()
{
    return(
      <View>
        <Text style={{fontSize:50}}>Details screen</Text>
      </View>
    )
}
class Class_comp1 extends React.Component
{
    render()
    {
        return(
            <View>
                <Text style={{fontSize:60,}}>From Class_comp</Text>
                <Button width='40' title="Btn from class" onPress={()=> alert("from class comp")}/>
            </View>
        )
    }
}

const styles = StyleSheet.create
({
  btnFormValid:
  {
    marginTop: 10,
    backgroundColor: "purple",
    height: 50,
    width: 130,
    justifyContent:'center',
    alignItems:'center',
    alignSelf:'center'
  },
    btnAPi:
    {
      marginTop: 10,
      backgroundColor: "red",
      height: 50,
      width: 70,
      justifyContent:'center',
      alignItems:'center',
      alignSelf:'center'
    },
    btn:{
        marginTop: 10,
        backgroundColor: "maroon",
        height: 50,
        width: 70,
        justifyContent:'center',
        alignItems:'center',
        alignSelf:'center'
    },
    btnText:{
        color: 'white',
        fontSize: 15
    }
})
export default App;
content_copyCOPY