React native
By: Abdulaziz Shanan
Tags: React Native

What is React Native?

React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s built on React, Facebook’s JavaScript library for building user interfaces, but as an alternative of targeting the browser, it aims mobile platforms. In other words: web developers can now write mobile applications that look and feel genuinely “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to at the same time develop for both Android and iOS.

Like React for the Web, React Native applications are written using a combination of JavaScript and XML markup, known as JSX. Then, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, not WebView, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.

React Native currently supports both iOS and Android, and has the ability to expand to future platforms as well. The vast majority of the code we write will be cross-platform. And yes, you can really use React Native to build production-ready mobile applications! Some anecdote Facebook, Palantir, and TaskRabbit are already using it in production for user-facing applications.

For developers accustomed to working on the Web with React, this means you can write mobile apps with the performance and look and feel of a native application, while using familiar tools. React Native also represents an improvement over normal mobile development in two other areas: the developer experience and cross-platform development capability.

React Native translates your markup to real, native UI elements, leveraging existing means of rendering views on whatever platform you are working with. Additionally, React works separately from the main UI thread, so your application can maintain high performance without sacrificing capability. The update cycle in React Native is the same as in React: when props or state change, React Native re-renders the views. The major difference between React Native and React in the browser is that React Native does this by leveraging the UI libraries of its host platform, rather than using HTML and CSS markup.

React Native props

The properties of React Native components are simply declared as props. In React Native, most of the components can be modified at the time of their creation with different parameters. These parameters are known as props. They are immutable, and they cannot be changed

Props are Unchangeable — Immutable

One of the examples of props is a source property if Image component which controls the image is demonstrated over the device screen.

import React, { Component } from ‘react’;

import {Platform, StyleSheet, Image, Text, View } from ‘react-native’;

export default class App extends Component<{}> {

render() {

let imagePath = { uri: ‘https://facebook.github.io/react-native/img/header_logo.png'};

return (

<View style={styles.container}>

<Text style={styles.welcome}>Welcome to React Native!</Text>

<Image source={imagePath} style={{width: 250, height: 250}} />

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

backgroundColor: ‘#a7a6a9’,

},

welcome: {

fontSize: 30,

textAlign: ‘center’,

margin: 20,

}

});

OUTPUT:

Using props in our own Component

We can also use props in our components. A single component can be used in many different places in the app by making slightly different properties in each place. To implement the props in our component, this.props is applied followed by the property.

For instance, one of the basic React Native components is Text. When we create a Text component, we can use a prop “name” as props to control its appearance. We also apply the StyleSheet to the component which is used as our component.

App.js

import React, { Component } from ‘react’;

import { StyleSheet, Text, View } from ‘react-native’;

class ChildClass extends Component {

render() {

return (

<View style={{alignItems: ‘center’}}>

<Text style={styles.welcome}>Hello {this.props.name}!</Text>

</View>

);

}

}

export default class ParentsClass extends Component {

render() {

return (

<View style={{alignItems: ‘center’}}>

<ChildClass name=’Ashu’ />

<ChildClass name=’Aman’ />

<ChildClass name=’Max’ />

</View>

);

}

}

const styles = StyleSheet.create({

welcome: {

fontSize: 30,

}

});

// skip this line if using Create React Native App

//AppRegistry.registerComponent(‘MyReactNativeApp’, () => ParentsClass);

OUTPUT:

React Native state

There are two types of data that control a component: props and state . props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we must use state .

State works differently when compared to props . State is internal to a component, while props are passed to a component.

In general, you should initialize state in the constructor, and then call setState when you want to change it.

State can Change — Mutable

So, when can state be used?

Anytime there is data that is going to change within a component, state can be used.

In this example of state data in which we interchange the Text value “Show” and “Hide” to show and hide the input password.

Create three state variables that will be changed by clicking the Text component defined as a state. Clicking the Text component calls the handleToggle function, and the current state of Boolean variable “isPasswordVisible” is assigned in it. Here, if the condition checks the value of “isPasswordVisible” and proceeds accordingly.

import React, { Component } from ‘react’;

import {StyleSheet, Text, View, TextInput, TouchableOpacity} from ‘react-native’;



export default class App extends Component {

state: {

password: string,

isPasswordVisible: boolean,

toggleText: string,

}

constructor(props: Props) {

super(props);

this.state = {

password: ‘’,

isPasswordVisible: true,

toggleText: ‘Show’,

};

}

handleToggle = () => {

const { isPasswordVisible } = this.state;

if (isPasswordVisible) {

this.setState({ isPasswordVisible: false });

this.setState({ toggleText: ‘Hide’ });

} else {

this.setState({ isPasswordVisible: true });

this.setState({ toggleText: ‘Show’ });

}

};

render() {

return (

<View style={styles.container}>

<TextInput

secureTextEntry={this.state.isPasswordVisible}

style={{ width: 400, height: 50, backgroundColor: ‘#a7a6a9’, color: ‘white’, fontSize: 20 }}

/>

<TouchableOpacity onPress={this.handleToggle}>

<Text style={{fontSize: 20}}>{this.state.toggleText}</Text>

</TouchableOpacity>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

}

});

OUTPUT: