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
- 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 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.
- Generally initialized in the constructor
- They are state variables.
- The setState method is called when you want to change its value
- 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.
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.
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.
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.
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.
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”
- 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.
- 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
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 Documentation: https://facebook.github.io/react-native/
React Documentation: https://reactjs.org