This article recommends 11 great React Native open source components to help mobile app developers.

React Native is Facebook’s recent MIT open-source mobile application development framework, which has been used in Facebook’s production environment. React Native can use the recently popular React. Js library to develop Native apps for iOS and Android.

1. Tcomb-form-native for iOS

Tcomb-form-native is React Native’s powerful form processing control that supports JSON mode, pluggable look and feel. React. rocks/example/tco… .

2. Camera view React-native camera

React native camera Is the react Native camera viewport. This module was used in the early stages of development to support camera conversion and basic image capture.

Example:

var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var Camera = require('react-native-camera'); var cameraApp = React.createClass({ render: function() { return ( ); }, _switchCamera: function() { this.refs.cam.switch(); }}); AppRegistry.registerComponent('cameraApp', () => cameraApp);

3. react-native-video

React-native video is a label control.

Example:

// Within your render function, assuming you have a file called
// "background.mp4" in your project

// Later on in your styles..
var styles = Stylesheet.create({
  backgroundVideo: {
    resizeMode: 'cover', // stretch and contain also supported
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

4. Navigation control React-native Navbar

React native- NavBar is a simple custom navigation bar for React Native.

Sample code:

var NavigationBar = require('react-native-navbar'); var ExampleProject = React.createClass({ renderScene: function(route, navigator) { var Component = route.component; var navBar = route.navigationBar; if (navBar) { navBar = React.addons.cloneWithProps(navBar, {navigator: navigator, route: route }); } return ( {navBar} ); }, render: function() {return ( }} /> ); }});

5. React Native The React Native carousel control

The React native carousel is a simple React Native carousel control.

Sample code:

var Carousel = require('react-native-carousel');var ExampleProject = React.createClass({
  render() {    
   return (      
        
        
        
        
      
    );
  }
});

6. Pull down to refresh the react-native refreshable-ListView component

React-native refreshable-listView is a pull-down refresh of the listview that displays loading prompts when data is reloaded.

7. Modal components react-native- Modal

React-native – Modal is a component of React Native.

Review images

8. Text parsing control react-native htmlText

React-native htmlText can be used to create style text in ReactNative using HTML like markup. ReactNative provides a text element for those styled text, which replaces NSAttributedString, and you can create nested text:

  I am bold 
   and red 

9. react-native-htmlview
React-native htmlView is a control that uses an HTML directory as a local view, with a customizable style.
LinearGradient component React-native Linear-gradient
React-native Linear-gradient is a React Native LinearGradient component.
11. Play react-native looped-carousel in a two-way loop
React-native looped-Carousel is a two-way loop playback control based on React Native.
Sample code:
'use strict'; var React = require('react-native'); var Carousel = require('react-native-looped-carousel'); var Dimensions = require('Dimensions'); var {width, height} = Dimensions.get('window'); var { AppRegistry, StyleSheet, Text, View } = React; var carouselTest = React.createClass({ render: function() { return ( ); }}); AppRegistry.registerComponent('carouselTest', () => carouselTest);


If you know of other React Native plugins, please share them in the comments