react native
Synopsis
React Native is an SDK for building native mobile apps using JavaScript. It’s based on React, a popular front-end library for building user interfaces using composable components created by Facebook. Unlike the popular hybrid frameworks such as Ionic, React Native doesn’t use a webview which means your mobile application is not a web application that has access to native device features like the case of Ionic but a native app that uses native components in both Android and iOS. React Native is essentially a bridge that allows your JavaScript app to access native device features and UI components.
Features
Following are the features of React Native −
- React − This is a Framework for building web and mobile apps using JavaScript.
- Native − You can use native components controlled by JavaScript.
- Platforms − React Native supports IOS and Android platform.
Difference between React and React Native
React | React Native |
---|---|
It is used for developing web applications. | It is used for developing mobile applications. |
It uses React-router for navigating web pages. | It has a built-in navigator library for navigating mobile applications. |
It uses HTML tags. | It does not use HTML tags. |
It provides high security. | It provides low security in comparison to ReactJS. |
In this, the virtual DOM renders the browser code. | In this, Native uses its API to render code for mobile applications. |
Installing Expo CLI
Expo CLI is a command-line utility that allows to use Expo tools.
npm install -g expo-cli
Creating a React Native Project
Run the following command to create a new React Native project called “AwesomeProject”:
npx create-expo-app AwesomeProject
cd AwesomeProject
npm start # you can also use: npx expo start
Function Components
import React from 'react';
import { Text, View } from 'react-native';
const HelloWorldApp = () => {
return (
<View style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}>
<Text>Hello, world!</Text>
</View>
);
}
export default HelloWorldApp;
Class Components
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<View style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}>
<Text>Hello, world!</Text>
</View>
);
}
}
export default HelloWorldApp;
Props
Most components can be customized when they are created, with different parameters. These creation parameters are called props.
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
center: {
alignItems: 'center'
}
})
const Greeting = (props) => {
return (
<View style={styles.center}>
<Text>Hello {props.name}!</Text>
</View>
);
}
const LotsOfGreetings = () => {
return (
<View style={[styles.center, {top: 50}]}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
export default LotsOfGreetings;
State
Unlike props that are read-only and should not be modified, the state allows React components to change their output over time in response to user actions, network responses and anything else.
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
const App = () => {
const [count, setCount] = useState(0);
return (
<View style={styles.container}>
<Text>You clicked {count} times</Text>
<Button
onPress={() => setCount(count + 1)}
title="Click me!"
/>
</View>
);
};
// React Native Styles
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
List View
React Native ListView is a view component that contains the list of items and displays it in a vertically scrollable list.
export default class MyListComponent extends Component {
constructor() {
super();
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(['Android','iOS', 'Java','Php', 'Hadoop', 'Sap', 'Python','Ajax', 'C++']),
};
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={
(rowData) =>
<Text style={{fontSize: 30}}>{rowData}</Text>} />
); }
}
Touchable components
Tapping gestures can be captured by Touchable components and can display feedback when a gesture is recognized.
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';
export default class Touchables extends Component {
_onPressButton() {
alert('You tapped the button!') }
_onLongPressButton() {
alert('You long-pressed the button!')
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight onPress={this._onPressButton} underlayColor="white">
<View style={styles.button}>
<Text style={styles.buttonText}>TouchableHighlight</Text>
</View>
</TouchableHighlight>
);}
}
Flat List components
The FlatList component displays similarly structured data in a scrollable list. It works well for large lists of data where the number of list items might change over time.
import React, { Component } from 'react';
import { AppRegistry, FlatList,
StyleSheet, Text, View,Alert } from 'react-native';
export default class FlatListBasics extends Component {
renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "100%",
backgroundColor: "#000",
}}
/>
);
};
//handling onPress action
getListViewItem = (item) => {
Alert.alert(item.key);
}
render() {
return (
<View style={styles.container}>
<FlatList
data={[
{key: 'Android'},{key: 'iOS'}, {key: 'Java'},{key: 'Swift'},
{key: 'Php'},{key: 'Hadoop'},{key: 'Sap'},
]}
renderItem={({item}) =>
<Text style={styles.item}
onPress={this.getListViewItem.bind(this, item)}>{item.key}</Text>}
ItemSeparatorComponent={this.renderSeparator}
/>
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);
Routing with React Navigation in React Native
One of the popular libraries for routing and navigation in a React Native application is React Navigation.
This library helps solve the problem of navigating between multiple screens and sharing data between them.
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
const MyStack = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'Welcome' }}
/>
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};