Touching InputField displays the wrong label

Hi there,

Adding more Text input fields in a registration form (i.e. more than 3 fields), it breaks the touchability function.

For example, after the 3rd field, if the user touches in the 4th field, it displays the label of the 3rd. Even tough, the field is filled correctly. Thus, it seems the issue is located only in the label property.

See the image attached. The registration form has 4 fields: firstName, lastName, email and password.

When the user touches the password field, it displays Email Address label.
Nevertheless, if the user finishes and confirm typing, the field password was filled correctly.

Plus, if a 5th and 6th field are added, the form displays the 4th and 5th respectively. Thus, the behavior seems to be that the feature, to display the field after touching it, is showing the previous fields, always when the form has more than 3 fields+

i.User clicks/touches in the 4th field, it opens the 3th;
ii.User clicks/touches in the 5th field, it opens the 4th;
iii.User clicks/touches in the 6th field, it opens the 5th;

So, I believe there's something wrong in the state of the current displaying field.

the source code of the form has been attached bellow

Where can I fix the label displaying feature in the react-native-basic-form component ?

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

import * as api from "../../services/auth";

import Form, { TYPES } from 'react-native-basic-form';
import CTA from "../../components/CTA";
import {Header, ErrorText} from "../../components/Shared";

export default function Register(props) {
const {navigation} = props;

//1 - DECLARE VARIABLES
const [error, setError] = useState(null);
const [loading, setLoading] = useState(false);

const fields = [
    {name: 'firstName', label: 'First Name', required: true},
    {name: 'lastName', label: 'Last Name', required: true},
    {name: 'email', label: 'Email Address', required: true, type: TYPES.Email},
    {name: 'password', label: 'Password', required: true, secure:true},
];

async function onSubmit(state) {
    setLoading(true);

    try {
        let response = await api.register(state);
        setLoading(false);
        Alert.alert(
            'Registration Successful',
            response.message,
            [{text: 'OK', onPress: () => navigation.replace("Login")}],
            {cancelable: false},
        );
    } catch (error) {
        setError(error.message);
        setLoading(false)
    }
}

let formProps = {title: "Register", fields, onSubmit, loading };
return (
    <View style={{flex: 1, paddingHorizontal: 16, backgroundColor:"#fff"}}>
        <Header title={"Register"}/>
        <View style={{flex:1}}>
            <ErrorText error={error}/>
            <Form {...formProps}>
                <CTA
                    title={"Already have an account?"}
                    ctaText={"Login"}
                    onPress={() => navigation.replace("Login")}
                    style={{marginTop: 50}}/>
            </Form>
        </View>
    </View>
);

};

Register.navigationOptions = ({}) => {
return {
title: ``
}
};

[lucj]

I have some trouble using the Form on Android (see #4 ) I guess what you see here is the form pushed toward the top of the screen (not 100% sure though)