import React, { useState } from 'react';
import { TextInput, View, StyleSheet, Text,
SafeAreaView } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
const App = () => {
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const toggleShowPassword = () => {
setShowPassword(!showPassword);
};
return (
<SafeAreaView style={styles.mainContainer}>
<Text style={styles.heading}>
Geeksforgeeks || Password Show and Hide
</Text>
<View style={styles.container}>
<TextInput
secureTextEntry={!showPassword}
value={password}
onChangeText={setPassword}
style={styles.input}
placeholder="Enter Password"
placeholderTextColor="#aaa"
/>
<MaterialCommunityIcons
name={showPassword ? 'eye-off' : 'eye'}
size={24}
color="#aaa"
style={styles.icon}
onPress={toggleShowPassword}
/>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
mainContainer: {
marginTop: 70,
margin: 40,
},
container: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#f3f3f3',
borderRadius: 8,
paddingHorizontal: 14,
},
input: {
flex: 1,
color: '#333',
paddingVertical: 10,
paddingRight: 10,
fontSize: 16,
},
icon: {
marginLeft: 10,
},
heading: {
alignItems: 'center',
fontSize: 20,
color: 'green',
marginBottom: 20,
},
});
export default App;