Sometimes, we want to set the focus style for TextInput in React Native.

In this article, we’ll look at how to set the focus style for TextInput in React Native.

How to set the focus style for TextInput in React Native?

To set the focus style for TextInput in React Native, we can set the style in the focus and blur handlers.

For instance, we write:

import * as React from 'react';
import { TextInput, View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  const [backgroundColor, setBackgroundColor] = React.useState();

  return (
    <View>
      <TextInput
        onBlur={() => setBackgroundColor('yellow')}
        onFocus={() => setBackgroundColor('orange')}
        style={{
          backgroundColor,
        }}
        placeholder="Name"
      />
    </View>
  );
}

to set the onBlur and onFocus props to the blur and focus event handlers.

onBlur is called when the text input loses focus.

In the handler functions, we call setBackgroundColor to the background color of the text inputs.

And we set the style prop to the backgroundColor.

As a result, we see the background colors applied when we focus on and away from the text input.

Conclusion

To set the focus style for TextInput in React Native, we can set the style in the focus and blur handlers.