This section contains some extra knowledge and how to topics. This is very helpful for those who want to learn more.

Segmented Control Tab in React Native for Android and iOS

This is an Example of Segmented Control Tab in React Native for Android and iOS using react-native-segmented-control-tab. iOS developers knows what Segmented Control Tab is but if you are coming from an Android development background and have no idea what Segmented Control Tab is, then just imagine a Tab View in Android. Segmented Control Tab is same as Tab in Android but without Swipe to change Tab feature.

It is used as a navigator or to show multiple screens in a single screen. There are 4 Types of Segmented Control Tab that we are going to cover:

  1. Simple Segmented Control Tab
  2. Simple Segmented Control Tab with Badges
  3. Multi Select Simple Segmented Control Tab
  4. Custom Styling Segmented Control Tab

In this example, we will see how to make a Segmented Control Tab, how to select any tab as default tab, how to call any handler when tab changes, how to control a tab selection using state. So let’s get started.

Import Segmented Control Tab using

to import Segmented Control Tab we use

To make Simple Segmented Control Tab

Simple Segmented Control Tab with Badges

Multi Select Simple Segmented Control Tab

Custom Styling Segmented Control Tab

For this example, we will make a screen with 4 different type of Segmented Control Tab. Each of Tab have different property. This 4 Segmented Control Tab include Simple Segmented Control, Additional badges in Simple Segmented Control, Simple Segmented Control with multi Select, Simple Segmented with Custom Styling.

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 SegmentedControlTab we need to install react-native-segmented-control-tab dependency.

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

Run the following command to install

This command will copy all the dependency into your node_module directory.

–save is optional, it is just to update the react-native-segmented-control-tab dependency 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

         


This is how you can make a Segmented Control Tab in React Native for Android and iOS using react-native-segmented-control-tab. 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. 🙂

Find iPhone, iPod touch or iPad’s Unique ID (UDID) for iOS Development

This post will help you to find iPhone, iPod touch or iPad’s unique ID (UDID). This post include 6 easy steps to get the UDID of your iPhone, iPod touch or iPad. So Let’s get started.

What is unique ID or UDID?

Every iPhone, iPod touch and iPad has a unique identifier number associated with it, known as a UDID (Unique Device ID).

How is looks like?

UDID is a 40-digit sequence of letters and numbers that looks like this: 0e83ff56a12a9cf0c7290cbb08ab6752181fb54b.

Why we need UDID?

Either you are a client or a developer you need UDID to test your iOS app in your device. Unlike Android iOS has strong security protocols and the devices do not allow to install the ipa (App package same as APK in Android) from unknown source so when you make an iOS app you need to test it on real device. For that you have two options either go for debugging mode by connecting your device with XCode (iOS development IDE) and run the app directly into the device or get a UDID of your device and make an ipa to install the app in the device.

Remember if you  want to distribute the ipa then you need to provide the UDID so that it can install in the device.

How to get it?

You are a developer or a normal person here are 6 simple magical steps to get the UDID of your iOS device using iTunes:

Step 1:

Open iTunes (the Mac or PC app, not iTunes on your iPhone).

Step 2:

Plug in your iOS device / iPhone, iPod touch or iPad. you will see this now.

Step 3:

Click the device icon on the top of the screen.

Step 4:

Ensure you’re on the Summary tab.

Step 5:

Click on the text that says Serial Number. It should change to say Identifier (UDID).


Step 6:

Select Copy from the Edit menu and your UDID is now in the clipboard, so you can paste it into an email or message.

This is how you can find iPhone, iPod touch or iPad’s unique ID (UDID). 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!

Example to Get Device Information in React Native

This is an Example to Get Device Information in React Native. To get the device information in React Native will use the react-native-device-info library.

In this example, we will show you how to get all the information about the device using a single library. We will get the following details in this example.

MethodReturn Type iOSAndroidSince
getAPILevel()number0.12.0
getApplicationName()string0.14.0
getBatteryLevel()Promise<number>0.18.0
getBrand()string0.9.3
getBuildNumber()string?
getBundleId()string?
getCarrier()string0.13.0
getDeviceCountry()string0.9.0
getDeviceId()string0.5.0
getDeviceLocale()string0.7.0
getDeviceName()string?
getFirstInstallTime()number0.12.0
getFontScale()number0.15.0
getFreeDiskStorage()number0.15.0
getIPAddress()Promise<string>0.12.0
getInstallReferrer()string0.19.0
getInstanceID()string?
getLastUpdateTime()number0.12.0
getMACAddress()Promise<string>0.12.0
getManufacturer()string?
getMaxMemory()number0.14.0
getModel()string?
getPhoneNumber()string0.12.0
getReadableVersion()string?
getSerialNumber()string0.12.0
getSystemName()string?
getSystemVersion()string?
getTimezone()string?
getTotalDiskCapacity()number0.15.0
getTotalMemory()number0.14.0
getUniqueID()string?
getUserAgent()string0.7.0
getVersion()string?
is24Hour()boolean0.13.0
isAirPlaneMode()Promise<boolean>0.25.0
isEmulator()boolean?
isPinOrFingerprintSet()(callback)boolean0.10.1
isTablet()boolean?
hasNotch()boolean0.23.0
isLandscape()boolean0.24.0
getDeviceType()string?

