Example of Image Picker in React Native

Here is an Example of Image Picker in React Native. For picking the image we will use a very good library called react-native-image-picker. Which provides ImagePicker component to in which you can provide the image picking option from Gallery or Camera or From you custom source like Facebook posts.

How to Use

react-native-image-picker library provides an ImagePicker component in which you can set the options like the title of the picker, Your custom Buttons(Name and title of the button) and storage options like skipBackup or path.
Here is the code snippet of ImagePicker we have used in this Example

In this example below, we will open an Image picker on a click of a button and will show the selected image on the Image component. Selection options Camera and Gallery are by default but we have also added a custom button which will simply generate an alert when we click on it but You can do whatever you want. So Let’s get started with our Example.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Installation of Dependency

To use ImagePicker we need to install react-native-image-picker dependency.

To install this open the terminal and jump into your project using

Run the following command

This command will copy all the dependencies into your node_module directory, You can find the directory in node_module the directory named react-native-image-picker.

Linking of Dependency

To use react-native-image-picker library we have to link some dependencies in Android and IOS project files. In order to link the library you have to run the following command:

After linking the dependency if you face  Could not Compile Settings File project/android/settings.gradle error while building and installing the project then you can find the solution here.

Android Permission to use the Camera and to Read the Storage

We are using a Native API Camera and also going to choose the image from the gallery so we need to add some permission to the AndroidManifest.xml file. We are going to add the following permissions in the AndroidManifest.xml

 

PermissionPurpose
CAMERATo access the camera
WRITE_EXTERNAL_STORAGETo Read and Write the content in the SD card


On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest but after SDK version 23 we have to ask run time permission also, so we will ask for permission in code also. For more about the permission, you can see this post.

IOS Permission to use the Camera and to Read the Storage

1. Open the project ImagePickerExample>ios>ImagePickerExample.xcodeproj in XCode. Click on Project (ImagePickerExample in my case) from the left sidebar and you will see multiple options in the workspace.

2. Select info tab which is info.plist

3. Click on the plus button to add following permission key and value which will be visible when permission dialog pops up.

1. Key: Privacy – Photo Library Additions Usage Description, Value: App needs photo library Access.
2. Key: Privacy – Camera Usage Description, Value: App needs Camera Access Permission for testing.

Code For Image Picker

You can download the source code from Github

OR

Open App.js in any code editor and replace the code with the following code

App.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

Android

            

            

IOS

            

This is how you can Pick an Image from the React Native Application. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

Example of File Picker in React Native

Here is an Example of File Picker in React Native. For picking a file or a document we will use a library called react-native-document-picker. Which provides DocumentPicker component which is very helpful to pick any type of document from your mobile memory.

How to Use

react-native-document-picker library provides a DocumentPicker component in which you can set the file type you want to pick and accordingly it will provide you the option to choose the file.
Here is the code snippet of DocumentPicker we have used in this Example

In this example below, we will open a File Picker on a click of a button and will show the selected File URI, File Type, File name and File Size on the Text component. So Let’s get started with the Example.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Installation of Dependency

To use DocumentPicker we need to install react-native-document-picker package. To install this

Open the terminal and jump into your project

Run the following command

This command will copy all the dependencies into your node_module directory, You can find the directory in node_module the directory named react-native-document-picker.

Linking of Library

To use react-native-document-picker library we have to link some dependencies in Android and IOS project files. In order to link the library you have to run following command:

Permission to access External Storage for Android

We are going to access external storage so we need to add some permission to the AndroidManifest.xml file.
So we are going to add the following permissions in the AndroidManifest.xml

PermissionPurpose
READ_EXTERNAL_STORAGETo Read the content of the SD card


On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest but after SDK version 23 we have to ask run time permission also, so we will ask for permission in code also. For more about the permission, you can see this post.

You can download the source code from Github

OR

Open App.js in any code editor and the Replace the code with the following code

App.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

Android

         

IOS

As this file picker provides the iCloud pick also so before running the Application for IOS. Open the project in Xcode and click on the project in the left sidebar and you will see many options in the workspace.

1.  In the general tab, you have to choose your signing profile from XCode.

2. In the Capabilities tab, You can see the iCloud option which you have to turn on.

3. It will ask you to choose the development team. Select your development team.

If you are working on the IOS simulator then you will get this error as simulator does not support iCloud and file picking options

This is how you can Pick a file from the React Native Application. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

How to See Realm Database Data Saved in Device using Android Studio

Hey Guys, This post on How to See Realm Database Data Saved in Device using Android Studio was the demanding post of one of our visitor Shubham. So here are the steps to see the data stored in the Realm database in the device. This is an extended post of our previous post Example of Realm Database in React Native.

Open Realm Database Stored in Device using Android Studio

1. First of all store the data in the application.

2. If you are working with the Real Device or with the emulator you can connect it with the Android Studio just by opening the project with Android Studio. For that, you have to open the Android Studio and in File > Open > Find your project in the directory and open the <Your project>/android directory. (Opening the same project is not mandatory you can open any project).

