How To Make Text Input Field In React Native?

TextInput is React Native’s core component. It allows the user to take the input. There are many Props (properties) that make, TextInput useful for us.

defaultValue : Used to show default value before value being changed by users.

For Example:
<TextInput defaultValue={tempText} />

onChangeText : This allows the user to take a function i.e. called every time the value changed.

For Example:
<TextInput 
  defaultValue={tempText} 
  onChangeText = {(text) => {setTempText(text); }}
/>

placeholder : It is used to show some text or anything into the Text Box, it will be displayed until the user clicks on to text box.

For Example:
<TextInput 
  placeholder="Please Enter Text Here"
  defaultValue={tempText}
  onChangeText = {(text) => {setTempText(text); }}
/>

style : As the name suggests, it will be used for styling purposes.

For Example:
<TextInput 
placeholder="Please Enter Text Here"
defaultValue={tempText}
onChangeText = {(text) => {setTempText(text); }}
style={styles.textInputStyle}/>

✍ Here, it stores the value of the text field into a state every time the user enters something.

Complete Code:(App.js)

import React from 'react';
import type {Node} from 'react';
import {
  SafeAreaView,
  TextInput,
  useColorScheme,
  StyleSheet
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

const App: () => Node = () => {
    const isDarkMode = useColorScheme() === 'dark';
    const [tempText, setTempText] = React.useState("");

    const backgroundStyle = {
         backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    };

    return (
       <SafeAreaView style={backgroundStyle}>
         <TextInput 
           placeholder="Please Enter Text Here"
           defaultValue={tempText}
           onChangeText = {(text) => {setTempText(text); }}
           style={styles.textInputStyle}/>
       </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    textInputStyle: {
        borderColor: "red",
        borderRadius: 10,
        borderWidth: 2
    }
})

export default App; 

Output:

Whooo! You have done it, great Job. I hope it helps you 🙂 If you like it, please share it with your friends to reach out to more people. If you want me to write on any specific topic, please leave it in the comment section.
Be safe. Happy Learning 🙂