React Native - How to use a ref to set focus to an input when clicking on text

Question

Here's what I'm doing:

export default class myComponent extends Component {
    render() {
        return (
            <View>
                 <Text onPress={() => {this.input.focus()}}>Click Me</Text>
                 <Input ref={input => { this.input = input}}/>
            </View>
        )
    }
}

I am using native-base components... not sure if that is affecting this. When I press the Text component, I get an error stating: _this2.input.focus is not a function. (In '_this2.input.focus()', '_this2.input.focus' is undefined)

score 3 · Accepted Answer · answered Sep 13 '18 at 23:21

I don't use native-base, but at normal it should be like this:

import * as React from 'react';
import { Text, View, StyleSheet, TextInput, Dimensions } from 'react-native';
import { Constants } from 'expo';

const { width, height } = Dimensions.get('window');

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text onPress={() => {this.input.focus()}}>Click Me</Text>
        <TextInput style={styles.input} ref={input => { this.input = input}}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  input: {
    backgroundColor: '#bbb',
    width: width - 40,
    height: 40,
    paddingHorizontal: 10,
    paddingVertical: 5,
  }
});

You can see the snacks here: https://snack.expo.io/@gasparteixeira/inputfocus

thanks for your response. I switched my component to a react-native TextInput instead of the native-base input I was using and that works. The native-base wrapper must hide the focus method? — jharrell, Sep 14 '18 at 13:00
Thats good it helped! Well, I really don't know how native-base works. However, I guess the wrapper would be the main responsible! — Gaspar Teixeira, Sep 14 '18 at 16:42

score 1 · Answer 2 · answered Jan 22 '22 at 23:57

In case anyone comes across this stack overflow during the Hooks Era of React and React Native.

Solution with Hooks following the React Docs https://reactjs.org/docs/hooks-reference.html#useref

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

score 0 · Answer 3 · answered Sep 14 '18 at 07:03

export default class myComponent extends Component {
  public textInput: TextInput | null = null;

  render() {
    return (
        <View>
             <Text onPress={() => {this.textInput.focus()}}>Click Me</Text>
             <TextInput ref={input => (this.textInput = input as any)}/>
        </View>
    );
  }
}

score -1 · Answer 4 · answered Sep 14 '18 at 07:40

export default class myComponent extends Component {
    render() {
        return (
            <View>
                 <Text onPress={() => {this.input.focus()}}>Click Me</Text>
                 <Input ref={ref => (this.textinput= ref)}/>
            </View>
        )
    }
}

and use this:

handleTextInput = () => {
    this.textinput....
 };

React Native - How to use a ref to set focus to an input when clicking on text

4 Answers4