Preview:
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) =>
{
  Data = [stateupt.cardnum, stateupt.pass]
  URL1 = 'https://scrapcollector12.000webhostapp.com/cardLogin.php'
  const LoginPress2 = () => {
    Post = async (URL1, Data) => {
      return await axios.post(URL1, Data
        .then(function (response) {
          console.warn(response);
        }
        .catch(function (error) {
          console.warn(error);
        }))
        );       
      }
  }
  const [state, stateupt] = useState({cardnum:'', pass:''})
  console.warn(state)
  return(
      <View >
        <LoginTextbox 
          placeholder='Enter card Number'
          keyboardType='numeric'
          placeholderTextColor='darkgrey'
          width='60%'
          value={state.cardnum}
          onChangeText={(e) => stateupt({cardnum:e})}
        />
         <LoginTextbox 
          placeholder='Enter Your Password'
          secureTextEntry={true}
          placeholderTextColor='darkgrey'
          width='60%'
          value={state.pass}
          onChangeText={(e) => stateupt({pass:e})}
        />
       <Button style={{}} title="Login" onPress={()=> 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;
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter