Building Performant Cross-Platform Mobile Applications with React Native

Four of our developers attended Dreamforce 2018, where they acquired technical knowledge they shared with our team. This is the first of a series of technical posts, which we will share monthly with our blog’s readers. Enjoy them!

Building Performant Cross-Platform Mobile Applications with React Native

By Javier Sánchez
Salesforce Developer 

 

Features

  • It is a framework that allows developers to implement native apps for mobile devices using Javascript.
  • Minimum supported operating systems are: Android 4.1 (API 16) and> = iOS 8.0.
  • Render the apps using native views.
  • Direct access to all the APIs and views offered by native operating systems
  • Improved user experience and performance compared to other frameworks.
  • It is based on the components development.

Configuration of the environment

  • Have an updated version of Node.js installed
  • Install the npm module create-react-native-app -> npm install -g create-react-native-app
  • Use this utility to create our first project -> create-react-native-app RNHelloWorld
  • We start our app with the command: npm start

Props

  • Props allows you to pass information from one React component to another.
  • You can define your own props in your components.
  • The ‘native’ components have definite props.
  • The props are defined by the parent component and are fixed throughout the life cycle of the component.

 State

  • Generally initialized in the constructor
  • They are state variables.
  • The setState method is called when you want to change its value

 Render

  • The render () method tells the React engine what it will display on the screen.
  • It is a fundamental part of each component.
  • When extending from React.Component we tell the React engine that it is a component and we can use the render () method.

Component life cycles

 Life cycles are special functions, which allow us to execute functions or declare logic in a more shredded way, giving us more control over the entire rendering process of our components. The components are created, assembled, updated, and disassembled.

Creation

constructor (): this life cycle is executed when the component is instantiated. Here we can define your initial configuration. For example, configure the state or create connections with our functions.

Mounted

componentWillMount (): modifications in this life cycle do not cause updates to the component, and it is run just before the component is mounted or rendered. For example, a conditional change in the state.

render (): this method, at this stage, generates the initial graphical interface

componentDidMount (): Rendered interface, we have reached the end of the assembly stage. This method only runs once. It is perfect for working with asynchronous code, API calls, and delayed code with setTimeout.

Actualization

The changes in the state or in the properties are the cause of the updates in the components, generating an interface with the new values.

ComponentWillReceiveProps (nextProps): the first cycle in the update stage. It allows us to make changes to the component based on a change in the properties. The reason why this method receives the nextProps parameter, is to allow us to validate the change in the properties.

Upgrade

shouldComponentUpdate (): allows us to validate a change in the status or properties of the component by means of nextProps, this.props, nextState and this.state and return true or false to render the component again or not, respectively. By default, it always returns true.

componentWillUpdate (nextProps, nextState): executed when shouldComponentUpdate () returns true. The last changes are made before rendering the component again.

componentDidUpdate (prevProps, prevState): this is the last method of this stage. The component has been rendered with the new values. It is perfect to interact with the DOM.

Disassembled 

This is the last phase of the components. It consists of a single method that is invoked just before the component is destroyed or is removed from our interface.

componentWillUnmount (): its main functionality is to clean our component. For example, stop listening to events or cancel pending HTTP requests.

Components “out of the box” 

Basic components:

  • View: Fundamental block to create the interface of the application.
  • Text: Displays a text.
  • Image: Displays an image.
  • TextInput: Allows the user to enter text in a field.
  • Scrollview: Wrap the contents of the body in a scrolleable view.
  • Stylesheet: Allows you to style your application through CSS.

More components

User interface:

  • Button: Create a button.
  • Picker: Uses the default picker of the platform.
  • Slider: Allows the user to select a value within the range of the bar.
  • Switch: A Boolean component. Ex: on / off

Other components:

Flatlist, Alert, CameraRoll, Modal, iOS API’s, Android API’s.

 

Salesforce Mobile SDK

Salesforce Mobile SDK provides a large number of tools that allow creating mobile applications integrated with Salesforce in an easier way.

  • Identity and security
  • Smartstore Encrypted Database
  • SmartSync Data Framework
  • Mobile Service (Push notifications and more).

Navigation and debugging

React-Navigation is a community solution for inter-screen navigation that provides multiple types of navigation. Among them we can find

  • Stack Navigation
  • Tab Navigation
  • Drawer Navigation

It allows you to pass props to manipulate in the next screen.

React Native allows you to debug the Javascript code that runs on your device and place breakpoints just like in the Chrome browser.

 

React Native Documentation: https://facebook.github.io/react-native/

React Documentationhttps://reactjs.org

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.