3. After opening the Android Studio what we want is to find the Device File Explorer which you can find in the right bottom of the Android Studio. Now Click on that.

4. You will see a window will open and now select the device from the top and expand the data option.

5. Find your project with Realm Database and expand it. You will find the files and under that the database which you have created. save it to any directory.

6. Now  Go to this link. Where you can find the Realm Studio which you can download and can install.

7. open the installed Realm Studio and select Open Realm File option.

8. Now Navigate to the directory where you have saved your database and open it.

9. Hurre!! Here it is.

This is how you can See Realm Database Data Saved in Device using Android Studio. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

Example of Realm Database in React Native

Here is an Example of Realm Database in React Native. We are hoping you have read our previous post on Local Database in React Native App. A realm is an open-source object database management system, initially for mobile, also available for platforms such as Xamarin or React Native, and others, including desktop applications, and is licensed under the Apache License. We can perform all the CRUD transactions in this database and much faster than the SQLite database. Let’s get started with Realm.

In this Example, we will make a HomeScreen with the option to go to other screens like

  • RegisterUser: To Register the User. (Create/Insert)
  • ViewAllUser: To View All Users. (Read)
  • ViewUser: To View Singel Users By Id. (Read)
  • UpdateUser: To Update the User.(Update)
  • DeleteUser: To Delete the User.

We will be having some custom components like Mybutton, Mytext, Mytextinput which will be used in place of react-native Button, Text, and TextInput.

How to Use

You just have to import the library like this:

and open the database using

Now, whenever you need to make some database call you can use realm to execute the database query.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Installation of Dependency

To use Realm we need to install realm package.

To install this

Open the terminal and jump into your project using.

run the following command.

This command will copy all the dependencies into your node_module directory, You can find the directory in node_modulethe directory named realm.

Linking of Library

To use Realm library we have to make some changes in the following files:

Go to the RealmExample> android > app > build.gradle.
Scroll down and add the following dependency.

Open RealmExample> android > settings.gradle and add the following lines.

 

Open RealmExample> android > app > src > main > java > com > realmexample> MainApplication.java  and add the following lines in imports.

Scroll down and add the following line in getPackages after new MainReactPackage(). Please add a comma(,) and then add

 

Here we have done with our installation of the library. If you are still facing the trouble please comment below so that we can help you out from the problem.

In this Example, we are going to use createStackNavigator component to navigate so we need to install the react-navigation library. If you are new to the React Native Navigation then this post will help you.

To install react-navigation run the following command on terminal

Just to confirm the dependencies here is the screenshot of the dependencies that we are using ;

If you are on the same boat then let’s go further or please update your package.json and run npm install to install new dependencies.

For this Example, we are using the following structure. You have to make page directory in RealmExample and components directory under that. Make the marked js files too.

You can download the code from Github and can run directly

OR

Open the project directory and replace the following code

App.js

Mybutton.js

Mytext.js

Mytextinput.js

HomeScreen.js

RegisterUser.js

UpdateUser.js

ViewAllUser.js

ViewUser.js

DeleteUser.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

After running the Application successfully if you want to see the stored data in the device just to check whether database is storing the data proper you can visit How to See Realm Database Data Saved in Device using Android Studio.

             

This is how you can use Realm Database in React Native Application. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

Example to Load Pre Populated SQLite Database in React Native

Here is an Example to Load Pre Populated SQLite Database in React Native. In this example, we will use SQLite Browser to create an SQLite Database and then we will use this database.

For SQLite database, we will use the SQLite3 Native Plugin which will work in both Android and iOS. It is based on Cordova SQLite plugin.

This is an extended post of our previous post on Example of SQLite Database in React Native so if you stuck with anything then you can visit the last post because this post will have more details about the importing of the pre-populated database.

In this Example, we will make a HomeScreen with the option to go to other screens like

  • RegisterUser: To Register the User. (Create/Insert)
  • ViewAllUser: To View All Users. (Read)
  • ViewUser: To View Singel Users By Id. (Read)
  • UpdateUser: To Update the User.(Update)
  • DeleteUser: To Delete the User.

We will be having some custom components like Mybutton, Mytext, Mytextinput which will be used in place of react-native Button, Text, and TextInput.

How to Use

You just have to import the library like this:

and open the database using (Here my pre-populated database name is user_db.db )

Now, whenever you need to make some database call you can use db variable to execute the database query.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Installation of Dependencies

To install the dependencies open the terminal and jump into your project

Run the following commands

Linking of Dependencies

After installing the dependencies you need to link it with your project using

Database Setup for Pre-Populated Database

1. First of all, download the SQLite Browser from here and open the browser.

2. Create a new database.

3. Save with any name. In my case it is user_db.db

4. Now after creating a database please create a table by clicking on Create Table.

5. It will open a dialog where you have to enter the table name and have to add the fields then click ok.

6. The click on the Browse Data tab and select your table i.e. tbl_user. Now add a new record in this table.

7. For this example, I have added 2 records. You can see by selecting the Table. Please save the database after that because all this activity are not saved automatically. You have to find the save option and have to save this.

