Top Open Source React Native Packages of 2020

React Native (RN) is a popular cross-platform framework with several built-in components that come ready to use in your project. Additionally, React Native comes with many open source libraries supported by its strong developer community. The community keeps these libraries up-to-date to ensure quick development and deployment of solutions.

React Native supports a greater number of libraries than Xamarin, Flutter, or Ionic, which makes it a framework of choice for clients and developers. In this article, we are going to talk about the top 7 libraries that are used in React Native projects.

1. NativeBase

NativeBase is one of the most popular libraries within the React Native community and has more than 43K weekly downloads, 14.2K GitHub stars, and 1.7K GitHub forks.

NativeBase is a dynamic frontend framework created by passionate developers from the React community. It enables developers to build high-quality mobile apps using React Native with support for the latest ECMAScript standards.

Some of the companies that leverage this library includes Microsoft, SocialDog, and Evand.

NativeBase specifically helps users design the look and feel of an app. It fits well with mobile applications and cuts down a huge part of your effort during app development.

Installing NativeBase

npm install native-base --save

Sample Component Code snippet:

import React, { Component } from 'react';
import { Container, Button, Text } from 'native-base';
export default class Example extends Component {
  render() {
    return (
      <Container>
        <Button>
          <Text>
            Button
          </Text>
        </Button>
      </Container>
    );
  }
}

NativeBase components are created using the React Native platform along with some JavaScript functionality and are highly customizable to fit most project needs. NativeBase also comes with starter kits that provide a wide range of templates for different business use cases. One of the main advantages of this library is that it integrates well with other third-party libraries. NativeBase provides the same look and feel as the operating platform on which it runs and allows users to easily customize components by creating a separate file.

NativeBase renders the same UX as natively written applications because NativeBase uses the React Native platform's default rendering and layout engine. It allows you to have a common codebase for your entire application's code.

2. React Native Elements

The React Native Elements library has over 80K weekly downloads and close to 16K stars on GitHub. The main purpose of React Native Elements is to provide a convenient element structure tool for the RN developer community. Compared to NativeBase, it has very few templates, but provides complete control on displayed data. This makes React Native Elements a great tool for developers to customize components based on a project's need, and speeds up development.

React Native Elements is more about component structure than actual design. However, it does provide full control over the design.

Some of the companies using React Native Elements includes Dltx and Pymt.

Installing React Native Elements

npm install react-native-elements

Sample Component Code Snippet:

import { Button, ThemeProvider } from 'react-native-elements';

const MyApp = () => {
  return (
    <ThemeProvider>
      <Button containerStyle=buttonStyle title=”submit”/>
    </ThemeProvider>
  );
};

The above code provides a ThemeProvider wrapper component to customize the theme according to a project's need. It’s similar to Bootstrap, giving you reusable styles that you can configure to suit your requirements.

3. React Navigation

React Navigation is one of the better packages for routing or navigation within React Native apps for both iOS and Android. It has weekly downloads of over 171K, 4K+ forks, and 18K+ stars. It is actively updated by the open source GitHub community. React Navigation is seamless to integrate with other libraries.

React Navigation comes with features like Top Navigation, Bottom Navigation, Stack Navigation, and Drawer Navigation. It also supports a nested navigation feature which provides parent and child routes. React Navigation supports the latest React hooks and context concepts. It also supports integration with state management tools like Redux and MobX, and provides features like deep linking, server side rendering, and screen tracking for analytics.

Some companies which actively use this library include Bloomberg, DataCamp, Codeacademy Go, TaskRabbit, Cameo, Shop from Shopify, the National Football League (NFL) and Th3rdwave.

Installing React Navigation

npm install @react-navigation/stack

Sample Code Component Snippet

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

The above code snippet creates a Stack Navigation. createStackNavigator is a function that returns an object containing two properties: Screen and Navigator. Navigator contains Screen elements as its children to define the configuration for routes.

NavigationContainer is a component which manages the navigation tree.

4.UI Kitten

UI Kitten is another popular UI library supported by the open source developer community. It has more than 4K weekly downloads in NPM, 7.1K+ GitHub stars, and 700+ forks.

UI Kitten is created by Eva Design System. It contains a set of general-purpose UI component styles. You only need to code the business logic, and UI Kitten takes care of visual appearances. Moreover, the themes can be changed during runtime without reloading the application. UI Kitten stores style definitions separate from the business logic, and styles all UI elements in the same way.

UI kitten supports dynamic theming and its modules are distributed as separate NPM packages. Below are some of the elements provided by UI Kitten:

UI Components @ui-kitten/components

• Theme - Light and Dark visual themes based on the EVA design system
• Browser support with react-native-web
• Right-to-left writing system support for all components

UI Kitten Eva Icons @ui-kittten/eva-icons

• Eva Icons is a pack of more than 480 icons

UI Kitten Moment @ui-kitten/moment

UI Kitten date-fns @ui-kitten/date-fns

Retail Shake and Chatwoot are some of the organizations that leverage UI Kitten.

Installing UI Kitten

npm i @ui-kitten/components @eva-design/eva react-native-svg

Sample Code Component Snippet

import React from 'react';
import { ApplicationProvider, Layout, Text } from '@ui-kitten/components';
import * as eva from '@eva-design/eva';

