# How to Programmatically Set Focus to TextInput in React Native: A Complete Guide

> Learn how to programmatically set focus to a TextInput in React Native using a ref, forwarding the focus call to the native platform for seamless user experience. Get the complete guide.

- Repository: [Meta/react](https://github.com/facebook/react)
- Tags: how-to-guide
- Published: 2026-02-16

---

**Use a ref to access the TextInput component and call the `.focus()` method, which React Native forwards to the native platform via the TextInputState module.**

When building forms in React Native, you often need to programmatically set focus to a TextInput component to guide user input or create custom navigation flows. According to the facebook/react source code, this is accomplished through a ref-based API that delegates focus commands to the native renderer via the TextInputState module.

## Understanding the Focus Architecture in React Native

React Native's TextInput is a **host component** that maps to native views like `RCTTextInput` on iOS or `AndroidTextInput` on Android. When you call `.focus()` on a TextInput ref, the request flows through several layers of the React Native renderer.

In [`packages/react-native-renderer/src/ReactNativeFiberHostComponent.js`](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js), the host component implements the `focus()` method at lines 54-56:

```javascript
focus() {
  TextInputState.focusTextInput(this);
}

```

This delegates the actual focus operation to the **TextInputState** module, which interfaces with the platform-specific native code to make the input field the first responder.

## How to Programmatically Set Focus Using Refs

To programmatically set focus to TextInput in React Native, you need to create a ref, attach it to the TextInput component, and call the `focus()` method on that ref.

### Functional Component with Hooks

Here is a complete example using React hooks and functional components:

```tsx
import React, {useRef, useEffect} from 'react';
import {TextInput, View, Button} from 'react-native';

export default function FocusDemo() {
  const inputRef = useRef<TextInput>(null);

  // Focus as soon as the component mounts
  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  const focusOnPress = () => {
    inputRef.current?.focus();
  };

  return (
    <View>
      <TextInput
        ref={inputRef}
        placeholder="Tap the button to focus"
        style={{borderWidth: 1, padding: 8, margin: 10}}
      />
      <Button title="Focus TextInput" onPress={focusOnPress} />
    </View>
  );
}

```

In this example, `useRef` creates a reference to the TextInput. The optional chaining operator `?.` ensures safe access to the `focus()` method.

### Class Component Approach

For class components, use `React.createRef()`:

```tsx
import React from 'react';
import {TextInput, View, TouchableOpacity, Text} from 'react-native';

export default class FocusDemoClass extends React.Component {
  inputRef = React.createRef<TextInput>();

  componentDidMount() {
    // Optionally focus when the component appears
    this.inputRef.current?.focus();
  }

  focusInput = () => {
    this.inputRef.current?.focus();
  };

  render() {
    return (
      <View>
        <TextInput
          ref={this.inputRef}
          placeholder="Press the box to focus"
          style={{borderWidth: 1, padding: 8, margin: 10}}
        />
        <TouchableOpacity onPress={this.focusInput}>
          <Text>Focus TextInput</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

```

Both approaches rely on the same underlying mechanism where the ref provides access to the host component's `focus()` method.

## Key Source Files in the React Native Renderer

The programmatic focus functionality is implemented across several files in the facebook/react repository:

- **[`packages/react-native-renderer/src/ReactNativeFiberHostComponent.js`](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js)**: Contains the `focus()` method at lines 54-56 that delegates to `TextInputState.focusTextInput(this)`.

- **[`packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/TextInputState.js`](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/TextInputState.js)**: Provides the mock implementation of `focusTextInput` and `blurTextInput` helpers used by the renderer.

- **[`packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js`](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js)**: Exposes `TextInputState` to the renderer internals.

- **[`packages/react-native-renderer/src/ReactFiberConfigNative.js`](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactFiberConfigNative.js)**: Defines the native view types treated as text inputs (e.g., `AndroidTextInput`, `RCTMultilineTextInputView`) at lines 276-278.

These files demonstrate how React Native bridges JavaScript focus calls to native platform APIs.

## Summary

- To programmatically set focus to TextInput in React Native, create a ref using `useRef` or `createRef`, attach it to the TextInput component, and call `ref.current.focus()`.

- The `focus()` method is implemented in [`ReactNativeFiberHostComponent.js`](https://github.com/facebook/react/blob/main/ReactNativeFiberHostComponent.js) and delegates to the `TextInputState` module, which interfaces with native platform APIs.

- This approach works identically in both functional components with hooks and class components.

- The underlying architecture treats TextInput as a host component that maps to native views like `RCTTextInput` (iOS) or `AndroidTextInput` (Android).

## Frequently Asked Questions

### How do I autofocus a TextInput when the screen loads?

Use the `useEffect` hook with an empty dependency array to trigger focus after the component mounts. Call `inputRef.current?.focus()` inside the effect. This ensures the native view has been created before attempting to set focus.

### Why is my TextInput not focusing programmatically?

Common causes include calling `focus()` before the component mounts, the ref not being properly attached to the TextInput, or the input being inside a modal or overlay that hasn't finished rendering. Ensure you use optional chaining (`?.`) and trigger focus after mount using `useEffect` or `componentDidMount`.

### Can I programmatically blur a TextInput as well?

Yes. React Native provides a `.blur()` method on the TextInput ref that works identically to `.focus()`. According to the source code in [`ReactNativeFiberHostComponent.js`](https://github.com/facebook/react/blob/main/ReactNativeFiberHostComponent.js), the `blur()` method delegates to `TextInputState.blurTextInput(this)`, removing focus from the native input.

### Does this work with third-party input libraries?

Most third-party React Native input libraries expose the same ref-based API and forward refs to the underlying native TextInput. You can typically call `.focus()` on their refs as well, though you should verify the library's documentation to ensure proper ref forwarding to the host component.