It is my request to close the browser once and open the database again to be sure it is properly saved.

8. This is how you can make the SQLite database in SQLite browser. Please make a directory named www and place the database into it. This will be the directory which we will copy in Android and IOS.

Now we have to copy this database in different places for Android and IOS because default places to put the database is different for Android and IOS. Please be sure to put the database on the below-mentioned places.

Placing of Pre-populated Database in Android

1. In case of Android copy the www directory into android > app > src > main > assets

2. You can also copy using Android Studio.

Placing of Pre-populated Database in IOS

1. Open your xcodeproj in Xcode.

2. After opening the project right click on the Project folder (SQLiteExample in this case) and select Add Files

3. Navigate to www directory and select www directory with create folder references and SQLiteExample. Then click Add.

4. You can see the added directory in the project structure.

Here we have done all the configuration for the pre-populated database. Please follow the below instruction for the example.

Project Structure

For this Example, we are using the following structure. You have to make page directory in SqliteExample and components directory under that. Make the marked js files too.

You can download the code from Github and can run directly

OR

Open the project directory and replace the following code

App.js

Mybutton.js

Mytext.js

Mytextinput.js

HomeScreen.js

RegisterUser.js

UpdateUser.js

ViewAllUser.js

ViewUser.js

DeleteUser.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

If you are facing null is not an object (Evaluating ‘NativeModules[“SQLite”][method]’) like the screenshot below.

Then open SQLiteProject/node_modules/react-native-sqlite-storage/src/android/build.gradle
and replace

with

Here are the screenshots of the final outcome.

         
         

This was the Example to Load Pre Populated SQLite Database in React Native. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

Example of SQLite Database in React Native

Here is an Example of SQLite Database in React Native. We are hoping you have read our previous post on Local Database in React Native App. SQLite database is one of the databases that we have discussed in our previous post. To define the SQLite we can say it is an open source SQL database that stores data to a text file on a device. We can perform all the CRUD SQL transactions in this database and it is the most common database that we have heard of for mobile development. Let’s get started.

For SQLite database, we will use the SQLite3 Native Plugin which will work in both Android and iOS. It is based on Cordova SQLite plugin.

In this Example, we will make a HomeScreen with the option to go to other screens like

  • RegisterUser: To Register the User. (Create/Insert)
  • ViewAllUser: To View All Users. (Read)
  • ViewUser: To View Singel Users By Id. (Read)
  • UpdateUser: To Update the User.(Update)
  • DeleteUser: To Delete the User.

We will be having some custom components like Mybutton, Mytext, Mytextinput which will be used in place of react-native Button, Text, and TextInput.

How to Use

You just have to import the library like this:

and open the database using

Now, whenever you need to make some database call you can use db variable to execute the database query.

Please note down we are using callback function not real-time feedback because while running a query it does not provide the response instantly. Execution of query takes some time and give the response in the callback function.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Installation of Dependencies

To install the dependencies open the terminal and jump into your project

1. To use openDatabase we need to install react-native-sqlite-storage dependency.
Run the following command.

2. In this Example, we are going to use createStackNavigator component to navigate so you need to install react-navigation and react-native-gesture-handler dependencies. If you are new to React Navigation then visit Switch from One Screen to another using React Navigation 3.+ (Router) this will help you.
Run the following commands

This command will copy all the dependencies into your node_module directory. –save is optional, it is just to update dependencies in your package.json file.

Linking of Dependencies

After installing the dependencies you need to link it with your project using

After linking the dependency if you face  Could not Compile Settings File project/android/settings.gradle error while building and installing the project then you can find the solution here.

This Linking will link react-native-gesture-handler and react-native-sqlite-storage but in some cases, Linker does not link the Android (IOS linking is fine, the problem is with Android only) project properly so please link the Android project manually. To link Android project please follow the below steps (If your Android project is properly linked then you can check and skip the step)

Go to the SqliteExample> android > app > build.gradle.
Scroll down and add the following dependency.

Open SqliteExample> android > settings.gradle and add the following lines.

Open SqliteExample> android > app > src > main > java > com > sqliteexample> MainApplication.java  and add the following lines in imports.

Scroll down and add the following line in getPackages after new MainReactPackage(). Please add a comma(,) and then add

 

Here we have done with our installation of the library. If you are still facing the trouble please comment below so that we can help you out from the problem.

Database Setup

While working with React Native it provides two option:

  1. You can make the database in runtime.
  2. You can use the pre-populated database so that you can start working directly.

In this example, we will make the database on runtime and for the pre-populated database, You can visit Example of Pre Populated SQLite Database in React Native.

Just to confirm the dependencies here is the screenshot of the dependencies that we are using :

If you are on the same boat then let’s go further or please update your package.json and run npm install to install new dependencies.

For this Example, we are using the following structure. You have to make page directory in SqliteExample and components directory under that. Make the marked js files too.

You can download the code from Github and can run directly

OR

Open the project directory and replace the following code

App.js

Mybutton.js

Mytext.js

Mytextinput.js

HomeScreen.js

RegisterUser.js

UpdateUser.js