通过本机反应传递复选框值以显示/隐藏密码

Question

I'm using Firebase auth I will want to add a Check box, it will display the password in the password text box and hide it when it is clicked again

How to Passing checkbox value to show / hide Password?

This is my Login Page Code:

export default class Login extends Component {
    constructor(props) {
        super(props)
        this.state = {
            email: '',
            password: '',
            response: ''
        }
        this.signUp = this.signUp.bind(this)
        this.login = this.login.bind(this)
    }

    async signUp() {
        try {
            await firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password)
            this.setState({
                response: 'Account Created!'
            })
            setTimeout(() => {
                this.props.navigator.push({
                    id: 'App'
                })
            }, 500)
        } catch (error) {
            this.setState({
                response: error.toString()
            })
        }
    }
    async login() {
        try {
            await firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
            this.setState({
                response: 'user login in'
            })

            setTimeout(() => {
                this.props.navigator.push({
                    id: 'App'
                })
            })

        } catch (error) {
            this.setState({
                response: error.toString()
            })
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.containerInputes}>
                    <TextInput
                        placeholderTextColor="gray"
                        placeholder="Email"
                        style={styles.inputText}
                        onChangeText={(email) => this.setState({ email })}
                    />
                    <TextInput
                        placeholderTextColor="gray"
                        placeholder="Password"
                        style={styles.inputText}
                        password={true}
                        secureTextEntry={true}
                        onChangeText={(password) => this.setState({ password })}
                    />
                </View>
                <TouchableHighlight
                    onPress={this.login}
                    style={[styles.loginButton, styles.button]}
                >
                    <Text
                        style={styles.textButton}
                    >Login</Text>
                </TouchableHighlight>
                <TouchableHighlight
                    onPress={this.signUp}
                    style={[styles.loginButton, styles.button]}
                >
                    <Text
                        style={styles.textButton}
                    >Signup</Text>
                </TouchableHighlight>
            </View>
        )
    }
}

Answer 1

One way of doing that is to set a state variable like showPassword and toggle it whenever the checkbox is checked. Like so:

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View, 
  TextInput,
  Switch
} from 'react-native';

export default class DemoProject extends Component {
  constructor(props) {
    super(props);
    this.toggleSwitch = this.toggleSwitch.bind(this);
    this.state = {
      showPassword: true,
    }
  }

  toggleSwitch() {
    this.setState({ showPassword: !this.state.showPassword });
  }

  render() {
    return (
      <View>
        <TextInput
          placeholderTextColor="gray"
          placeholder="Password"
          secureTextEntry={this.state.showPassword}
          onChangeText={(password) => this.setState({ password })}
        />
        <Switch
          onValueChange={this.toggleSwitch}
          value={!this.state.showPassword}
        /> 
        <Text>Show</Text>
      </View>
    )
  }
}

AppRegistry.registerComponent('DemoProject', () => DemoProject);

NOTE: This won't work if you set the password prop!!!

So just use a regular TextInput and utilize the secureTextEntry prop.

Answer 2

import React, {useState} from 'react';
import {TextInput} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome5';

const [hidePass, setHidePass] = useState(true);
    
    <TextInput
              placeholder="Old password"
              autoCompleteType="password"
              secureTextEntry={hidePass ? true : false}
            />
            <Icon
              name={hidePass ? 'eye-slash' : 'eye'}
              size={15}
              color="grey"
              onPress={() => setHidePass(!hidePass)}
            />

Answer 3

here is my way of doing it

