React Native - Access Wrapped Component Methods

Question

I'm trying to drive focus to the second field in a form using custom input components. However, I can't seem to access the focus() or other methods of TextInput which I am extending in the custom class. I have seen some information on ref forwarding as well as implementing the focus() function within the class but have not been able to get either working yet.

Whenever I try to hit the "next" button on the keyboard, it says that focus is not a function. Any help or reference would be appreciated.

<View>
    <CustomInput
    onRef={ref => (this.child = ref)}
    autoCapitalize={'none'}
    returnKeyType={'next'}
    autoCorrect={false}
    onSubmitEditing={() => this.lastNameInput.focus()}
    updateState={(firstName) => this.setState({firstName})}
    blurOnSubmit={false}
    />
    <CustomInput
    onRef={ref => (this.child = ref)}
    autoCapitalize={'none'}
    returnKeyType={'done'}
    autoCorrect={false}
    updateState={(lastName) => this.setState({lastName})}
    ref={(input) => { this.lastNameInput = input; }}
    onSubmitEditing={(lastName) => this.setState({lastName})}
    />
</View>

export default class UserInput extends Component {

    render() {

        return (
           <View style={styles.inputWrapper}>
            <TextInput
              style={styles.input}
              autoCorrect={this.props.autoCorrect}
              autoCapitalize={this.props.autoCapitalize}
              returnKeyType={this.props.returnKeyType}
              placeholderTextColor="white"
              underlineColorAndroid="transparent"
              onChangeText={(value) => this.props.updateState(value)}
              blurOnSubmit={this.props.blurOnSubmit}
            />
          </View>
        );
    }

}

Answer 1

you need to do some changes in both components. according to https://stackoverflow.com/a/49810837/2083099

import React, { Component } from 'react'
import {View,TextInput} from 'react-native';

class UserInput extends Component {
componentDidMount() {
    if (this.props.onRef != null) {
        this.props.onRef(this)
    }
}

onSubmitEditing() {
    if(this.props.onSubmitEditing){
        this.props.onSubmitEditing();
    }
}

focus() {
    this.textInput.focus()
}

render() {

    return (
        <View style={{ flex: 1 }}>
            <TextInput
                style={{ height: 100, backgroundColor: 'pink' }}
                autoCorrect={this.props.autoCorrect}
                autoCapitalize={this.props.autoCapitalize}
                returnKeyType={this.props.returnKeyType}
                placeholderTextColor="white"
                underlineColorAndroid="transparent"
                onChangeText={(value) => this.props.updateState(value)}
                blurOnSubmit={this.props.blurOnSubmit}
                ref={input => this.textInput = input}
                onSubmitEditing={this.onSubmitEditing.bind(this)}
            />
        </View>
    );
  }

}

export default class OrderScreen extends Component {

constructor(props) {
    super(props);

    this.focusNextField = this.focusNextField.bind(this);
    this.inputs = {};
}


focusNextField(id) {
    this.inputs[id].focus();
}

render() {
    return (
        <View style={{ flex: 1 }}>
            <UserInput
                autoCapitalize={'none'}
                returnKeyType={'next'}
                autoCorrect={false}
                updateState={(firstName) => this.setState({ firstName })}
                blurOnSubmit={false}
                onRef={(ref) => { this.inputs['projectName'] = ref; }}
                onSubmitEditing={() =>    {this.focusNextField('projectDescription');}}
            />
            <UserInput
                onRef={(ref) => {this.inputs['projectDescription'] = ref}}
                autoCapitalize={'none'}
                returnKeyType={'done'}
                autoCorrect={false}
                updateState={(lastName) => this.setState({ lastName })}
            />
        </View>
    )
 }
}