Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to implement textinput in react native, where you can get example of save value from text input and show to users screen.

When we want data from users like their detail then we need text input where user can write detail.

React Native provide TextInput to show input area and today we will how to use user entered data in react native, like save in state and show to user screen and others thing

Let start today topic how to get value from textinput in react native

Textinput example in react native class component

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

class TextInputExample extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            text: ''
        }
    }

    render() {
        return (
            <View style={{padding: 10}}>
                <TextInput
                    style={{height: 40}}
                    placeholder="Type here to show user!"
                    onChangeText={text => this.setState(text)}
                    defaultValue={text}
                />
                <Text style={{padding: 10, fontSize: 42}}>
                    {this.state.text}
                </Text>
            </View>
        );
    }
}

export default TextInputExample;

Textinput example in react native functional component

import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';

const TextInputExample = () => {
  const [text, setText] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Type here to show user!"
        onChangeText={text => setText(text)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text}
      </Text>
    </View>
  );
}

export default TextInputExample;

Output

react native textinput get value example

Thanks For Reading…