React Native Important Concepts

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. })

React Native tutorial

What is React Native?

  • React native is the framework for building native mobile apps using javascript and react library.
  • It is used to create cross platform native apps (IOS/ANDROID)
  • React native basically uses all the concept of react.js in terms of implementing in the code.

 

REACT NATIVE Vs Hybrid apps

 

  • React native apps are different from hybrid apps
  • Hybrid apps run in webview.
  • Ionic , cordova, phonegap framework are used to create hybrid apps.
  • React Native apps are based upon native app concept just like objective c, swift.
  • Are made using building block concept so it is faster and safer as compared to hybrid apps.

Benefits of React Native

  • Apps using react native are faster.
  • Easier to code.
  • It uses javascript and react.js to make cross platform apps(android and ios)
  • Code once.
  • Open source library to make apps.

UI Elements In React Native

  • React native apps have look and feel of the native app as compared to hybrid app which have browser based app like look and feel.
  • Touchable Elements : Just like apps build in objective c.
  • List view
  • Scroll view
  • Alerts
  • Modals
  • Progress Bars
  • Status Bars
  • TabBarIOS (Exclusive for IOS)
  • ToolbarAndroid (Exclusive for Android)
  • Slider
  • TextInput
  • Switch