react native registration form example

 

Library for the form to be scrollable.

npm add react-native-keyboard-aware-scroll-view --save

The registration screen, RegistrationScreen.

import React, { Component } from 'react';
import { Button, Keyboard, Platform, StyleSheet, Text, TextInput, View } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

export default class RegistrationScreen extends Component {

  emailInputRef = React.createRef();
  passwordInputRef = React.createRef();
  firstnameInputRef = React.createRef();
  lastnameInputRef = React.createRef();
  occupationInputRef = React.createRef();
  addressInputRef = React.createRef();
  zipInputRef = React.createRef();
  phoneInputRef = React.createRef();
  scrollViewRef = React.createRef();

  constructor(props) {
    super(props);
    this.state = {
        email: '',
        password: '',
        firstname: '',
        lastname: '',
        occupation: '',
        address: '',
        zip: '',
        phone: '',
        showEmailError: false,
        showPasswordError: false,
        showFirstnameError: false,
        showLastnameError: false,
        showOccupationError: false,
        showAddressError: false,
        showZipError: false,
        showPhoneError: false,
    };
    this.submitPressed = this.submitPressed.bind(this);
  }

  inputs = () => {
    return [
      this.emailInputRef,
      this.passwordInputRef,
      this.firstnameInputRef,
      this.lastnameInputRef,
      this.occupationInputRef,
      this.addressInputRef,
      this.zipInputRef,
      this.phoneInputRef,
    ];
  };

  editNextInput = () => {
    console.log("editNextInput")
    const activeIndex = this.getActiveInputIndex();
    if (activeIndex === -1) {
        return;
    }

    const nextIndex = activeIndex + 1;
    if (nextIndex < this.inputs().length && this.inputs()[nextIndex].current != null) {
        this.setFocus(this.inputs()[nextIndex], true);
    } else {
        this.finishEditing();
    }
  }

  onInputFocus = () => {
    this.setState({
        activeIndex: this.getActiveInputIndex(),
    });
  }

  onChangeInputHandler = (name, value) => {
    this.setState({
        [name]: value,
    });
  }

  getActiveInputIndex = () => {
    const activeIndex = this.inputs().findIndex((input) => {
        if (input.current == null) {
            return false;
        }
        console.log("input: ", input);
        return input.current.isFocused();
    });
    console.log("activeIndex: ", activeIndex);
    return activeIndex;
  }

  finishEditing = () => {
    const activeIndex = this.getActiveInputIndex();
    if (activeIndex === -1) {
        return;
    }
    this.setFocus(this.inputs()[activeIndex], false);
  }

  setFocus(textInputRef, shouldFocus) {
    if (shouldFocus) {
        setTimeout(() => {
            textInputRef.current.focus();
        }, 100);
    } else {
        textInputRef.current.blur();
    }
  }

  submitPressed() {
    console.log("submitPressed this.state: ", this.state);
    this.setState({
        showEmailError: this.state.email.length < 4,
        showPasswordError: this.state.password.length < 4,
        showFirstnameError: this.state.firstname.length < 4,
        showLastnameError: this.state.lastname.length < 4,
        showOccupationError: this.state.occupation.length < 4,
        showAddressError: this.state.address.length < 4,
        showZipError: this.state.zip.length < 4,
        showPhoneError: this.state.phone.length < 4,
    });
    Keyboard.dismiss();
  }

  render() {
    return (
        
            

                Registration

                
                    
                    {this.state.showEmailError &&
                        Please enter your email address.
                    }
                

                
                    
                    {this.state.showPasswordError &&
                        Please enter a password.
                    }
                

                
                    
                    {this.state.showFirstnameError &&
                        Please enter your first name.
                    }
                

                
                    
                    {this.state.showLastnameError &&
                        Please enter your last name.
                    }
                

                
                    
                    {this.state.showOccupationError &&
                        Please enter your occupation.
                    }
                

                
                    
                    {this.state.showAddressError &&
                        Please enter your address.
                    }
                

                
                    
                    {this.state.showZipError &&
                        Please enter your zipcode.
                    }
                

                
                    
                    {this.state.showPhoneError &&
                        Please enter your phone number.
                    }
                

                
                  
                

            
        
      );
  }
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      padding: 16,
      paddingBottom: 100,
    },
    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,
    }
  });