Form components not rendering

[cameronb23]

Hi, I am trying to integrate GiftedForm into my RN application. I am using a detached Expo app running on SDK version 20. I have tried using sample code that the docs provided but it seems none of my components are rendering.

import React from 'react';
import { Colors, StyleSheet, Image, View, ScrollView, TextInput, Button, Animated } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { AppText } from '../../components/AppText';

// form management
import { GiftedForm, GiftedFormManager } from 'react-native-gifted-form';

import { register } from '../../auth/userAuth';

const EMAIL_REGEX = new RegExp('/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/');
const PASS_REGEX = new RegExp('((?=.*\d)(?=.*[A-Z]).{8,8})');

export default class Register extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      loading: false
    }
  }

  _verifyInput(input, formKey) {
    this.state.form[formKey] = input;

    let errors = [];

    if(!EMAIL_REGEX.test(this.state.form.email)) {
      errors.push('Must provide a valid email address');
    }

    let username = this.state.form.username;

    if(username.length < 4 || username.length > 16) {
      errors.push(
        `Must provide a valid username that is between 4 and 16 characters and can only contain alphanumeric
         characters and +, _, ., -.`);
    }

    let password = this.state.form.password;

    if(password.length < 8)
      errors.push('Password must be at least 8 characters long');

    if(!PASS_REGEX.test(password))
      errors.push('Password must contain lowercase symbols, uppercase symbols, and at least one number');

    if(this.state.form.verifyPassword !== password)
      errors.push('Passwords must match');

    this.state.valid = (errors.length === 0);
    this.state.errors = errors;
  }

  _doRegister(isValid, values, validationResults, postSubmit = null, modalNavigator = null) {
    if (isValid === true) {
      // prepare object
      //values.gender = values.gender[0];
      //values.birthday = moment(values.birthday).format('YYYY-MM-DD');

      try {
        let userData = register(values.emailAddress, values.password);

        if(userData != null) {
          postSubmit();
        }
      } catch(e) {
        postSubmit(e);
      }
    }
  }

  render() {
    return (
      <GiftedForm
        formName='signupForm' // GiftedForm instances that use the same name will also share the same states
        clearOnClose={false} // delete the values of the form when unmounted
        defaults={{
          /*
          username: 'Farid',
          'gender{M}': true,
          password: 'abcdefg',
          country: 'FR',
          birthday: new Date(((new Date()).getFullYear() - 18)+''),
          */
        }}
        validators={{
          fullName: {
            title: 'Full name',
            validate: [{
              validator: 'isLength',
              arguments: [1, 23],
              message: '{TITLE} must be between {ARGS[0]} and {ARGS[1]} characters'
            }]
          },
          username: {
            title: 'Username',
            validate: [{
              validator: 'isLength',
              arguments: [3, 16],
              message: '{TITLE} must be between {ARGS[0]} and {ARGS[1]} characters'
            },{
              validator: 'matches',
              arguments: /^[a-zA-Z0-9]*$/,
              message: '{TITLE} can contains only alphanumeric characters'
            }]
          },
          password: {
            title: 'Password',
            validate: [{
              validator: 'isLength',
              arguments: [6, 16],
              message: '{TITLE} must be between {ARGS[0]} and {ARGS[1]} characters'
            }]
          },
          emailAddress: {
            title: 'Email address',
            validate: [{
              validator: 'isLength',
              arguments: [6, 255],
            },{
              validator: 'isEmail',
            }]
          }
        }}
      >
        <GiftedForm.SeparatorWidget />

        <GiftedForm.TextInputWidget
          name='fullName' // mandatory
          title='Full name'
          placeholder='Marco Polo'
          clearButtonMode='while-editing'
        />

        <GiftedForm.TextInputWidget
          name='username'
          title='Username'
          placeholder='MarcoPolo'
          clearButtonMode='while-editing'
          onTextInputFocus={(currentText = '') => {
            if (!currentText) {
              let fullName = GiftedFormManager.getValue('signupForm', 'fullName');
              if (fullName) {
                return fullName.replace(/[^a-zA-Z0-9-_]/g, '');
              }
            }
            return currentText;
          }}
        />

        <GiftedForm.TextInputWidget
          name='password' // mandatory
          title='Password'
          placeholder='******'
          clearButtonMode='while-editing'
          secureTextEntry={true}
        />

        <GiftedForm.TextInputWidget
          name='emailAddress' // mandatory
          title='Email address'
          placeholder='example@nomads.ly'
          keyboardType='email-address'
          clearButtonMode='while-editing'
        />

        <GiftedForm.SeparatorWidget />

        <GiftedForm.ErrorsWidget/>

        <GiftedForm.SubmitWidget
          title='Sign up'
          onSubmit={(isValid, values, validationResults, postSubmit = null, modalNavigator = null) => {
            if (isValid === true) {
              // prepare object
              values.gender = values.gender[0];
              values.birthday = moment(values.birthday).format('YYYY-MM-DD');

              /* Implement the request to your server using values variable
              ** then you can do:
              ** postSubmit(); // disable the loader
              ** postSubmit(['An error occurred, please try again']); // disable the loader and display an error message
              ** postSubmit(['Username already taken', 'Email already taken']); // disable the loader and display an error message
              ** GiftedFormManager.reset('signupForm'); // clear the states of the form manually. 'signupForm' is the formName used
              */
            }
          }}
        />

        <GiftedForm.NoticeWidget
          title='By signing up, you agree to the Terms of Service and Privacy Policity.'
        />

        <GiftedForm.HiddenWidget name='tos' value={true} />
      </GiftedForm>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 18
  }
});

[philohelp]

I have the same bizarre problem here... Any clue on why it's (not) doing this ?