BÀI 17 - TEXT INPUT TRONG REACT NATIVE
Video bài học
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;