import React, {useState} from 'react';

import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';

import {TextInput} from 'react-native-paper';

import {NavigationContainer} from '@react-navigation/native';

import {CreateNativesStackNavigator} from '@react-navigation/native-stack';

import Constants from 'expo-constants';

export default function App() {

  const [username, setUsername]=useState("")

  const [passcode, setPasscode]=useState("")

  return (

    <View style={styles.container}>

      <TextInput label="User Name"

      left= {<TextInput.Icon name="account"/>}

      mode="outlined"

      style={{margin: 10}}

      default={username}

      onChangeText={(str) => setUsername(str)}

      >

      </TextInput>

       <TextInput label="Passcode"

 left={<TextInput.Icon name="eye" />}

 mode="outlined"

 style={{margin:10}}

 default={passcode}

 onChangeText={(str) => setPasscode(str)} >

 </TextInput>

 <TouchableOpacity  style={{left:2, borderRadius: 10, borderWidth:15, borderColor: "green", height:10, width:20 }} >

 <Text>LOGIN</Text>

 </TouchableOpacity>

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    padding: 8,

  },

});