React-native: React.createRef() on TextInput no working react native 16.3.1

[gasparteixeira]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] 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

Run react-native info in your terminal and paste its contents here.

Environment:
OS: macOS High Sierra 10.13.6
Node: 10.7.0
Yarn: 1.2.0
npm: 6.2.0
Watchman: Not Found
Xcode: Xcode 9.4.1 Build version 9F2000
Android Studio: 3.1 AI-173.4819257

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz => 0.55.4

Description

I have an Textinput and I would like to set the cursor when it's not filled.

class SignupScreen extends Component {
  constructor(props) {
    super(props);
    this.fieldOne = React.createRef(); 
    this.state = {
        name: '',
    }
}

validate() {
   if(_.size(this.state.name) < 3) {
      ...
      this.fieldOne.current.focus() // this is not working
    }
}

render() {
return(
.... 
<TextInput
    placeholder={'Name'}
    autoCapitalize='words'
    autoCorrect={false}
    autoFocus={false}
    keyboardType='default'
    value={this.state.name}
    ref={this.fieldOne}
    selectionColor={colors.PRIMARY_LIGHT}
    placeholderTextColor={colors.PRIMARY_LIGHT}
    underlineColorAndroid={colors.NO_COLOR}
    onChangeText={(text) => this.setState({ name: text })}
/>
 ...
}

Has someone had a similar problem?

Thank you guys

[moriarty1900]

try "ref={(ref)=>{this.fieldOne = ref}}"

[gasparteixeira]

@moriarty1900, still not working! I changed to react-native-elements and it worked perfect!

[risabhkumar-cc]

Why is this closed? This is still not working.

[gasparteixeira]

@risabhkumar-cc Yes. I agree! I don't know why the hell or what I had in my mind when I closed this issue.

[cinder92]

same issue here +1

[kelset]

👋 there.

just tested this snippet:

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

export default class App extends Component<> {
  constructor(props) {
    super(props);
    this.fieldOne = React.createRef();
    this.state = {
      name: ''
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
          placeholder={'Name'}
          autoCapitalize="words"
          autoCorrect={false}
          autoFocus={false}
          keyboardType="default"
          value={this.state.name}
          ref={this.fieldOne}
          onChangeText={text => this.setState({ name: text })}
        />
        <TouchableOpacity
          style={{
            backgroundColor: 'red',
            padding: 10,
            marginTop: 20
          }}
          onPress={() => {
            const textInput = this.fieldOne.current;
            textInput.focus();
          }}
        >
          <Text>Focus it</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    paddingTop: 40,
    paddingHorizontal: 50
  }
});

which is inspired by the code above on a new RN 0.59 project, and I can't replicate the bug.
Closing.

[wrod7]

@kelset how would you do this with function based components and hooks?

[darrell-roberts]

@wrod7 Very similar, without the needless verbosity in sugared classes.

For example:

const MyComp = ({charLimit}) => {
  const [text, setText] = useState(textData);
  let textInput = React.createRef();

  const handleTouch = () => {
    if (textInput) {
      textInput.focus();
    }
  };

  return (
    <TouchableOpacity onPress={handleTouch}>
      // More components, etc...
       <TextInput 
            ref={r => textInput = r}
            maxLength={charLimit}
            value={text}
            onChangeText={t => setText(t)}
          />
    </TouchableOpacity>
  )
}

[FDiskas]

const MyComp = ({charLimit}) => {
  const [text, setText] = useState(textData);
  let textInput = React.createRef();

  const handleTouch = () => {
    if (textInput) {
      textInput.focus();
    }
  };

  return (
    <TouchableOpacity onPress={handleTouch}>
      // More components, etc...
       <TextInput 
            ref={textInput}
            maxLength={charLimit}
            value={text}
            onChangeText={t => setText(t)}
          />
    </TouchableOpacity>
  )
}

This does not work

[mcmillhj-wta]

@FDiskas Their example is missing .current, textInput.current.focus() should work. I just did something similar for clearing a TextInput in a search bar:

function handleClearSearch() {
  setTerms(undefined);
  if (searchInputRef) {
    searchInputRef.current.clear();
  }
}
....
<View style={styles.container}>
    <View style={styles.searchContainer}>
    {isLoading ? (
        <ActivityIndicator color="#e0e0e0" size={32} />
    ) : (
        <Icon name="search" color={"#e0e0e0"} size={32} />
    )}
    <TextInput
        ref={searchInputRef}
        placeholder="Search"
        style={styles.searchInput}
        onChange={e => {
        e.persist();

        debouncedHandleChangeTerms(e);
        }}
    />
    <TouchableOpacity onPress={handleClearSearch}>
        <Icon name={"x"} color={"#e0e0e0"} size={32} />
    </TouchableOpacity>
    </View>
</View>