Accessing refs of Swiper child components not working. In this test I tried to use the focus() method

[araujobarret]

Which OS ?

Android 7.0

Version

Which versions are you using:

• react-native-swiper v1.5.13
• react-native v0.50.3

Expected behaviour

Set the focus on child components of the Swiper, in this case TextInput's

Actual behaviour

Show the keyboard for the TextInput but when we type doesn't show anything and doesn't show the focus on the component. Event using the method onSubmitEditing={() => this.inputs.cpfCnpj.focus()} it is not working.

How to reproduce it

import React from 'react';
import { View, Text, TextInput, Button, StyleSheet, TouchableHighlight } from 'react-native';
import Swiper from 'react-native-swiper';

export default class Signup extends React.Component {
  index;

  constructor(props) {
    super(props);
    this.onNext = this.onNext.bind(this);
    this.onPrevious = this.onPrevious.bind(this);
    this.focusNextField = this.focusNextField.bind(this);
    this.state = {
      email: "",
      cpfCnpj: "",
      telefone: ""
    };
    this.inputs = {};
    this.index = 0;
  }

  onNext() {
    this.inputs.cpfCnpj.focus();
  }

  onPrevious(){
    return true;
  }

  render() {
    return (
      <Swiper showButtons="true" scrollEnabled={false} ref={component => { this.inputs['swiper'] = component }} >
        <View style={styles.container1}>

          <View style={styles.signinHeader}>
            <Text>
              Image Logo
            </Text>
          </View>

          <View style={styles.containerText}>
            <TextInput
              ref={component => { this.inputs['email'] = component }}
              blurOnSubmit={false}
              onSubmitEditing={() => this.inputs.cpfCnpj.focus()}
              returnKeyType={"next"}
              onChangeText={(email) => this.setState({email})}
              style={styles.commonText}
              underlineColorAndroid="transparent"
              placeholder="Email"
              keyboardType={"email-address"}
            />

            <TextInput              
              ref={component => { this.inputs['cpfCnpj'] = component }}
              blurOnSubmit={false}
              onSubmitEditing={() => this.inputs.telefone.focus()}
              returnKeyType={"next"}
              onChangeText={(cpfCnpj) => this.setState({cpfCnpj})}
              style={styles.commonText}
              underlineColorAndroid="transparent"
              placeholder="CPF/CNPJ"
              keyboardType={"numeric"}
            />
            <TextInput
              ref={component => { this.inputs['telefone'] = component }}
              blurOnSubmit={true}
              returnKeyType={"done"}
              onChangeText={(telefone) => this.setState({telefone})}
              style={styles.commonText}
              underlineColorAndroid="transparent"
              placeholder="Telefone"
              keyboardType={"phone-pad"}
            />
            <TouchableHighlight
              onPress={this.onNext}
              style={styles.commonButton}>
              <Text style={styles.buttonText}>NEXT STEP</Text>
            </TouchableHighlight>
            <TouchableHighlight
              onPress={this.onPrevious}
              style={styles.commonButton}>
              <Text style={styles.buttonText}>BACK</Text>
            </TouchableHighlight>
          </View>

        </View>
        <View style={{backgroundColor: 'red', flex: 1}} />
        <View style={{backgroundColor: 'brown', flex: 1}} />
      </Swiper>
    );
  }
}

const styles = StyleSheet.create({
  container1: {
    flex: 1
  },
  signinHeader: {
    flex: 1,
    backgroundColor: "pink",
    justifyContent: "center"
  },
  containerText: {
    flex: 2,
    marginLeft: 15,
    marginRight: 15
  },
  commonText: {
    paddingLeft: 10,
    marginTop: 15,
    backgroundColor: "white"
  },
  commonButton: {
    marginTop: 30,
    paddingTop: 10,
    paddingBottom: 10,
    backgroundColor: "#3454D1"
  },
  buttonText: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  }
});

Steps to reproduce

1. Just paste the code above in a React Component and test it.

Thanks in advance.

[rdhox]

Any solution found?