Posts

Example of Searchable Dropdown / Picker in React Native

This is an Example of Searchable Dropdown / Picker in React Native. To make a Searchable Dropdown in React Native we have a SearchableDropdown component provided by react-native-searchable-dropdown.

React Native Picker is the component which can be used as a drop-down but in case of huge data we have to give the facility to search for the option for that we can use Searchable Dropdown.

Searchable Dropdown in React Native

In this example of Searchable Dropdown, we will make 2 searchable drop-downs. One of them will have the data from the static array and the other one have the data from calling the rest API. So Let’s get started.

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 SearchableDropdown component you need to install react-native-searchable-dropdown dependency.

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 directory named react-native-searchable-dropdown.

Dependencies for this example

Now 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).

That was the example of the searchable dropdown/picker 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 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. 🙂

Example Showing the Working of Calendar Picker in React Native

This is an Example Showing the Working of Calendar Picker in React Native. Calendar Picker can be used to select the date range (Start Date to End Date). For the Calendar Picker that can be used on both platforms, you need to use a react-native-calendar-picker library.  A single React Native Calendar Picker component for both Android and IOS.

In this Example, We will make a Calendar Picker which will have the feature to select a date range and will show the starting and ending date on a Text. So let’s get started.

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 use CalendarPicker you need to install react-native-calendar-picker package.

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

Run the following commands

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

–save is optional, it is just to update the react-native-calendar-picker dependancy in your package.json file.

Dependency Versions for this Example used are

Now 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).

IOS

Android

That was the React Native Calendar Picker. 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 Use Time Picker in React Native

This post will show you an Example to Use Time Picker in React Native. TimePicker can be used to select the time. For the TimePicker that can be used on both platforms, you need to use a react-native-simple-time-picker library.  A single React Native timePicker component for both Android and IOS.

In this example, we will make a simple time picker with default time and the user can change the time. So let’s get started.

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 timepicker you need to install react-native-simple-time-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-simple-time-picker.

–save is optional, it is just to update the react-native-simple-time-picker dependancy in your package.json file.

Dependency Version for this Example used is

Now 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).

IOS

Android

That was the React Native TimePicker. 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. 🙂

Working with Date Picker in React Native

In post Working with Date Picker in React Native we will see how to make a Date Picker using DatePicker Component from react-native-datepicker library. This post will give you a basic idea about the Date Picker and how to make a Date Picker for your React Native app which can be used on Android and IOS both.

DatePicker Component from react-native-datepicker is a single React Native Date Picker component for both Android and IOS, using DatePickerAndroid, TimePickerAndroid, and DatePickerIOS.

In this example, we will make a simple date picker with default date passed by us and user can choose any date by clicking on it. So let’s get started.

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 DatePicker you need to install react-native-datepicker 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_module directory named react-native-datepicker. –save is optional, It updates the react-native-datepicker dependancy in your package.json file.

Now 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

 

That was the React Native DatePicker. 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. 🙂

Understanding of How Picker works in React Native

This post will give you an Understanding of How Picker Works in React Native. React Native Picker is a component for selection between different choice same as a Dropdown. Picker can be used when we have to give an option to pick one. There are multiple types of picker available which we will see one by one in upcoming tutorials. Have a look at the simple picker which has multiple options and the user has to choose one.

To Import Picker in Code

Render Using

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.

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).

        

That was the React Native Picker. If you have any doubt or you want to share something about the topic you can comment below or contact us here. The remaining components will be covered in the next article. Stay tuned!

Hope you liked it. 🙂

Introduction of 12 Basic React Native Components

Introduction of 12 Basic React Native Components includes the overview and basic understanding of React Native basic components.

As we all know React Native is a component-based JS framework therefore whatever you make in Rect Native will become a component for others. Components are always required by the app developers to sketch his/her imagination on the canvas and React Native has many components to work with. In this post, we will see the basic components which are provided by the default React Native Library.

We will go through each component one by one. As we are exploring all the components one by one so this post will be divided into the number of posts. If you have any suggestion please share your suggestions here.

1. View

View is like a container view. (Ex. Linear layout, Relative layout etc) for mobile developers and for web developers it is like <div>.

2. Text

Text is like TextView/Label for mobile developers and for web developers, it is like <p>.

3. State

State in React Native is like binding the value of any variable with any component, which will change when we change the value using setState. For example, if we made a state variable called varx and showing the value of varx in text view it will show the default value of varx but any time when we change the value of varx it will update automatically and will show the new value of varx (Same as ng-modal in Angular). Initialize state in the constructor, and then call setState when we want to change it.

4. Props

React Native components have some props which are helpful to customize the component. For example placeholder, Value, Style etc. These are props.

The state is mutable while props are immutable. This means that state can be updated in the future while props cannot be updated.

5. StyleSheet

A stylesheet is like CSS to design and make your UI look like you want.

6. TextInput

TextInput is like EditText/UITextfield for mobile developers and for web developers it is like <input type=”text”>.

7. Image

An image is like ImageView for mobile developers and for web developers, it is like <img>.

8. ScrollView

ScrollView is like a normal ScrollView for mobile developers.

9. Button

A Button is like a normal Button for mobile developers and for web developers, it is like <button>.

10. Picker

Picker is like a Spinner/Dropdown for mobile developers and for web developers, it is like <Select>.

11. Switch
12. Activity Indicator

Activity Indicator is like a ProgressBar/Loader with for mobile developers and for web developers, it is like Loader.

If you have any doubt or you want to share something about the topic you can comment below or contact us here.

Hope you liked it. 🙂