Posts

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

You have not accepted the license agreements of the following SDK components

You have not accepted the license agreements of the following SDK components

To solve this problem you just need to accept the terms and conditions of the SDK component. To accept the terms and conditions you can use a command line tool sdkmanager.

The sdkmanager is a command line tool that allows you to view, install, update, and uninstall packages for the Android SDK. If you’re using Android Studio, then you do not need to use this tool and you can instead manage your SDK packages from the IDE.

You can find the sdkmanager tool provided in the Android SDK Tools package (For Android version 25.2.3 or higher).

Solution:

We can solve this problem in 2 simple steps:

1. Go to SDK -> tool -> bin using the following command

2. Run the following command to ask for licenses acceptance

It will show you the terms and condition which you have to accept by simply entering y-> Yes or n-> No

That’s it. Now you can run your project again.

This is how you can solve the problem of “You have not accepted the license agreements of the following SDK components”. I hope you have also solved the problem. 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 Remove TextInput Underline in React Native

This is an Example to Remove TextInput Underline in React Native. While working with android you have seen an underline in android devices which is a default property for the Android. If you want to remove that you can use underlineColorAndroid prop which will decide the color of the underline in android.

Remove TextInput Underline Using

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.

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 remove TextInput Underline 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. 🙂

How to Generate Signed Android APK of React Native App

After the development process if you want to upload your application on Google Play Store then you need a signed APK and to generate signed APK you have to generate your signed keystore which stores your name, company name, password etc. So here is How to Generate Signed Android APK of React Native App. Let’s get started.

Generating a signing key

To generate Signed APK you need a signed Key which can be generated by following the below steps

1. Run Terminal/Command prompt as administrator

 

2. Go to your JDK>bin and run the following command which will ask you some details. Fill all the details.

 

3. It will generate a keystore with the name you have given in command.

4. Copy the keystore and paste it in Yourproject>android>app directory

5. Open Yourproject>android>gradle.properties in any code editor.

6.  copy paste the following lines below android.useDeprecatedNdk=true

7. Now Open Yourproject>android>gradle.properties in any code editor

8. add the signing config like the screenshot below

9. Now run following command in YourProject>android from the terminal
Windows:

Linux:

10. You will find the release APK after the successful run of the command.

This is how you can generate signed APK to upload on Google Play Store. If you are still facing the problem or you have anything to share please comment below or contact us here.

Hope you liked it:)

How to Run React Native App On Real Device using Wi-Fi

How to Run React Native App On Real Device using Wi-Fi is the extended version of our previous post on How to Run React Native App On Real Device Android which has the description of how to run the App using USB cable in Real Device. In this post, we will show you how you can connect your device to your development server using Wi-Fi to run the React Native App. So let’s get started.

To do this you have to follow the same steps described in the previous post here to connect via USB as we have to run the application once to open the Developer Menu of the app. If you have successfully installed your application in your device using a USB cable connection then remove the USB cable and follow the following steps:

Make sure your laptop and your phone are on the same Wi-Fi network.

Open the application and shake your device to open the Developer Menu

after opening it click on the Dev Settings
Click on Debug Server Host & port for the device and enter the IP address of your device and port number which is port 8081 (default port for React Native development server)

You can use the following command to get the IP address in different OS

Windows: use ipconfig

Linux: use ifconfig

Mac OS: use ifconfig | grep "inet "

Now go back and click on Refresh Js which will run your App via Wi-Fi Connection

This is how you can run the React Native App on Real Device using Wi-Fi. If you have anything to share please comment below or contact us here.

Hope you liked it:)

How to Run React Native App On Real Device Android

After developing the React Native App it is always a good idea to test it on the real device because many time an app behave differently in the emulator then the real device. This post will cover How to Run React Native App On Real Device in Windows/Linux/Mac.
First of all, to run a debug app in your Android device you need to Enable Debugging over USB. To do this we have to do the following steps:

Go to Settings>About Phone

Find for the Build number or MIUI version and click it multiple time, until it shows you are a developer now

You will find a Developer Option direct in settings or in Additional Settings

  

After that Enable Developer Option and USB debugging

After doing this you have to attach your Real Device with the computer using a USB cable and run the following command on terminal.

Now run your app using

If you get a “bridge configuration isn’t available” error. Then use below command to solve

Here you have to replace <device name> with your device name. You got the name using adb devices.

and then run using

You will found the app running in your real device.

General Problem and Solution

If you are doing some changes and want to see in your device you have to enable the Hot/Live Reloading which can be done form the Developer Menu. To open the Developer Menu in Real Device you just need to shack the device and it will open the Developer Menu popup for you.

This is how you can run the React Native App on Real Device. In some cases, it becomes too hectic to manage cable all the time so there is another solution to Connect Your device with the development server using Wi-Fi.

This is how you can run React Native App on Real Device. If you have anything to share please comment below or contact us here.

Hope you liked it 🙂

Getting SHA1 Fingerprint for Google API Console

