What is textinput?

React native Component to take user inputs

Examples

Convert text to Pizza


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

const TranslateComp = () => {
    const [text, setText] = useState('');           //2
    return (
        <View style={{padding:10}}>              //3
            <TextInput                           //4
                style={{height: 40}}
                placeholder="Write anything!"
                onChangeText={newText => setText(newText)}
            >
            </TextInput>

            // This is another element shown below textinput
            <Text>           //5
            {
                text.         //text variable, filled from textInput
                split(' ')    //split text into substring using seperator
                .map(w => w && '๐Ÿ•')    //For each word=w, and it with๐Ÿ•
                .join()     //Adds all the elements of an array into a 
                            //string, separated by the specified separator string.
            }
            </Text>
        
        </View>
    );
}
const Main = () => {
    return (
        <>
            <TranslateComp/>
        </>
    );
};

export default Main;
1. import TextInput from react-native
2. Local variable to store text entered in textinput textbox
3. View Component with padding=10. padding defines space b/w page top and box
4. define textinput inside View
Props of textInput
  1. onChangeText(Prop for TextInput): triggers a function every time the text in the input field changes. 

onChangeText={
    //text => call_this_function
    newText => setText(newText)
}
onChangeText(text) function returns user entered text in newText. call setText(newText).
Now, text = newText
5. This is another element shown below TextInput. We will show text variable in this component.