#react native components

This post for all those people who are working on React Native. It shows a list of 5 top React native components that you can use in React Native.

1.React native vector icons

Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling.

Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project.

>>> Learn more: Here

2. React Native router flux

React Native Router based on new ReactNavigation.org API

Features:

Based on latest React Navigation API

Separate navigation logic from presentation. You may change now navigation state directly from your business logic code – stores/reducers/etc. navigationStore

Built-in state machine (v3 Switch replacement)

Each Scene can have onEnter/onExit/on handlers.

onEnter/on handler can be async.

For ‘truthy’ return of onEnter/on, success handler (if defined) will be executed

if success is a string then router will navigate to the Scene with that key

in case of handler’s failure, failure prop (if defined) will be run.

Combining onEnter, onExit, success, and failure makes patterns like authentication, data validation, and conditional transitions simple and intuitive.

MobX-friendly: all scenes are wrapped with observer. You may subscribe to navigationStore (Actions in v3) and observe current navigation state. Not applicable to Redux.

Flexible nav bar customization not currently allowed by React Navigation: https://github.com/react-community/react-navigation/issues/779

Drawer support (provided by React Navigation)

Inheritance of scene attributes allow you to avoid any code/attribute duplications. Adding rightTitle to a scene will apply to all child scenes. See example app.

Access to your app navigations state as simple as Actions.state.

Use Actions.currentScene to get name of current scene.

>>> Learn more: Here

3. React Native Map

This MapView component is built so that features on the map (such as Markers, Polygons, etc.) are specified as children of the MapView itself. This provides an intuitive and react-like API for declaratively controlling features on the map.

MapView Events

Tracking Region / Location

>>> Learn more: Here

4. Lottie for React Native, iOS, and Android

Lottie component for React Native (iOS and Android)

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with bodymovinand renders them natively on mobile!

For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand.

>>> Learn more: Here

5. Gifted Chat

The most complete chat UI for React Native (formerly known as Gifted Messenger).

Features

Fully customizable components

Composer actions (to attach photos, etc.)

Load earlier messages

Copy messages to clipboard

Touchable links using react-native-parsed-text

Avatar as user’s initials

Localized dates

Multiline TextInput

InputToolbar avoiding keyboard

>>> Learn more: Here

If you are working on React Native, here is a list of 3 React Native build and development components you should be know.

1.React Native Module for CodePush

This plugin provides client-side integration for the CodePush service, allowing you to easily add a dynamic update experience to your React Native app(s)

>>> Learn more: Here

2. Reactotron

A macOS, Windows, and Linux app for inspecting your React JS and React Native apps.

Use it to:

view your application state

show API requests & responses

perform quick performance benchmarks

subscribe to parts of your application state

display messages similar to console.log

track global errors with source-mapped stack traces including saga stack traces!

dispatch actions like a government-run mind control experiment

hot swap your app’s state

track your sagas

show image overlay in React Native

track your Async Storage in React Native

You plug it into your app as a dev dependency so it adds nothing to your product builds.

>>> Learn more: Here

3. React native webpack server

react-native-webpack-server is a development server that leverages the Webpack Dev Server and the React Packager to enable building React Native JavaScript bundles with webpack. This allows you to use the existing webpack ecosystem when targeting React Native.

>>> Learn more: Here