react native login form with password visibility toggle

Libraries used for this login screen.

npm add react-native-svg --save

The hide icon, IconHide.js

import React from 'react';
import { Path, Svg } from 'react-native-svg';

export default function IconHide({
    fillColor = '#000000',
    size = 24,
    viewBox = '0 0 24 24',
}) {
    return (
        
    );
}

The show icon, IconShow.js

import React from 'react';
import { Path, Svg } from 'react-native-svg';

export default function IconShow({
    fillColor = '#000000',
    size = 24,
    viewBox = '0 0 24 24',
}) {
    return (
        
    );
}

The password visibility icon, PasswordVisibilityIcon.js. It takes a boolean indicating whether if it should be a hide or a show icon and a callback function when the icon is tapped.

import React from 'react';
import { TouchableOpacity } from 'react-native';
import IconHide from './icons/IconHide';
import IconShow from './icons/IconShow';

export default function PasswordVisibilityIcon({ showPassword, onIconTapped }) {
  return (
    
        {showPassword?  : }
    
  );
}

The login in screen with an input for username, an input for password and a submit button. LoginScreen.js

import React, { Component } from 'react';
import { Button, Keyboard, KeyboardAvoidingView, Platform, StyleSheet, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
import PasswordVisibilityIcon from './PasswordVisibilityIcon';

export default class LoginScreen extends Component {

  constructor(props) {
    super(props);
    this.state = {
        username: '',
        password: '',
        showPassword: false,
        showUsernameError: false,
        showPasswordError: false,
    };
    this.passwordVisibilityToggled = this.passwordVisibilityToggled.bind(this);
    this.submitPressed = this.submitPressed.bind(this);
  }

  passwordVisibilityToggled() {
    console.log("this.state: ", this.state);
    this.setState({
      showPassword: !this.state.showPassword,
    });
  }

  submitPressed() {
    console.log("submitPressed this.state: ", this.state);
    this.setState({
        showUsernameError: this.state.username.length < 4,
        showPasswordError: this.state.password.length < 8,
    });
  }

  render() {
    return (
        
          
            
              

                Login

                
                     this.setState({username})}
                    />
                    {this.state.showUsernameError &&
                        Please enter a user name.
                    }
                

                
                  
                   this.setState({password})}
                  />
                    {this.state.showPasswordError &&
                        Please enter a password.
                    }
                

                
                  
                

              
            
          
        
      );
  }
}

const styles = StyleSheet.create({
    container: {
      flex: 1
    },
    inner: {
      padding: 24,
      flex: 1,
      justifyContent: "space-around"
    },
    header: {
      fontSize: 36,
      padding: 24,
      margin: 12,
      textAlign: "center",
    },
    inputTextWrapper: {
      marginBottom: 24,
    },
    textInput: {
      height: 40,
      borderColor: "#000000",
      borderBottomWidth: 1,
      paddingRight: 30,
    },
    errorText: {
        color: 'red',
        fontSize: 10,
    },
    btnContainer: {
      backgroundColor: "white",
      marginTop:36,
    }
  });

Complete example in Github