React Native is one of the best frameworks for writing mobile-friendly applications. It's super-fast, uses common programming patterns, and hooks right into the native operating system. No wonder aspiring developers and teams continue to adopt React and React Native for their projects.

Although the learning curve can be somewhat steep, there is no question that React is the most popular application library, by far. This popularity helps its sister library, React Native, dominate the mobile scene as well.

There are a couple of modules required for production-ready applications that are not included in vanilla React Native. This is because many of these modules need some sort of backend to handle storage, session cache, and token administration. Fortunately, serverless programming has empowered the web and application developer by adding these capabilities to standalone frontend projects. These technologies greatly lower the barrier-of-entry to application development systems.

We're going to take a look at 3 easy-to-use libraries that either implement these serverless features or help applications use them.

1. react-native-ui-lib

Github

A solid UI component library is important to almost every React Native project. These libraries will give your application the same look and feel across different devices, as opposed to the default native component that is not standard across operating systems.

React-native-ui-lib is a great solution for this. Although it's not the most popular of the bunch, the components are concise, mature, and will be super useful when interfacing with the data from your serverless modules. For example, implementing a sign in / sign up login authentication view or displaying data retrieved from a cloud database.

Here's a demonstration of the components in this library. It's easy to see how these will be useful when it comes to visualizing and interfacing with backend data.

Just move the component imports from 'react-native' to 'react-native-ui-lib'!

import React, {Component} from 'react';
import {View, Text, Card, Button} from 'react-native-ui-lib';

class MyScreen extends Component {
  render() {
    return (
      <View flex>
        <Text heading>My Screen</Text>
        <Card height={100} center>
          <Text body>This is an example card </Text>
        </Card>
        
        <Button label="Button" body square></Button>
      </View>
    );
  }
}

2. easybase-react

Github

This library will provide the serverless capabilities that turn your project from simply a user interface to a fullstack application. The only prerequisite is creating a free account.

From there, you can create a real-time database or implement login authentication. This library provides the modules right in-the-box. So, there's no need to create your own backend service when all the necessary functions are available through the useEasybase() hook!

Just wrap your root component in the EasybaseProvider then pass your provided token. This token is obtained by creating a Project or Integration in Easybase.

import { EasybaseProvider, useEasybase } from "easybase-react";   
import ebconfig from "ebconfig.js";    

function App() {
    return (
        <EasybaseProvider ebconfig={ebconfig}>
            <ProjectUser />
        </EasybaseProvider>
    )
}

function ProjectUser() {
  const { isUserSignedIn, signIn, signUp } = useEasybase();

  if (isUserSignedIn()) {
    return (
      <div>
        <h2>You're signed in!</h2>
        <FrameRenderer />
      </div>
    )
  } else {
    return (
      <div style={ { display: "flex", flexDirection: "column" } }>
        <h4>Username</h4>
        <input value={usernameValue} onChange={e => setUsernameValue(e.target.value)} />
        <h4>Password</h4>
        <input type="password" value={passwordValue} onChange={e => setPasswordValue(e.target.value)} />
        <button onClick={_ => signIn(usernameValue, passwordValue)}>
          Sign In
        </button>
        <button onClick={_ => signUp(usernameValue, passwordValue)}>
          Sign Up
        </button>
      </div>
    )
  }
}

It's that easy! For more information on using Easybase, easybase-react and React/React Native, take a look at the comprehensive walkthrough here.

3. react-native-fs

Github

If you foresee a situation in which you are going to want to synchronize files between a user's device and Easybase, this library is great for interacting with the local file system. Reading files with this library work great with the updateRecordFile() function from useEasybase() to send files to your cloud database. (For images, use react-native-image-picker).

Beyond that, there are plenty of other use cases for accessing a device's local file system. For example, a developer may want to see if any PDF files are available to scan or store voice memos locally.

Here's how easy it is to log all file contents from the main directory:

var RNFS = require('react-native-fs');

RNFS.readDir(RNFS.MainBundlePath) // On Android, use "RNFS.DocumentDirectoryPath" (MainBundlePath is not defined)
  .then((result) => {
    console.log('GOT RESULT', result);
    return Promise.all([RNFS.stat(result[0].path), result[0].path]);
  })
  .then((statResult) => {
    if (statResult[0].isFile()) {
      return RNFS.readFile(statResult[1], 'utf8');
    }
    return 'no file';
  })
  .then((contents) => {
    console.log(contents);
  })
  .catch((err) => {
    console.log(err.message, err.code);
  });