TextInput in React Native

what is TextInput?

A Fundamental Component which allows to get input from the user through keyboard in to the app. Lets see the props of TextInput:

1.onChangeText → that takes a function to be called every time whenever the text changes on the TextInput.

2.onSubmitEditing → that takes a function to be called when the text is submitted.

3.placeholder → display an hint to an user like which input has to be given on the TextInput Field.

4.placeholderTextColor → Applying color for hint of placeholder.

Let see an example of the TextInput which takes word and display on a Text

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

const App = () => {
    const [name, setName] = useState("")

    return (
    <SafeAreaView>
    <View>
    <TextInput
    style ={styles.input}
    placeholder = 'Type here to translate!'
    placeholderTextColor= "#fff"
    onChangeText={newText => setName(newText)}
    ></TextInput>
    <View style={{padding: 12}}>
    <Text style={{fontSize: 20, color: '#ff0000', fontStyle: 'italic'}}>Entered Content:</Text>
    <Text style={{fontSize: 20, color: '#000', fontStyle: 'italic'}}>{name}</Text>
    </View>
    </View>
    </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    input: {
            height: 60,
            margin: 12,
            borderWidth: 1,
            borderRadius: 15,
            fontSize: 20,
            padding: 10,
            color: 'green',
            backgroundColor: '#000'
    }
});

export default App;

Output run on Android Device: