logo React Native
Created by Roman Govin

Agenda

What is React Native?

  • JavaScript framework for building iOS and Android mobile apps.
  • Based on popular JavaScript Web framework called React.
  • Created by Facebook. Firstly release iOS version on March 2015 and Android version on September 2015
  • Writing the app by using JavaScript and XML-esque markup (JSX)
  • React Native bridges and invokes the Native rendering API in Objective-C (iOS) and Java (Android)

What is React?

  • Declarative, Efficient, and Flexible JavaScript Library that Building User Interface on Website.
  • React Native is rooted from React.
  • React treats every thing as a Component

class ShoppingList extends React.Component {
    render() {
        return (
            

                
Shopping List for {this.props.name}

                
    
                    
  • Instagram
    • 
                    
  • WhatsApp
    • 
                    
  • Oculus
    • 
                

            

        )
    }
}
A React Component

How does React Native Work?

logo
  • Use Virtual Dom of React
  • React can render to different targets
  • React Native event bridge
  • Different rendering cycle
  • Use separated thread
virtual-dom Performing calculations in the Virtual DOM limits rerendering in the browser’s DOM
components-scheme React can render to different targets

React Native Architecture

The JavaScript Realm
JavaScript JSCore (VM) Single Thread
arrow
The Native Realm
ObjC+Swift / Java Main UI Thread Other BG Threads

Rendering Lifecycle

components-scheme Mounting Component components-scheme Re-rendering Component

Async Rules

  • Good benefits of JavaScript is their asynchronous natures.
  • React Native is running on separated thread using JavaScript asynchronous call via the event bridge to invokes the host native platform’s underlying APIs and UI elements. (Objective-C, Java)
  • Since, React Native don’t run on the main UI rendering thread, it can do asynchronous call without impact user’s experience (such as delay).

How does React Native Draw?

  • React for the Web, render normal HTML elements
  • React Native, render cross-platform (or platformspecific) native UI components.
React React Native
<div> <View>
<span> <Text>
<li>,<ul> <ListView>
<img> <Image>
Cross Platform (iOS, Android)
<DatePickerIOS> 

    <DataPicker
        data={this.state.date}
        mode="date"
        timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
    />
date-picker-os Platform Specific

Components examples

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

const ViewBoxesWithColorAndText = () => {
  return (
    
      
      
      Hello World!
    
    );
};
export default ViewBoxesWithColorAndText;

  • Basic Components

  • View
  • Text
  • Image
  • TextInput
  • ScrollView
  • StyleSheet

  • User Interface

  • Button
  • Picker
  • Switch

  • Others

  • ActivityIndicator
  • Alert
  • Animated
  • Dimensions
  • Modal
  • StatusBar
  • etc...

JSX

  • Combining JavaScript and XML-markup syntax to create view.
  • Single File Concept (Write down at Component Class), Not Seperate Files (Split HTML, CSS, JS)
  • Separation of concerns > Separation of technologies

// Define a style...
const HelloMessage = React.createClass({
    render: function(){
        // Instead of calling createElement, we return markup
        return 
Hello {this.props.name}
;
    };
});
// We no longer need a creatElement call here
React.render(<HelloMessage name="Bonnie" />, mountNode);
JSX (Underlined)
⇒ 


Hello Bonnie

Styling

  • In Web, We have CSS, necessary part of the Web.
  • In React Native, We have something similar to CSS, called Flexbox Layout Model.

// Define a style...
const style = {
    backgroundColor: 'white',
    fontSize: '16px'
};
// ...and then apply it.
const tv = (
    
        A styled Text
    );
                        

{ background-color : "white"}
⇓ 

{ backgroundСolor : 'white'}

StyleSheet


export default class Home extends Component {
 render() {
   return (
     
       Basic Header
     
   )
 }
const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 10,
    paddingVertical: 10
  },
  header: {
    fontSize: 12,
    fontFamily: 'Cochin'
  }
})

Useful links

Thanks!