Navigate back to the homepage

How to get value from textinput in react native

Infinitbility
React Native
August 13th, 2021 · 1 min read
How to get value from textinput in react native

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';
3
4class TextInputExample extends React.Component {
5 constructor(props){
6 super(props);
7
8 this.state = {
9 text: ''
10 }
11 }
12
13 render() {
14 return (
15 <View style={{padding: 10}}>
16 <TextInput
17 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}
29
30export default TextInputExample;

Textinput example in react native functional component

1import React, { useState } from 'react';
2import { Text, TextInput, View } from 'react-native';
3
4const TextInputExample = () => {
5 const [text, setText] = useState('');
6 return (
7 <View style={{padding: 10}}>
8 <TextInput
9 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}
20
21export default TextInputExample;

Output

react native textinput get value example

Thanks For Reading…

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.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Tutorials

React Native

Categories

More articles from Infinitbility

How to force render in react native

How to force render in react native

React Native force render Example

August 12th, 2021 · 1 min read
How to get current date in react native

How to get current date in react native

React Native current date Example

August 12th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]