Posts

React Native Touchable using react-native-platform-touchable

This is an Example to Make React Native Touchable using react-native-platform-touchable. We have already seen 4 Different Type of React Native Touchable in our last post in Beginner section. Here we will talk about the React Native Touchable.

React Native Touchable is built into React Native core which is a wrapper around the various Touchable* components in order to use TouchableNativeFeedback whenever possible.

If we talk about Android devices TouchableNativeFeedback  provides the Native experience but it is only supported by the Android and not supported by iOS, So in case of iOS we generally use TouchableOpacity as an alternative solution for the iOS.

In the above situation we have two choices either we use a common Touchable which is TouchableOpacity (Best for both platform) or identify the platform and then apply the Touchable accordingly. If you want to use the first method then its OK, you can proceed with that but if you want to provide the Native experience to your App users then you should go for the second one which makes the code lengthy (not much but a little bit).

react-native-platform-touchable library bought a simple component Touchable for the second case mentioned above. It is a wrapper over various Touchables which makes  the life very easy. You just have to install the dependancy and you are good to go. It will handle all the conditions and will use the Touchable according to the platform to provide the best experience.

For iOS:

TouchableOpacity with default activeOpacity.

For Android:

TouchableNativeFeedback with background from Android app style for Android API <= 20

TouchableOpacity for Android < 5.0

In this example, we will make a simple button with Touchable component to show the rendering of different Touchables according to different platform. So let’s get started.

Import using React Native Communication

To Make Touchable

For this example, we will make a home screen with 1 buttons using Touchable.

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 Touchable we need to install react-native-platform-touchable 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-platform-touchable 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 React Native Touchable using react-native-platform-touchable. 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. 🙂

React Native Get Clicked Location of Touchscreen Using PanResponder

To get the clicked location of touchscreen React Native provides an easy to use the component called PanResponder. it is used to recognize the touch on both Android and iOS mobile phone screens. This example is for those who want to start the gaming applications development in React Native.

To Import PanResponder in Code

Use of PanResponder

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 get clicked the location of the touchscreen. 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 onLongPress on TouchableOpacity in React Native

This is an Example of onLongPress on TouchableOpacity in React Native. As the topic name describes itself, we will set onLongPress on TouchableOpacity button. This is a very common thing that we experience in our daily use like we use to get edit or delete option on long press of any list element or a button. In this example, we will generate an alert on long clicking of a button.

onLongPress Using

So Let’s get started with onLongPress in TouchableOpacity.

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

IOS

     

Android

      

This is how you can add Long Press on TouchableOpacity. 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. 🙂

3 Ways to Add Image Icon Inside Navigation Bar in React Native

Here are the 3 Ways to Add Image Icon Inside Navigation Bar in React Native. If you want to make an application with a React Navigation, you can find a NavigationBar/ ActionBar on the top of the Screen.

If you want to add the image/logo in Navigation Bar you can simply do it using headerLeft: <You Image component/>. To add image Icon inside Navigation Bar here are the following options.

Options to Add Image Icon Inside Navigation Bar

1. For the single screen, you can set the custom header in navigationOptions

2. For the single screen, you can set the custom header in createStackNavigator like this

3. Set custom header in all the screens in once using defaultNavigationOptions

In this example, We will create an ActionBarImage component which can be set easily from anywhere if we follow any option from above. We will set Image/Icon in the left side with header title, header background and text color of the title. 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 switch between the screens and to make a default navigation header you need to install react-navigation and react-native-gesture-handler dependencies.

To install these dependencies 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. –save is optional, it is just to update dependencies in your package.json file.

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 will 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 two files HomeActivity.js and ActionBarImage.js in it.

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

App.js

Open pages/HomeActivity.js in any code editor and the Replace the code with the following code.

HomeActivity.js

Open pages/ActionBarImage.js in any code editor and the Replace the code with the following code.

ActionBarImage.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 set Image Icon inside Navigation Bar. 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. 🙂

React Native Underline Text

In this Example of React Native Underline Text, we will see how can you underline the Text using the Stylesheet property textDecorationLine.

To Underline the Text use

In this example, we will use a style element textDecorationLine: 'Underline' and will apply to the Text so that we can underline the 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.

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

React Native Strikethrough Text

In this Example of React Native Strikethrough Text, we will see how can you strick through the Text using the Stylesheet property textDecorationLine.

To Strike Through the Text use

In this example, we will use a style element textDecorationLine: 'line-through' and will apply to the Text so that we can get a Strike Through 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.

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

React Native Rotate Image View Using Animation

This is an Example of React Native Rotate Image View Using Animation. We are using the property of Animated Component from react-native.

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

IOS

      

Android

     

This is how you can rotate an image with animation. 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. 🙂

React Native Full Screen Background Image

While developing an App we usually need a Full-Screen Background Image, especially while making a Splash / Introductory Screen. So here is the Example of React Native Full Screen Background Image.

To make a full-screen background we are using ImageBackground component provided by React Native.

To Import Image Background in Code

Render Using

1. Static Image Resources

require can also be used for including audio, video or document files in your project. Most common .mp3, .wav, .mp4, .mov, .html and .pdf.

2. Network Requests for Images

3. Uri Data Images

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

Android

IOS

This is how you can set a Full-screen background Image. 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. 🙂

Flip Image View Horizontally Using Animation in React Native

This is an Example to Flip Image View Horizontally Using Animation in React Native. We are using the property of Animated Component from react-native.

To flip image view horizontally using animation, We will flip the image on click of Button. 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.

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 flip the image horizontally using Animation. 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. 🙂