const LoginScreen = props => {
  const [icon, setIcon] = useState("eye-off")
  const [hidePassword, setHidePassword] = useState(true)

  _changeIcon = () => {
    icon !== "eye-off"
      ? (setIcon("eye-off"), setHidePassword(false))
      : (setIcon("eye"), setHidePassword(true))
  }

i used native base for textInput

 <Input
              secureTextEntry={hidePassword}
              placeholder="Password"
              placeholderTextColor={palette.gray}
            />
            <Icon name={icon} size={20} onPress={() => _changeIcon()} />

this will change the secureTextEntry on click

Answer 4

Please correct me if I am wrong, are you asking how to create a check box? If so, you have two routes, either use a 3rd party library from one of the many check boxes on the web or you can create one yourself.

Steps:

1. download a icon library as such https://github.com/oblador/react-native-vector-icons so you can use the two material design icons from enter link description here eg. checkbox-blank-outline and checkbox-marked to emulate clicked and not clicked
2. using those two new icons, simply create a new component with what ever functionality you desire and handle all states and such the way you want.

Basic implementation:

1. Have a state that controls if it was checked or not
2. Have a onPress function to handle both states and trigger the respective props

// the on press function
onPress = () => {
  if (this.sate.checked) {
    this.props.checked();
  } else {
    this.props.unChecked();
  }
}

// the rendered component
<Icon name={this.state.checked ? "checkbox-marked" : "checkbox-blank-outline" onPress={this.onPress}/>

Answer 5

this is how i did in simple way,

my checkbox and password component,

<input style={ inputUname } type={this.state.type} placeholder="Password" value={ this.state.password } onChange={this.handlePassword}/>
<Checkbox defaultChecked={false} onSelection={this.showPassword} value="false" name="Checkbox" label="Show password"/>

my state,

this.state = {
     type: 'input'
}

here is my show password event,

showPassword(e){
    this.setState( { showpassword: !this.state.showpassword }) // this is to change checkbox state
    this.setState( { type: this.state.type === 'password' ? 'text' : 'password' }) // this is to change input box type text/password change
}

Answer 6

enter image description here

  const [password, setPassword] = useState("")
    const [passwordVisible, setPasswordVisible] = useState(true)



<TextInput
    mode='outlined'
    style={{ flex: 1, marginHorizontal: 20, marginTop: 30 }}
    autoCapitalize="none"
    returnKeyType="next"
    label=' Password '
    keyboardType="default"
    underlineColorAndroid={'rgba(0,0,0,0)'}
    right={<TextInput.Icon color={colors.white} name={passwordVisible ? "eye" : "eye-off"} onPress={onPressEyeButton} />}
    text='white'
    maxLength={50}
    onChangeText={(text) => { setPassword(text) }}
    value={password}
    defaultValue={password}
    theme={styles.textInputOutlineStyle}
    secureTextEntry={passwordVisible}
    />


 textInputOutlineStyle: {
    colors: {
        placeholder: colors.white,
        text: colors.white, 
        primary: colors.white,
        underlineColor: 'transparent',
        background: '#0f1a2b'
    }
},

[1]: https://i.stack.imgur.com/C7ist.png

Answer 7

Step1:Create a "useState" hook to store the initial values of password and secureTextEntry

    const [data, setData] = useState({
                password: '',
                isSecureTextEntry: true,
              });

Step2:Update the state according to the conditions 
        <View>
        <TextInput
                    style={styles.textInput}
                    placeholder="Enter Password"
                    secureTextEntry={data.isSecureTextEntry ? true : false}
                    onChangeText={data => {
                      setData({
                        password: data,
                        //OR
                        /*
                          //Array destructuring operator to get the existing state i.e
                          ...data
                        */
                        //and then assign the changes
                        
                        isSecureTextEntry: !data.isSecureTextEntry,
                      });
                    }}></TextInput>
                  <TouchableOpacity
                    onPress={() => {
                      setData({
                        //...data,
                        isSecureTextEntry: !data.isSecureTextEntry,
                      });
                    }}>
                    <FontAwesome
                      name={data.isSecureTextEntry ? 'eye-slash' : 'eye'}
                      color="gray"
                      size={25}
                      paddingHorizontal="12%"
                    />
                  </TouchableOpacity>
                </View>

Answer 8

<View>
  <Input
    style={styles.input}
    onChangeText={onChangeData}
    multiline={false}
    secureTextEntry={!showPassword}
    textContentType={"password"}
    value={data.password}
    placeholder="Password"
  />

  <TouchableHighlight
    style={{
      textAlign: "right",
      position: "absolute",
      right: 20,
      bottom: 22,
      zIndex: 99999999,
    }}
    onPress={() => setShowPassword(!showPassword)}
  >
    <>
      {showPassword && (
        <Ionicons name="eye-outline" size={22} color="#898A8D" />
      )}
      {!showPassword && (
        <Ionicons name="eye-off-outline" size={22} color="#898A8D" />
      )}
    </>
  </TouchableHighlight>
</View>;