How to use SQLite Offline with React Native (Android / iOS)

[ad_1]

A Comprehensive step by step tutorial on creating offline Android/iOS Mobile App using React Native and SQLite. Sometimes we need to build or create Mobile Apps that work without an internet connection or offline. In this tutorial, we will play with data without accessing an API or Web Services. For that, we choose SQLite as a local Database.

Before start to the main steps, make sure that you have installed Node.js and can run npm in the terminal or command line. To check the existing or installed Node.js environment open the terminal/command line then type this command.

1. Install React App Creator and Create App

The Create React Native App is a tool for creating a React Native App. To install it, type this command in your App projects folder.

Then create a React Native App using this command.

react-native init reactOffline

That command will create a React Native app then install all required modules. The app or project folder will contain these folders and files.

React Native Tutorial: SQLite Offline Android/iOS Mobile App - Folder Structure

Next, go to the newly created React App folder.

To run on iOS device or simulator run this command.

The simulator will open along with the new terminal window. Go to the project folder from the new terminal window then run this command.

Right after iOS build success and React Native started, you will see this view in the iOS Simulator.

React Native Tutorial: SQLite Offline Android/iOS Mobile App - Run iOS

To run on Android device or simulator, make sure ADB detected the device.

Next, type this command to run on the Android device or simulator.

It will open the new terminal windows. Just go to the project folder then type this command.

You will see this app in your Android device.

Sometimes, if running React Native app faster than starting React-Native Javascript bundler you see this red-screen of error.

Make sure you’re running a packager server or have included a .jsbundle file in your application bundle.

Don’t worry, just start the Metro Bundler in the newly opened terminal window after you go to the project folder. After Metro Bundler started completely, refresh the React Native app on your device or simulator. In iOS Simulator you will see this error after refresh.

Just reload again the React Native app, you will get your React Native app running.

2. Add Navigation Header and required Screen

Above generated React Native App just show blank app with plain text. Now, we will show you how to add the Navigation Header and Home Screen for your app. So, it will look like the Native App. In the terminal or command line, type this command to install React Navigation module and don’t forget to stop the running Metro Bundler before installing the modules.

Next, create a folder for components and components files in the root of the app folder.

Open and edit components/ProductScreen.js then add this React codes.

Open and edit components/ProductDetailsScreen.js then add this React codes.

Open and edit components/ProductAddScreen.js then add this React codes.

Open and edit components/ProductEditScreen.js then add this React codes.

Next, open and edit App.js then add replace all codes with this.

After Re-run the React Native app on the iOS/Android Device/Simulator you will see this updated views.

React Native Tutorial: SQLite Offline Android/iOS Mobile App - Navigation Example

3. Install and Configure React Native SQLite Storage

Before creating an offline CRUD application using local data, we have to install the react-native-sqlite-storage and required UI/UX module.

We will use separate Class for accessing SQLite and do some CRUD (create, read, update, delete) operations. For that, create a new Javascript file on the root of the project folder.

Open and edit Database.js then add this SQLite import with the configuration.

Add constant variable after that.

Give this file a class name.

Inside the class bracket, add a function for Database initialization that creates Database, tables, etc.

Add a function for close Database connection.

Add a function to get the list of products.

Add a function to get Product by ID.

Add a function to save a new product to the SQLite database.

Add a function to update a product.

Add a function to delete a product.

4. Show List of Product

To show or display the list of product, open and edit components/ProductScreen.js then replace all imports with these imports.

Instantiate the Database as a constant variable before the class name.

Next, replace navigationOptions with these.

Add a constructor function.

Add a function to initialize the screen.

Add a function to get the product list from Database class.

Add a variable to iterate the listed product in the view.

Add a function to render the List Item.

Add a function to render the rest of List view.

Finally, add a stylesheet for the whole screen after the class bracket.

5. Show Product Details and Delete Product

From the list of product view, you will see that list item has an action button to show the product details. Next, open and edit components/ProductDetailsScreen.js then replace the imports with these imports.

Instantiate the Database as a constant variable.

Add a function as the constructor.

Add a function to initialize the screen.

Add a function to delete a product data.

Add a function to render the whole Product Details view.

Finally, add the stylesheet for this screen after the class bracket.

6. Add Product

To add or save a new Product, open and edit the components/ProductAddScreen.js then replace all imports with these imports.

Instantiate the Database as a constant variable.

Add a constructor inside the class bracket after the navigationOptions.

Add a function to update the input text values.

Add a function to save a product to the SQLite table.

Add a function to render the whole add product view.

Finally, add the style for the whole screen.

7. Edit Product

To edit a product, open and edit components/ProductEditScreen.js then replace all imports with these imports.

Instantiate the Database as a constant variable.

Add the constructor after the navigationOptions function.

Add a function to initialize the screen that will get product data.

Add a function to update the input text value.

Add a function to update the product data.

Add a function to render the whole Edit Product screen.

Finally, add the stylesheet after the class bracket.

8. Run and Test React Native and SQLite Offline Mobile App

As we show you at the first step, run the React Native and SQLite app using this command.

After the new terminal window open, just go to the project folder then run this command.

Now, you will see the whole application in the Android/iOS Device.

React Native Tutorial: SQLite Offline Android/iOS Mobile App - Product ListReact Native Tutorial: SQLite Offline Android/iOS Mobile App - Product DetailsReact Native Tutorial: SQLite Offline Android/iOS Mobile App - Edit Product

That it’s, the React Native and SQLite Offline Mobile App. You can get the full source code from our GitHub.

That just the basic. If you need more deep learning about React.js, React Native or related you can take the following cheap course:

[ad_2]

One thought on “How to use SQLite Offline with React Native (Android / iOS)

  • 13/06/2019 at 21:00
    Permalink

    How do i compile react-native runs on web? / Comment compiler des exécutions réactives sur le Web?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *