How to select whole text of input field when focused in React Native?

If you want to provide a functionality where user can easily copy the text of input field by focusing it, then you need to use selectTextOnFocus prop of TextInput.

This is a feature which is best suited when we want users to copy email ids, urls, phone numbers, quotes, citations, script codes etc. from input fields without manually selecting the text.

Selecting text in mobiles is always difficult because people need to long press the input field and then use slider to select text. If we know that user has to copy the text then why don’t we auto select it and let them just copy it?

To solve this problem, React Native provides selectTextOnFocus=true prop in TextInput component. It works with both Android and iOS.

Code Example

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

const SelectionOnFocusTextInput = () => {
  const [text, onChangeText] = React.useState("https://akashmittal.com");

  return (
    <SafeAreaView>
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          onChangeText={onChangeText}
          value={text}
          selectTextOnFocus={true}
        />
      </View>
    </SafeAreaView>
  );
};

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

export default SelectionOnFocusTextInput;

Output –

From the image you can see that in both iOS and Android phones the text is automatically selected as soon as I clicked in the input fields. Although, I found that iOS is showing contextual menu to select all text while Android is showing the selection.

In the code we are setting selectTextOnFocus={true} in line 14.

Live Demo

Conclusion

In conclusion, you can auto select the whole text of input field using selectTextOnFocus=true prop of TextInput component. It works in both iOS and Android but on iOS the behavior is slightly different. It shows contextual menu to select the text there.