App.js new with api

PHOTO EMBED

Fri Apr 16 2021 11:43:26 GMT+0000 (Coordinated Universal Time)

Saved by @arsal #react.js #react-native.ja

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

import {NavigationContainer} from '@react-navigation/native'
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 Class_comp from './components/Class_comp';
import Func_comp from './components/Func_comp'
import { useState } from 'react';
// import FlatList from './components/FlatList'

// 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.Navigator>
       </NavigationContainer>
    )
}

const Appdata = (props) =>
{
 const [state, stateupt] = useState({cardnum:'', pass:''})
 const LoginPress2 = () => {
    // URL1 = 'https://scrapcollector12.000webhostapp.com/cardLogin.php'
    // Post = async (URL1, Data) => {
     
    //   return await axios.post(URL1, Data
    //     .then(function (response) {
    //       console.warn(response);
    //     }
    //     .catch(function (error) {
    //       console.warn(error);
    //     }))
    //     );       
    //   }
    var cardno = state.cardnum
    var password = state.pass
    if(cardno.length == 0 || password.length == 0)
    {
      alert("Required Fields Missing!")
    }else 
    {
      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(Dat)
      })
      .then((response)=> response.json())
      .then((response) => 
      {
        alert(response[0].Message)
      })
      .catch(error =>
        {
          alert("Error" + error)
        }
      )
      // axios.post('https://scrapcollector12.000webhostapp.com/cardLogin.php', {
          
      // })
      // .then(function (response) {
      //   console.warn(response);
      // })
      // .catch(function (error) {
      //   console.warn(error);
      // });
    }
  }
  console.warn(state)
  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 style={{}} title="Login" onPress={()=> {LoginPress2} /*(props.navigation.navigate('Home')*/}/> 
      </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="Go to next Screen" onPress={() => props.navigation.navigate('Detail')}/>
       <Func_comp Data={data} />
    </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 title="Btn from class" onPress={()=> alert("from class comp")}/>
            </View>
        )
    }
}

export default App;
content_copyCOPY