React Native Libraries

React Navigation:

The most popular navigation library for React Native.

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

const Stack = createStackNavigator();

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

Redux:

Providing predictable state for JavaScript applications.

// store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

React Native Firebase:

An excellent library for using Firebase services in React Native.

import firestore from '@react-native-firebase/firestore';

async function getUsers() {
  const users = await firestore()
    .collection('Users')
    .get();

  users.forEach(documentSnapshot => {
    console.log('User ID: ', documentSnapshot.id, documentSnapshot.data());
  });
}

React Native Vector Icons:

Vector icon library for React Native.

import Icon from 'react-native-vector-icons/FontAwesome';

const App = () => {
  return <Icon name="rocket" size={30} color="#900" />;
};

export default App;

React Native Paper:

Provides UI components inspired by Material Design.

import { Appbar, Button, TextInput } from 'react-native-paper';

<Appbar.Header title="My App" />
<Button icon="camera" mode="contained" onPress={() => {}}>Take Photo</Button>
<TextInput label="Name" value="John Doe" onChangeText={(text) => {}} />