Introduction of React-native components

Introduction of React-native components like view, textinput, state, props.

To work with React-native you have to learn the Introduction of React-native components lets list out some of the components

• View
• TextView
• TextInput
• State
• Props
• FlatList
• StyleSheet
• Image
• Button
• ScrollView
• Picker
• Switch
• ActivityIndicator

1.View

This is the most important UI components of React-native UI building, View acts like a container that supports layout with style, flexbox, synthetic touch events, etc, it is good to add all components inside View, You can add nested child view inside the parent View

class Main extends Component {
  render() {
    return (
      <View
        style={{
          flexDirection: 'row',
          height: 200,
          padding: 50,
        }}>
        <View style={{backgroundColor: 'red', flex: 0.5}}>
           <Text>This is test view with flex 0.5</Text>
        </View>
        <View style={{backgroundColor: 'blue', flex: 0.4}}>
         <Text>This is test view with flex 0.4</Text>
        </View>
      </View>
    );
  }
}

2. TextView

TextView Component is used to display text like below, it also supports nested textView, styling, touch event

  <Text>This is test view with flex 0.4</Text>

To display text from state you have used curly braces like below:

 <Text>{this.state.title}</Text>

You can add style to TextView like below:

 <Text style={styles.baseText}>

or

 <Text style={{color: 'blue'}}>

You can add onPressEvent to TextView like below:

<Text style={{color: 'blue'}} onPress={this.onClick}>    // Method onClick

3. TextInput

TextInput use to inputting data from the user via keyboard, props provide several features like placeholder text(hint), different types of inputTypes, auto-correction, auto-capitalization, etc.

You have to use onChangeText event to read user input

 <View style={styles.inputContainer}>
          <TextInput style={styles.inputs}
              placeholder="Shop name*"
              keyboardType="address"
              underlineColorAndroid='transparent'
              onChangeText={(shopname) => this.setState({shopname})}/>
        </View>

you have to set shopname text value in a state like below:

onChangeText={(shopname) => this.setState({shopname})}

4. State

There are two types to control components data in react-native one is state and props, let’s look at the state, the state is mutable, this means the state can change in the feature you can assign the different value at run time, and you can define the state in the constructor like below:

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

export default class Login extends Component<Props> {

 constructor(props) {
    super(props);
     this.state = {
      username: "Saurabh"
     }
 }

componentDidMount(){
     this.setState({
      //Setting the data source
      username: 'changed data',
    });
   
  }

 render() {

    return (
       <View style={styles.inputContainer}>
         <Text>this.state.username</View>
       </View>
 )
}

}

In the above example, We change username in the constructor and then assign different value in componentDidMount

5. Props

Props are immutable, this means it cannot be changed, the component receives props from their parent and you can create your components with props, using Props you can use same components multiple time in different places in your app

// Parent 
export default class ParentClass extends React.Component {
  render () {
    return (
     <View>
     	 <Heading message={'This is parent class'} object={this.state.object}/>
     </View>
    )
  }
}

// Child component
export default class ChildeClass extends React.Component {
  render () {
    return (
      <View>
        <Text>data from parent: {this.props.message}</Text>
        <Text>data from parent: {this.props.object.title}</Text>
      </View>
    )
  }
}

As you can see in the above example parent class calling child class and pass the message as a props you can also send object from props

6. FlatList

Please check this post to learn FlatList

I will post another post for remaining components, thank you, stay connected