How to get TextInput value with React Native?

Sometimes, we want to get TextInput value with React Native.

In this article, we’ll look at how to get TextInput value with React Native.

How to get TextInput value with React Native?

To get TextInput value with React Native, we can get it from the onChangeText callback.

For instance, we write:

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

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

  return (
    <View>
      <TextInput
        onChangeText={(username) => setUsername(username)}
        value={username}
      />
      <Text>{username}</Text>
    </View>
  );
}

to set the onChangeText prop of the TextInput to a function that takes the input value as the argument.

In the function, we call setUsername to set the username value to the TextInput‘s value.

Therefore, when we type into the input, we see the same value displayed in the Text component.

Conclusion

To get TextInput value with React Native, we can get it from the onChangeText callback.