React Native SafeAreaView for Safe Area Boundaries

In this post, you will see the React Native SafeAreaView for Safe Area Boundaries. According to the definition, a SafeAreaView renders nested content and automatically applies paddings to reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. For those who have no idea about … Read moreReact Native SafeAreaView for Safe Area Boundaries

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 the Beginner section. Here we will talk about the React Native Touchable. React Native Touchable is built in to React Native core which is a wrapper around the various … Read moreReact Native Touchable using react-native-platform-touchable

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. In this example, we will use the WebView component from react-native-webview. We will make a single page where we will have … Read moreLoad Local HTML File or URL in React Native using react-native-webview

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 … Read moreReact Native Get Clicked Location of Touchscreen Using PanResponder

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 … Read moreExample of onLongPress on TouchableOpacity in React Native

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 … Read more3 Ways to Add Image Icon Inside Navigation Bar in React Native

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. Open App.js … Read moreReact Native Underline Text

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 … Read moreReact Native Strikethrough Text

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. Open App.js in any code editor and replace the code with the following code. App.js

IOS        Android         This is how you can rotate an image with animation. … Read moreReact Native Rotate Image View Using Animation

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

Read moreReact Native Full Screen Background Image