04-Apr-2023
.
Admin
Hi Guys,
In this blog, I will explain you how to create textinput in react native. You can easily create text input in react native. First i will import namespace TextInput
Here, I will give you full example for simply display textinput box using react native as bellow.
Step 1 - Create project
In the first step Run the following command for create project.
expo init TextInput
Step 2 - App.js
In this step, You will open App.js file and put the code.
import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<h1 style = {{ marginBottom : 75 }}>React Native Text Input - nicesnippets.com</h1>
<Text style = {{ marginLeft : -155, color : '#fff' }}>Name :</Text>
<TextInput style = {styles.input}
placeholder = 'Enter Name'
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'purple',
alignItems: 'center',
color: 'white',
justifyContent: 'center',
},
input: {
borderWidth : 1,
borderColor : '#c1c1c1',
borderRadius : 3,
width : 200,
height : 35,
padding : 10,
margin : 10,
color: '#fff',
}
});
Step 3 - Run project
In the last step run your project using bellow command.
expo start --web
Now run your project in browser.
port : http://localhost:19006/
It will help you...
#React Native