New App.js -- 27-Apr-2021
Tue Apr 27 2021 11:43:12 GMT+0000 (Coordinated Universal Time)
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;
Comments