React-native basics Text, Textinput with Styles

In this article, we learn React-native basics Text, Textinput with styles like Flex, JustifyContent, aliginItems, that will help you to create basics UI with proper alignment, before this, you must install react-native successfully so I request you to go through this tutorial 

Overview:

1. React-native Text
2. React-native Textinput

1. React-native create project

To create a new project run following command in terminal

react-native init ReactBasics   //<--Project Name

The new project will create

React-native Text

This is used to simply display text on the screen before moving forward you need to know that all components will work inside react-native View component as follows

<View>
<Text>Hellow world</Text>
</View>

I have made a project to introduce you more about this Text component so that you can understand easily

1. firstly import the following component Text

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

2. Now you can use Text inside View component in return method inside the render method as given below

export default class App extends Component<Props> {
  render() {
     return (
        <View style={styles.container}>
             <Text style={styles.welcome}>Welcome to React Basics!</Text>
            <Text style={styles.instructions}>To get started, edit App.js</Text>
        </View>
    );
  }
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#81D8D0',
 },
 welcome: {
   fontSize: 40,
   textAlign: 'center',
   margin: 10,
   color: '#F96161',
 },
 instructions: {
   textAlign: 'center',
   color: '#333333',
   marginBottom: 5,
 },
});

1. Flex:

As you see above style Flex: 1 given to the main view that mains it will spread to the whole screen as see below screenshots:

With Flex:

Without Flex:

To know more about Flex please visit to this link

2. justifyContent:

justifyContent used to align data vertically as below:

With justifyContent:

Without justifyContent:

There are 4 types of

1. justify-content: start Which aligns item at the beginning or start

2. justify-content: center Which aligns item at center position

3. justify-content: space-between Which add vertical space between two items

4. justify-content: space-around Which add equally space in all direction

5. justify-content: space-evenly Which add same space in all direction

alignItems align child view in cross direction that means, it parent view align vertically than alignItems align horizontally

2. Textinput:

To undestand Textinput see following code:

1st import TextInput as follows

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,TextInput} from 'react-native';

We are going to display enter data on screen for that we use onChangeText listener on TextInput which save data in the state make sure your state is defined in the constructor otherwise it will give an error

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,TextInput,Button,Alert} from 'react-native';

export default class App extends Component<Props> {

 constructor(props) {
    super(props);
    this.state = {
    Usrname: '',
   };
 }

render() {
    return (
     <View style={styles.container}>
      <View style={styles.inputContainer}>
       <TextInput style={styles.inputs}
         placeholder="Username"
         underlineColorAndroid='transparent'
         onChangeText={(email) => this.setState({Usrname: email})}/>
      </View>

      Text style={styles.welcome}>{this.state.Usrname}</Text>
   </View>
  );
 }
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#81D8D0',
 },
 welcome: {
   fontSize: 40,
   textAlign: 'center',
   margin: 10,
   color: '#f96161',
   fontWeight: 'bold',
 },
instructions: {
   textAlign: 'center',
   color: '#333333',
   marginBottom: 5,
 },
inputs:{
   height:45,
   marginLeft:16,
   borderBottomColor: '#FFFFFF',
   flex:1,
 },
inputContainer: {
   borderBottomColor: '#05C203',
   backgroundColor: '#FFFFFF',
   borderRadius:5,
   borderBottomWidth: 1,
   width:350,
   height:45,
   marginBottom:20,
   flexDirection: 'row',
   alignItems:'center'
 },
});

Output:

Thank you.. enjoy coding 🙂