Here is an Example of Getting SHA1 Fingerprint for Google API Console. As we all know, To use any Google API in Android we need to generate an API Key from Google API Console. This same API key can be used for accessing multiple APIs under the same project but to generate an API key we need SHA1 fingerprint of our Keystore.

Keystore is basically a place where the private keys for your app are kept. In simple words its a certificate generated by the user or a program, used for signing an Android  app.

Type of Keystores in Android

In Android there are two types of keystores:

  1. Debug Keystore

    Debug Keystore has generated automatically when the Android SDK is installed or run for the first time.

  2. Release Keystore

    Release Keystore has to be generated manually by the user for each application before release. As it requires private information such as name, password etc.

We will see how to generate both API key but first of all the question is why we need two Keystores?

As we all know SHA1 is the unique signature that depends upon the Keystore and Debug Keystore is unique for each system and it is automatically maintained by the Android SDK. So according to that if we sign a Release APK with the debug Keystore we have to update the same application with the same Keystore in future which is easy if you are working on the same machine for the lifetime but it is not practically possible. In this scenario, we will get stuck if we have to change the machine so to remove this problem we generate a Release Keystore (.jks) for each App which is transportable and we can update our application from the other machine too by using this Release Keystore.

Obtaining SHA1 Fingerprint from Android Keystore

Debug Keystore

There are two ways to get the Debug Keystore SHA1 which are using the CLI or by using Android Studio. Let’s see both ways:

Using CLI

Windows:
1. Open a terminal window.
2. Change the directory to the JDK bin directory. The path of the JDK depends upon the operating system you are using.

3. Now we have to run the following command using the keytool.exe file in JDK/bin


Ubuntu/Mac:
1. Open a terminal window.
2. Now run the following command

Using Android Studio

Release Keystore

To get the Release key CLI is the only best option we found till now.
Windows:
1. Open a terminal window.
2. Change the directory to the JDK bin directory. The path of the JDK depends upon the operating system you are using.

3. Now we have to run the following command using the keytool.exe file in JDK/bin

Ubuntu/Mac:
1. Open a terminal window.
2. Now run the following command

Example

It will prompt for a password.
Enter the password, you will get the SHA1 and MD5 fingerprint.

We hope this post will help you to get SHA1 Fingerprint for Google API Console. Please check out our other posts to learn React Native.

Handling Android Back Button Press in React Native

When the user presses the Android hardware back button in React Native, react-navigation will pop a screen or exit the app if there are no screens to pop. This is the sensible default behavior, but there are situations when you might want to implement custom handling. This is where handling android back button is useful. You can also check react-navigation-backhandler library to handle the back press.

To handle the Android Back Button Press in the react native we have to register the hardwareBackPress event listener with a callback function, which will be called after pressing the Back Button. We should also remove the listener when we are jumping out from the screen (where we have added the listener) because sometime after going to the next screen or any other screen the listener remains active in the background if the last screen is in the stack and not killed by the system.

The event subscriptions are called in reverse order (i.e. last registered subscription first), and if one subscription returns true then subscriptions registered earlier will not be called. 

1. Add the hardwareBackPress using

2. Remove the hardwareBackPress using

3. To handle the event we have used the function handleBackButtonClick.

Returning true from handleBackButtonClick denotes that we have handled the event, and react-navigation’s listener will not get called, thus not popping the screen. Returning false will cause the event to bubble up and react-navigation’s listener will pop the screen.

Why not use component lifecycle methods?

At first, you may be inclined to use componentDidMount to subscribe for the back press event and componentWillUnmount to unsubscribe. The reason, why we do not use them, is that they are not generally called when entering or leaving a screen.

More specifically, consider a StackNavigator with screens A and B. After navigating to A, its componentDidMount is called. When pushing B, its componentDidMount is also called, but A remains mounted and its componentWillUnmount is therefore not called.

Similarly, when going back from B to AcomponentWillUnmount of B is called, but componentDidMount of A is not because A remained mounted the whole time.

So here was the big discussion. Now Let’s start with the code.

In our example, we are going from FirstPage to SecondPage using navigate and after clicking Back Button on SecondPage we will navigate to ThirdPage with an alert. We have also used this.props.navigation.goBack(null); on ThirdPage to popup the default screen. So let’s get started.

This example will work for the React Navigation Version 3+. If you are using Version 2+ then please find the comments in the code for the suitable changes or can see our old post React Native Navigation Version 2+ for the help.

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 createStackNavigator you need to install react-navigation and react-native-gesture-handler dependencies.

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

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.

Project File Structure

To start with this Example you need to create a directory named pages in your project and create three files FirstPge.js, SecondPage.js, and ThirdPage.js.

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

App.js

Open pages/FirstPage.js in any code editor and replace the code with the following code.

FirstPage.js

Open pages/SecondPage.js in any code editor and replace the code with the following code.

SecondPage.js

Open pages/ThirdPage.js in any code editor and replace the code with the following code.

ThirdPage.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 way to handle the Android Back Button. 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. 🙂