Some popular libraries when working with React Native

React Native is Powered Cross Platform that help to create Mobile application. When working with cross platform, it costs too much time if you want to communicate to native code, in most of the time, we don't need to do it by yourself cause there many libraries that help you to do most of things. In this article I will show you some popular libraries and their usages. Let's get started!

1. React Navigation

React Navigation is a popular routing and navigation library for React Native apps, offering customizable navigation patterns such as stack navigation, tab navigation, and drawer navigation.

To Install the package in your React Native project:

npm install @react-navigation/native

npm install @react-navigation/stack

Sample code:

import * as React from 'react';

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

import { NavigationContainer } from '@react-navigation/native';

import { createNativeStackNavigator } from '@react-navigation/native-stack';

type Props = {

navigation: any;

};

function HomeScreen({ navigation }: Props) {

return (

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

<Text>Home Screen</Text>

<Button title="To details screen"

onPress={() => {

navigation.navigate('Details')

}}/>

</View>

);

}

function DetailsScreen() {

return (

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

<Text>Details Screen</Text>

</View>

);

}

const Stack = createNativeStackNavigator();

function App() {

return (

<NavigationContainer>

<Stack.Navigator initialRouteName="Home">

<Stack.Screen name="Home" component={HomeScreen} />

<Stack.Screen name="Details" component={DetailsScreen} />

</Stack.Navigator>

</NavigationContainer>

);

}

export default App;

2. Redux / React Redux

Redux is a predictable state container for JavaScript apps, commonly used with React to manage application state. React Redux provides integration between Redux and React components.

To Install the package in your React Native project:

npm install react-redux

Sample code:

3. Axios / Fetch

Libraries for making HTTP requests in React Native apps. Axios is a promise-based HTTP client, while Fetch is a built-in browser API for fetching resources asynchronously.


4. AsyncStorage

A simple, asynchronous, persistent key-value storage system for React Native apps. AsyncStorage is commonly used for storing small amounts of data locally on the device.


5. React Native Elements

A UI component library for React Native that provides a set of cross-platform components such as buttons, input fields, and cards, with customizable styles and themes.


6. React Native Vector Icons

A library for adding vector icons to React Native apps, offering a wide range of icon sets such as Material Icons, FontAwesome, and Ionicons.


7. React Native Firebase

A library for integrating Firebase services (such as authentication, real-time database, cloud messaging, and analytics) into React Native apps.


8. MobX

Another state management library for React Native, similar to Redux but with a simpler API and a focus on reactive programming and observables.


9. React Native Gesture Handler / Reanimated

Libraries for handling complex gestures and animations in React Native apps. React Native Gesture Handler provides low-level gesture recognition, while Reanimated offers a powerful animation library.


10. React Native Paper

A material design UI component library for React Native, offering pre-designed components such as buttons, cards, and dialogs with customizable styles.