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
1import React from 'react';2import { View, Text, TextInput } from 'react-native';34class TextInputExample extends React.Component {5 constructor(props){6 super(props);78 this.state = {9 text: ''10 }11 }1213 render() {14 return (15 <View style={{padding: 10}}>16 <TextInput17 style={{height: 40}}18 placeholder="Type here to show user!"19 onChangeText={text => this.setState(text)}20 defaultValue={text}21 />22 <Text style={{padding: 10, fontSize: 42}}>23 {this.state.text}24 </Text>25 </View>26 );27 }28}2930export default TextInputExample;
Textinput example in react native functional component
1import React, { useState } from 'react';2import { Text, TextInput, View } from 'react-native';34const TextInputExample = () => {5 const [text, setText] = useState('');6 return (7 <View style={{padding: 10}}>8 <TextInput9 style={{height: 40}}10 placeholder="Type here to show user!"11 onChangeText={text => setText(text)}12 defaultValue={text}13 />14 <Text style={{padding: 10, fontSize: 42}}>15 {text}16 </Text>17 </View>18 );19}2021export default TextInputExample;
Output

Thanks For Reading…
Follow me on Twitter
Join our email list and get notified about new content
No worries, I respect your privacy and I will never abuse your email.
Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.