So let’s get started with the example to Get Device Info.

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 DeviceInfo we need to install react-native-device-info dependency.

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

Run the following command to install

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

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

Linking of Dependency

After installing the dependency 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.

Additional Permission for Android

To use getIPAddress in Android you need to get the permission in Android. So to get the permission, add the blow line into your AndroidManifest.xml

 

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

      

This is how you can get the Device Info. 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. 🙂

Load Local HTML File or URL in React Native using react-native-webview

Load Local HTML File or URL in React Native using react-native-webview is the updated and combined post of our last 2 posts Open any Website in React Native WebView and React Native Load Local HTML File in WebView. This is because WebView extracted from the react-native core will be removed in the near future so to overcome this problem I have made this new and updated Post.

In this example, we will use the WebView component from react-native-webview. We will make a single page where we will have 3 buttons which will load the data in WebView from different resources.

Different tasks that you can see in this example are:

1. Loading of WebPage from URL

2. Load HTML Page from a variable with HTML String

3. Load a Local HTML File

Installation of Dependency

To use WebView you need to install react-native-webview dependency.
To install this dependency open the terminal and jump into your project

Run the following commands

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

Linking of Dependency

After installing the dependency 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.

Project File Structure

If you want to load the HTML from the local HTML file into the WebView then you need to put them in the below-described directory.  You have to make 2 copies of the HTML file and have to put them on a different location for Android and IOS. If the directories are not there then please make the directory and then put the HTML file.

1. Android will load the external HTML from project>android>app>src>main>assets>index.html
2. IOS will load the external HTML from project>resources>index.html

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

      

This is how you can Load Local HTML File or URL in React Native using react-native-webview. 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. 🙂

Generate SHA256 Encoded Hash in React Native

Here is How to Generate SHA256 Encoded Hash from any Input Value in React Native. We will use the sha256 component from react-native-sha256 to convert our Input Text into SHA256 Hash.
SHA256 encoding comes into the scene when you talk about the security. Security can be of anything like it can be of your passwords, sessions keys or any other data.

SHA-256 stands for Secure Hash Algorithm – 256 bit and is a type of hash function commonly used in Blockchain. A hash function is a type of mathematical function which turns data into a fingerprint of that data called a hash. It’s like a formula or algorithm which takes the input data and turns it into an output of a fixed length, which represents the fingerprint of the data.

Generate SHA256 Encoded Hash

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 sha256 we have to install react-native-sha256 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-sha256.

–save is optional, it is just to update the react-native-sha256 dependancy 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.

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

      

This is how you can Generate SHA256 Encoded Hash 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 to Use Vector Icons in React Native

This is an Example to Use Vector Icons in React Native using react-native-vector-icons. Vector Icons are perfect for buttons, logos and nav/tab bars. Vector Icons are easy to extend, style and integrate into your project.

You can use Vector Icons very anywhere easily. You can visit the react-native-vector-icons directory to find a variety of icons.

Use of Vector Icons in ReactNative

To use the Vector Icons in React Native you have to import react-native-vector-icons dependency which will provide Icon component and Icon.Button component.

Icon Component

You can use this Icon component to create Icons. Prop “name” will render the icon in Android and IOS.

PropDescriptionDefault
sizeSize of the icon can also be passed as fontSize in the style object.12
nameWhat icon to show, see Icon Explorer app or one of the links above.None
colorThe color of the icon.Inherited

Icon.Button Component

A convenience component for creating buttons with an icon on the left side.

PropDescriptionDefault
colorText and icon color, use iconStyle or nest a Text component if you need different colors.white
sizeIcon size.20
iconStyleStyles applied to the icon only, good for setting margins or a different color. Note: use iconStyle for margins or expect unstable behaviour.{marginRight: 10}
backgroundColorBackground color of the button.#007AFF
borderRadiusBorder radius of the button, set to 0 to disable.5
onPressA function called when the button is pressed.None

