In this tutorial we will learn about important concepts of react native. The important concept of react native that we will discuss in this tutorial are:

  • State
  • Props
  • Styling
  • Flexbox
First we will discuss about State in React Native
State :
  • State in react native is used to manage the data inside the component.
  • State can be updated at any time. So we call state as mutable.

Example of State :

  1. import React, { Component } from ‘react’;
  2.  import { Text, View } from ‘react-native’;
  3. class Stateexample extends Component {
  4. state = {
  5. myState: ‘Testing’
  6. }
  7. render() {
  8. return (
  9. <View> <Text> {this.state.myState} </Text> </View> );
  10. }
  11. }
Props :
  • The difference between props and state is that props can not be updated
  • State can be updated at any time in the react native code.

Styling in React Native :

1.You can style your component in react using inline style as well as using stylesheet

2 . Just like we do in other languages

  1. import React, { Component } from ‘react’
  1. import { Text, View, StyleSheet } from ‘react-native’
  2. const testcomp= (props) ⇒ {
  3. return (
  4. <View>
  5. <Text style = {styles.mystyle}> {props.myState} </Text> </View>
  6. )
  7.  }
Styles Example :
  • 1.const styles = StyleSheet.create (
  • 2.{
  • mystyle:
  • 4.{ marginTop: 20, textAlign: ‘center’, color: ‘blue’, fontWeight: ‘bold’, fontSize: 20 }
  • 5.}
  • )
Flexbox in React Native :

1.It is used to accommodate different screensize in react native.

2.flexbox offers three main properties − flexDirection justifyContent and alignItems.

  1. 3.const styles = StyleSheet.create (
  2. 4.{
  3.  maincont: {
  4. flexDirection: ‘column’, justifyContent: ‘center’, alignItems: ‘center’, backgroundColor: ‘grey’, height: 600 },
  5. })

20743total visits,2visits today