Passing checkbox value to show / hide Password via react native

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.

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="Password"
      secureTextEntry={hidePass ? true : false}>
       <Icon
          name={hidePass ? 'eye-slash' : 'eye'}
          onPress={() => setHidePass(!hidePass)} />
    <TextInput/>