React Native

React Native lets you build mobile apps using only JavaScript.

features:

   React:Framework for building web and mobile apps using JavaScript.

   Native:You can use native components controlled by JavaScript.

   Platforms:Supports IOS and Android platform

Advantages:

    You can use existing JavaScript knowledge to build native mobile apps.

    You can share most of your code on different platforms.

    Community around React and React Native is large, and you will be able to find any answer you need.

Limitations:

    If you want to create native functionality which isns't created yet, you will need to write some platform specific code.

Using listViews component as a example:

    dataSource will be used as a model to our list. We will create it in our container component.

   renderRow will take each element from dataSource array and render it on screen. Since it renders elements, we will use it in presentational component.

   rowHasChanged is function used to determine when the row has changed.

   Our container component will pass dataSource to presentational component.

src/components/myComponent/MyContainerComponent

import React, { Component } from 'react';

import {
   ListView,
   View
} from 'react-native';

import MyPresentationalComponent from './MyPresentationalComponent'

export default class MyContainerComponent extends Component {
   constructor(props) {
      super(props);
      const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      this.state = {
         dataSource: ds.cloneWithRows([
            'Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7', 'Item8', 
               'Item9', 'Item10'
         ])
      };
   }
   render() {
      return (
         <View>
            <MyPresentationalComponent dataSource = {this.state.dataSource} />
         </View>
      );
   }
}

Presentational component can use renderRow function to render all items passed as {props.dataSource}.

src/components/myComponent/MyContainerComponent

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

export default MyPresentationalComponent = (props) => {
   return (
      <View>
         <ListView
            style = {styles.listContainer}
            dataSource = {props.dataSource}
            renderRow = {
               (rowData) => (
                  <Text style = {styles.listItem}>
                     {rowData}
                  </Text>
               )
            }
         />
      </View>
   )
}

const styles = StyleSheet.create ({
   listContainer: {
      paddingTop: 22
   },
   listItem: {
      fontSize: 30,
      fontWeight: 'bold',
      textAlign: 'center',
   }
})

When we run the app, we will see the following screen −

Output

Note − We are refactoring ListView in two components to be able to useMyContainerComponent as a source of data and logic andMyPresentationalComponent for rendering.