react native password toggle

Clear Caracal answered on October 30, 2024 Popularity 1/10 Helpfulness 1/10

answer react native password toggle

react native password toggle

Comment

import React, { useState } from 'react';
import { TextInput, View, StyleSheet, Text, 
    SafeAreaView } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

const App = () => {
    
    // State variable to hold the password
    const [password, setPassword] = useState('');

    // State variable to track password visibility
    const [showPassword, setShowPassword] = useState(false);

    // Function to toggle the password visibility state
    const toggleShowPassword = () => {
        setShowPassword(!showPassword);
    };

    return (
        <SafeAreaView style={styles.mainContainer}>
            <Text style={styles.heading}>
                Geeksforgeeks || Password Show and Hide
            </Text>
            <View style={styles.container}>
                <TextInput

                    // Set secureTextEntry prop to hide 
                    //password when showPassword is false
                    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;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: www.geeksforgeeks.org

Tags: javascript react-native toggle

Link to this answer
Share Copy Link

Contributed on Oct 30 2024

Clear Caracal

0 Answers Avg Quality 2/10

react native password toggle

Contents

More Related Answers

react native password toggle

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.