In this example, We will create a simple Screen with different icons and will run it in Android and IOS. 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 Icon component you need to install react-native-vector-icons 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. –save is optional, it is just to update the react-native-vector-icons dependency 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.

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 This is an Example to Use Vector Icons in React Native using react-native-vector-icons. 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 Ionicons in React Native using react-native-ionicons

This is an Example to Use Ionicons in React Native using react-native-ionicons. Ionicons are beautifully crafted open source icons built by the Ionic Framework team.

You can use Ionicons very anywhere easily. You can visit the official site of the Ionicons to find a variety of icons.

Use of Ionicons in React Native

To use the Ionicons in React Native you have to import react-native-ionicons dependency which will provide an Icon component. You can use this Icon component to create an Icon.
Prop “name” will render the same icon in Android and IOS.

But if you want to show the different icon for Android and IOS for the same Icon component then you can also use ios and android prop and can set the different icons.

Props

NameTypeDefaultDescription
nameIconNameIcon name used on all platforms
androidIconNameIcon name for Android devices
iosIconNameIcon name for iOS devices
color?stringIcon color
size?number30Icon size, namely fontSize

In this example, We will create a simple Screen with different icons and will run it in Android and IOS to see the changes. 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 Icon component you need to install react-native-ionicons 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. –save is optional, it is just to update the react-native-ionicons dependancy 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.

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 Example to Use Ionicons in React Native using react-native-ionicons. 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 Make a View Like Android Fragment in React Native

In this post, you will see How to Make a View Like Android Fragment in React Native. Developers from android development backgrounds know very well about the Fragment in Android but for those who haven’t heard about that

Android Fragment is the part of the activity, it is also known as sub-activity. There can be more than one fragment in an activity. Fragments represent multiple screens inside one activity.

There is nothing like a Fragment Component in React Native to make a view like the Android Fragment for Android and IOS. To make the fragment view we have to manage the visibility of the child view using state. In this example, I have made a state to store a number. This number will be used to return the screen we want to show using a function. 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.

Project Structure

To start with this example you need to create a directory named components in your project and create three files FirstScreen.js, SecondScreen.js, and ThirdScreen.js in it.

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

App.js

Open components/FirstScreen.js in any code editor and the Replace the code with the following code.

FirstScreen.js

Open components/SecondScreen.js in any code editor and the Replace the code with the following code.

SecondScreen.js

Open components/ThirdScreen.js in any code editor and the Replace the code with the following code.

ThirdScreen.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 to make a view like Android Fragment in React Native for Android and IOS. 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 Expandable List View in React Native

This is an Example of Expandable List View in React Native. To make an Expandable List View we will create an Expandable Component with the help of stylesheet.

Expandable list view is like a sectioned list view but with hidden section content. The heading of the list will always be visible and after clicking the heading you will see the subheading of the list view.

In this example, we will make the Expandable ListView which is similar to an accordion view.

For those who have heard Accordion for the first time; Accordion is frequently used in HTML which is like the expandable list in mobile development.

In this example, we will create an expandable component called ExpandableItemComponent in which will be used as a single expandable item and will take the value dynamically using the prop. In our Main App class, according to the data, we will add this expandable component to a scroll view by passing the data with the help a loop.

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.

Now jump into the project directory using

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

         

This is how you can make an Expandable List View 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 Infinite Loading Listview in React Native using FlatList

This is an Example of Infinite Loading Listview in React Native using FlatList. A React Native list view that supports infinite scroll. In mobile application development, ListView has a very important part as we use ListView in almost all applications. If we have to load a huge amount of data in a listview we have to use pagination for the seamless performance. A ListView with Load More Button in the bottom to load data can be an option but what if we load the data automatically when the user reaches at the end of the list? This feature will give a good user experience to your application users.

For those who don’t know what is pagination?
Let’s take a case where you can simply imagine what if Facebook loads all the Facebook posts from the Facebook database on your Facebook wall? Doesn’t it sound nasty? It will take hundreds of hours even more than that so what is the best way to load the data? Simply paging. When you open the Facebook they just show you 10-20 post and while you scroll the Facebook they load next 10-20 posts in background. That is what the paging is.

In our example,

  1. We are loading the first 10 posts from the web API call in componentDidMount.
  2. While the user reaches the bottom of the list we call the Web API again to get the next 10 posts.

We are using a variable offset to manage the index on upcoming Data. We will increase the offset by 1 after the successful call of the web API so that when we call the web API next time we will get the next data-set. 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.

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 Infinite Loading Listview 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. 🙂