export default () => (
  <ApplicationProvider {...eva} theme={eva.light}> // <-- {eva.dark} for dark mode
    <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Welcome to UI Kitten</Text>
    </Layout>
  </ApplicationProvider>
);

The above code snippet has an ApplicationProvider designed to be the root component of the application.

5. Lottie for React Native

Lottie for React Native was created by Airbnb and has more than 100K weekly downloads in the NPM registry, 13.3K+ stars and 1.4K+ forks.

Lottie is built for mobile apps to help you add animations. Normally, animations are created on tools like Adobe After Effects. This involves the overhead work of converting animations to different formats which can be used in web apps.

This is where Lottie helps you. It works by exporting animation data in JSON format from an After Effects extension called BodyMovin. This extension is tied to a JavaScript player to render animations on the web.

Lottie libraries and plugins are open source, and you can use the curated collection of animation files to make your apps attractive and interesting. The animation files are small in size and exist in vector format. As such, you will not experience any impact on the performance of your app. Moreover, it can spice up your UI and make it visually appealing.

Installing Lottie for React Native

npm i --save lottie-react-native
npm i --save [email protected]

Sample Code Component Snippet

import React from 'react';
import LottieView from 'lottie-react-native';
 
export default class BasicExample extends React.Component {
  render() {
    return <LottieView source={require('./animation.json')} autoPlay loop />;
  }
}

The source of animation can be referenced as a local asset by a string, or remotely with an object with URI property. It can also be an actual JS object obtained from the path.

6. React Native Web

React Native Web makes it possible to run React Native components in web browsers using the React DOM. It enables developers to utilize the full interactivity of a mobile interface in a web app. Because it interacts with existing React DOM components, React Native Web lets you build once for both mobile and web.

React Native Web is the predominant open-source library for cross-platform React development between mobile and web. In fact, a few of the other libraries on this list leverage React Native Web to power their cross-platform capabilities.

Crowdbotics incorporates React Native Web into its applications in order to develop universal apps that run on web, iOS, Android, Windows, and macOS. This lets Crowdbotics users develop simultaneously for all platforms using a single codebase and no-code tooling, dramatically reducing build times with total cross-platform fidelity.

Installing React Native Web

npm install react react-dom react-native-web

Sample Code Component Snippet

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

// Look at public/index.html!

class App extends React.Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "#44bb44"
        }}
      >
        <View>
          <Text color="#ffffff">Hello World</Text>
        </View>
      </View>
    );
  }
}

export default App;

The above component describes styling for a given View and then nests a Text component inside of it with its own distinct styling. This is consistent with normal React Native design patterns.

7. React Native for Windows + macOS

Similar to React Native Web, React Native for Windows + macOS makes it possible to run React Native components natively on all apps running Windows 10 (including PCs, tablets, 2-in-1s, Xbox, AR/VR devices, etc.) as well as the macOS desktop and laptop ecosystems. It is created and maintained by Microsoft, but it is an open source project with a public GitHub repository.

React Native for Windows + macOS is a relatively new library, having debuted in 2019. However, it already has 12.5K stars on GitHub and 950 forked repos.

React Native for Windows + macOS is another critical piece of Crowdbotics' universal apps philosophy. Crowdbotics users building a mobile app will find that their single codebase also generates working applications for desktop operating systems with no added effort.

Installing React Native for Windows

npx react-native init <projectName> --template [email protected]^0.63.2
cd <projectName>
npx react-native-windows-init --overwrite

Installing React Native for macOS

npx react-native init <projectName> --version 0.62.0
cd <projectName>
npx react-native-macos-init

Sample Code Component Snippet

import React, { Component } from 'react';
import {
  AppRegistry,
  Button,
  requireNativeComponent,
  StyleSheet,
  UIManager,
  View,
} from 'react-native';

let CustomUserControl = requireNativeComponent('CustomUserControl');

class ViewManagerSample extends Component {
  onPress() {
    if (_customControlRef) {
      const tag = findNodeHandle(this._customControlRef);
      UIManager.dispatchViewManagerCommand(tag, UIManager.getViewManagerConfig('CustomUserControl').Commands.CustomCommand, ['arg1', 'arg2']);
    }
  }

  render() {
    return (
      <View style={styles.container}>
         <CustomUserControl style={styles.customcontrol} label="CustomUserControl!" ref={(ref) => { this._customControlRef = ref; }} />
         <Button onPress={() => { this.onPress(); }} title="Call CustomUserControl Commands!" />
      </View>);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  customcontrol: {
    color: '#333333',
    backgroundColor: '#006666',
    width: 200,
    height: 20,
    margin: 10,
  },
});

AppRegistry.registerComponent('ViewManagerSample', () => ViewManagerSample);

The above snippet creates a ViewManager in JSX using React Native conventions, despite the fact that it will run natively on desktop when configured properly.

Conclusion

The best React Native libraries include high-quality components and themes which are fully developed and maintained. This speeds up the process of development and reduces considerable amount of effort and time.

Crowdbotics’ RADStack development methodology leverages a number of open source React Native libraries to create custom applications for clients. If you're looking for high-quality open source app development, get in touch with one of our experts today.