React Native TextInput

React Native

About Lesson

In this React Native lesson we are going to learn about React Native TextInput, so this is another built in component in react native.

This is my ReactInput.js file.

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

function ReactInput() {
   
    const [name,setName] = useState('')
    const [email,setEmail] = useState('')

    return (
        <View style = {{flex:1, padding:50}}>
            <TextInput
            placeholder = "Please enter first name"
            value = {name}
            onChangeText = {(text) => setName(text)}
            />

            <TextInput
            placeholder = "Please enter email"
            value = {email}
            onChangeText = {(text) => setEmail(text)}
            />

            <Text 
            style = {{padding:30, fontSize:20, color:"red"}}>
                {name}
                
                </Text>
            <Text style = {{padding:30, fontSize:20, color:"green"}}>
                {email}
                </Text>
        </View>
    )
}

export default ReactInput

import React, {useState} from 'react'

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

function ReactInput() {

const [name,setName] = useState('')

const [email,setEmail] = useState('')

return (

<TextInput

placeholder = "Please enter first name"

value = {name}

onChangeText = {(text) => setName(text)}

<TextInput

placeholder = "Please enter email"

value = {email}

onChangeText = {(text) => setEmail(text)}

<Text

style = {{padding:30, fontSize:20, color:"red"}}>

{name}

</Text>

{email}

</Text>

</View>

)

}

export default ReactInput

First i have created some states using useState hooks.

    const [name,setName] = useState('')
    const [email,setEmail] = useState('')

1 2	const [name,setName] = useState('') const [email,setEmail] = useState('')

These are my two TextInput , and you can see that i have added two textinput, also i have added a value and onChangeText for my inputs.

           <TextInput
            placeholder = "Please enter first name"
            value = {name}
            onChangeText = {(text) => setName(text)}
            />

            <TextInput
            placeholder = "Please enter email"
            value = {email}
            onChangeText = {(text) => setEmail(text)}
            />

<TextInput

placeholder = "Please enter first name"

value = {name}

onChangeText = {(text) => setName(text)}

<TextInput

placeholder = "Please enter email"

value = {email}

onChangeText = {(text) => setEmail(text)}

I have created two Text, when i write something in input field i want to change the Text.

 <Text 
   style = {{padding:30, fontSize:20, color:"red"}}>
        {name}
                
     </Text>
            <Text style = {{padding:30, fontSize:20, color:"green"}}>
                {email}
                </Text>

<Text

style = {{padding:30, fontSize:20, color:"red"}}>

{name}

</Text>

{email}

</Text>

This is my App.js file.

import React from 'react';

import ReactInput from './components/ReactInput';



export default function App() {
  return (
 
    <ReactInput/>
  
  );
}

import React from 'react';

import ReactInput from './components/ReactInput';

export default function App() {

return (

);

}

Run your application and this is the result.