We’re React Native Wizards!

Feedback/highlighting And Cancel-ability Should Be There In Gesture Responder System

Feedback/highlighting – let the user know what is handling their touch, and what will happen when they release the gesture. Cancel-ability- when performing an action, let the user to abort it mid-touch by dragging their finger away. These features make users feel more comfortable using an app, because it lets people experiment and interact without the fear of making mistakes.

Optimize React Native Images And Store It In Cloud Storage

Optimizing React Native images should be your higher priority, whatever your requirements are. So, resize the images locally and upload the images to cloud storage like s3 by the server and get the cdn link and return them back using an API. In this process, you can load the images in a faster way.

Manage Static Image Resources

React Native integrates the images and other media assets in such a way that it is supported in your iOS and Android apps. To add a static image in your app, you have to do it in such a way that the image name in require has to be known statically.

 // BAD
  var icon = this.props.active ? 'icon-innofied-active' : 'icon-innofied-inactive';
  ;

 // GOOD
  var icon = this.props.active
   	? require('./icon-innofied-active.png')
  	: require('./icon-innofied-inactive.png');
  ;

Key Of Each Element In List Should Be Unique

In React Native, unique keys help identify which items have moved are changed, are added, or are removed. The best way to choose a key is to use a string that identifies a list item among its siblings uniquely. We recommend to use IDs from your list item as keys:

const numbersArr = [
	{
		key: 1,
		value: 1
	},
	{
		key: 2,
		value: 2
	},
	{
		key: 3,
		value: 3
	}
];
const listItems = numbersArr.map((each) =>
	 
  		{each.value}
	
);

Use Functional Component For Stateless Presentational Component

Since Stateless Presentational Component is only dealing with styles and UI, we should use functional component for this.

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

class Button extends Component {
	constructor(props) {
    	super(props);
	}
	render() {
		return (
			
				Hello
			
		);
	};
}

const styles = {
	containerStyle: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		margin
	},
		textStyle: {
		textAlign: 'center',
		ontSize: 25,
		fontFamily: fonts.bold,
		color: colors.grayLight,
		margin
	}
};
export default Button;

Classify The Component First

Component should be broken down into two main categories – Presentation Component It is concerned with how things look and allow containment via this.props.children Styles have to be implemented Don’t specify how data is loaded or mutated Receive data and callbacks exclusively via props. Container Component It is concerned with how things work Use Higher Order Component for wrapping divs It provides presentational or other container components with data and behavior.