How can I access methods of react native built in components?

Question

As a beginner on react native, I cant find solution anywhere for this. For example given on React Native Docs

I want to access .focus, .blur, clear() methods.

Here in documentation.

Thanks in advance.

There are plenty of props like this one https://reactnative.dev/docs/textinput#onblur. You can use these event handles to update state or anything else. — Abhishek Sharma, May 29 '22 at 18:31

score 0 · Answer 1 · edited Jun 27 '22 at 16:44

0

UPDATE:

You should assign a reference to the input text field using something like this:

const textInputRef = useRef(null);
...
<TextInput
    ref={(input) => { textInputRef.current = input; }}
    placeholder="Text Input"
/>

And use this ref to trigger the .focus etc events.

for example

<Button
    label="Focus on Input"
    onClick={() => { this.textInputRef.current.focus(); }}
/>

For more details you can refer to following answer here

OLD ANSWER (as per my understanding of the question):

You can easily use these events using similar props (based on the component you are using)

For example, for TextInput

import React from "react";
import { SafeAreaView, StyleSheet, TextInput } from "react-native";

const UselessTextInput = () => {
  const [text, onChangeText] = React.useState("Useless Text");
  const [focused, setFocused] = React.useState(null);

  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        value={text}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default UselessTextInput;

edited Jun 27 '22 at 16:44

geisterfurz007

5,292
5
33
54

answered May 29 '22 at 18:40

Abhishek Sharma

2,485
1
21
35

1

This does not answer the question. The question was how to programatically focus / blur a TextInput. Not how to react to it being focused. – geisterfurz007 May 29 '22 at 19:13
You should reframe your question and add some more clarity to it :) – Abhishek Sharma May 29 '22 at 19:27
It's not my question. – geisterfurz007 May 29 '22 at 19:29
1

I submitted an edit to your answer; the question uses a functional component, so storing the method in "this" wouldn't work. Also, the ref stores the instance in `.current`, not on the variable directly. – Abe May 29 '22 at 19:34
Thanks everyone, I am very new to programming. You all answered my questions just within an hour. It is very helpful to me. I will use useRef hook incase I need to use these methods in my project. – Harshit sharma May 29 '22 at 20:04

score 0 · Accepted Answer · answered May 29 '22 at 19:26

To use these imperative methods, store the component instance in a React ref.

const UselessTextInput = () => {
  const textInputRef = React.useRef(null); // new
  const [text, onChangeText] = React.useState("Useless Text");
  const [focused, setFocused] = React.useState(null);
  
  return (
    <SafeAreaView>
      <TextInput
        ref={textInputRef}
        style={styles.input}
        onChangeText={onChangeText}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        value={text}
      />
      {/* New */}
      <TouchableOpacity onPress={() => textInputRef.current?.focus()}>
        <Text>Focus text input</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

You can read more about this in the "Refs and the DOM" section of the React docs.

Thanks @Abe, I am very new to programming and stack over flow. I will use useRef hook incase I need to use these methods in my project. — Harshit sharma, May 29 '22 at 20:05

Harshit sharma · Answer 3 · 2022-05-29T20:26:21.777

import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
} from "react-native";
import React, { useRef, useState } from "react";

export default function App(props) {
  const textInputRef = useRef(null);
  const [text, setText] = useState("Useless Text");
  const [focused, setFocused] = useState(null);

  return (
    <View style={styles.container}>
      <TextInput
        ref={textInputRef}
        style={styles.input}
        onChangeText={setText}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        value={text}
      />
      <TouchableOpacity
        style={styles.button}
        onPress={() => textInputRef.current.clear()}
      >
        <Text>Clear text input</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  button: {
    backgroundColor: "dodgerblue",
    margin: 50,
    padding: 20,
    borderRadius: 20,
  },
  input: {
    backgroundColor: "green",
    height: 100,
    width: 300,
    borderRadius: 25,
    textAlign: "center",
  },
});

I have used this finally just for reference of other users.

How can I access methods of react native built in components?

3 Answers3