React-native: Can´t focus a custom textInput

Created on 14 Aug 2018 · 3Comments · Source: facebook/react-native

[ ] Review the documentation: https://facebook.github.io/react-native
[ ] Search for existing issues: https://github.com/facebook/react-native/issues
[ ] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Environment:
OS: Windows 10
Node: 8.9.1
Yarn: Not Found
npm: 5.6.0
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.0.0.0 AI-171.4443003

Packages: (wanted => installed)
react: ^16.3.1 => 16.3.1
react-native: ^0.55.4 => 0.55.4

Description

Hello.
I have a question.
I have two textInput, and need to make pass from the first textinput to the second.
I created a customtextInput with the code below:

render() {
return (
placeholderTextColor="#dadada"
underlineColorAndroid="transparent"
{...this.props}
style={styles.txtInput}
/>

);

const styles = StyleSheet.create({
txtInput: {
color: 'white',
fontFamily: 'Poppins-Regular',
flex: 1,
fontSize: 15,
},
outside: {
paddingHorizontal: 18,
paddingTop: 4,
paddingBottom: Platform.select({ android: 1, ios: 4 }),
borderRadius: 30,
backgroundColor: '#4f4f4fa3',
flexDirection: 'row',
},
icon: {
marginTop: Platform.select({ android: 3, ios: 0 }),
},
});

this is the customtextinput code

    <CustomTextInput
      onChangeText={text => this.setState({user: text})}
      placeholder="Usuário"
      style={styles.components}
      returnKeyType="next"
      autoCapitalize="none"
      autoCorrect={false}
      onSubmitEditing={() => {
        (this.refs['inputPassword'] as any).focus();
      }}
    />
    <CusatomTextInput
      onChangeText={text => this.setState({password: text})}
      placeholder="Senha"
      style={styles.components}
      returnKeyType="done"
      secureTextEntry={true}
      ref="inputPassword"
    />

my problem is that it returns error when trying to make the setfocus

Thank you

Reproducible Demo

react-native run-android

TextInput Locked

Source

Fernando-Parise

Most helpful comment

Add a method to your custom component that will return a reference to the TextInput.
Get a reference to your custom component and call the method on that reference.

getInnerRef = () => this.ref;

render() {
    return (
        <View>
            <TextInput
                {...this.props}
                ref={(r) => this.ref = r}
            />
        </View>
    )
}

render() {
    return (
        <View>
            <CustomTextInput
                onSubmitEditing={() => this.refInput.getInnerRef().focus()}
            />
            <CustomTextInput
                {...this.props}
                ref={(r) => this.refInput = r}
            />
        </View>
    )
}

basbase on 15 Aug 2018

👍9 🚀1

All 3 comments

Can you reproduce the issue on the latest release, v0.56?

react-native-bot on 14 Aug 2018

Add a method to your custom component that will return a reference to the TextInput.
Get a reference to your custom component and call the method on that reference.

getInnerRef = () => this.ref;

render() {
    return (
        <View>
            <TextInput
                {...this.props}
                ref={(r) => this.ref = r}
            />
        </View>
    )
}

render() {
    return (
        <View>
            <CustomTextInput
                onSubmitEditing={() => this.refInput.getInnerRef().focus()}
            />
            <CustomTextInput
                {...this.props}
                ref={(r) => this.refInput = r}
            />
        </View>
    )
}

basbase on 15 Aug 2018

👍9 🚀1

It worked..... wohoooo
thank you for your help

Fernando-Parise on 15 Aug 2018

Was this page helpful?

0 / 5 - 0 ratings