import * as React from 'react';

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

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

function App() {

const [text_account, setText_account] = React.useState("");

const [text_pass, setText_pass] = React.useState("");

const [show_pass, setShow_pass] = React.useState(true);

return (

<ImageBackground style={styles.imageBackground} source={require('../Lenovo-WorkSpace/assets/image/background_main_activity.jpg')}>

<View style={styles.inputAccountInformation}>

<TextInput

label={"Account"}

placeholder="YourEmail@example.com"

mode={'outlined'}

value={text_account}

onChangeText={text_account => setText_account(text_account)}

/>

<TextInput

label={"Password"}

secureTextEntry={show_pass}

mode={'outlined'}

right={<TextInput.Icon name={show_pass ? 'eye' : 'eye-off'} onPress={() => {setShow_pass(!show_pass)}}/>}

keyboardType='url'

value={text_pass}

onChangeText={text_pass => setText_pass(text_pass)}

/>

</View>

</ImageBackground>

);

}

const styles = StyleSheet.create({

imageBackground: {

width: '100%',

height: '100%',

alignItems: 'center'

},

inputAccountInformation: {

width: '90%',

marginTop: 10

}

});

export default App;