Custom TextInput component with Ref's in react-native

Question

I have a problem in react-native.

my application has many screens and forms. I need to create TextInput component for this style and keep the program in clean code.

this is my TextInput component:

import React, { Component } from 'react';
import { Text, View, TextInput, StyleSheet } from 'react-native';
import FormStyles from './formStyle.css';
class CustomTextInput extends Component {
    state = {
        isFocused: false,
    };
    render() {
        const props = this.props;
        const styles = StyleSheet.create({
            label: {
                color: global.black,
                marginBottom: 3,
                fontSize: global.normalText,
                fontFamily: global.fontRegular,
            },
            textInput: {
                fontFamily: global.fontRegular,
                backgroundColor: '#fff',
                height: 50,
                padding: 10,
                borderRadius: 8,
                fontSize: global.largeText,
                borderStyle: 'solid',
                borderColor: global.Color_transparent,
                borderWidth: 1,
                lineHeight: 1
            },
            textInputOnFocus: {
                borderBottomColor: global.primaryColor,
                borderBottomWidth: 2,
            },
            textInputHasError: {
                backgroundColor: global.formBgError,
                borderColor: global.primaryColor,
            }
        });
        return (
            <View style={FormStyles.formControl}>
                {props.label ? <Text style={styles.label}>{props.label}</Text> : null}
                <TextInput
                    style={[
                        props.error && styles.textInputHasError,
                        this.state.isFocused && styles.textInputOnFocus,
                        styles.textInput
                    ]}
                    keyboardType={props.keyboardType || 'default'}
                    placeholder={props.placeholder || ''}
                    onFocus={() => this.setState({ isFocused: true })}
                    onBlur={() => this.setState({ isFocused: false })}
                    returnKeyType={props.returnKey || 'none'}
                    secureTextEntry={props.type === 'password' ? true : false}
                    autoComplete={props.autoComplete || 'off'}
                    autoFocus={props.autoFocus || false}
                    {...props}
                />
                {props.error ?
                    <Text style={FormStyles.formError}>{props.error}</Text>
                    : null}
            </View>
        )
    }
}
export default CustomTextInput

but, in LoginScreen I have tow fileds: phone number & password I need to phone number TextInput, has next button and set attribute :

returnKeyType="next"

in login screen, when i use Ref's for create ref password field, it not work correctly! Ref that I created is not a problem. Because it works properly when I delete the CustomTextInput component. But I need to use the component for the forms.

If you know anything about this, please guide me. thanks