WebView is an integral component in React Native. You can use it as a mobile browser inside your React Native app. As we know, web pages take some time to load. It’s better to show an ActivityIndicator when the web pages load every time. First of all, install WebView on your project using any of…
In this React Native tutorial, I show you how to rotate an image continuously in React Native. For Animation, we have to use the Animated library from React Native. In useEffect hook, Animated.loop is used to continue the animation as a loop. We also set Animated.Value as 0 in the state. Animated.timing is used to…
Sometimes, you may want to show an icon inside your TextInput, specifically saying- an icon aligned to the left of the TextInput. React Native TextInput has inlineImageLeft prop to add an icon inside it. Unfortunately, inlineImageLeft supports only the Android platform. There’s also another prop named inlineImagePadding to adjust the padding of the image inside…
According to the official documentation, The filter() method creates a new array with all elements that pass the test implemented by the provided function. You can use the Filter method to avoid the use of for and while loops and it transforms one array into another after ‘filtering’. You can use it as given below….
While designing the UI of your app sometimes you may want to place your button at the bottom of the screen. In such cases, you can use the power of the flexbox so that the button would be aligned to the bottom of the screen irrespective of screen size. I have written a sample code…
The map function is used to show a list of elements from an array. Properly saying, The map() method creates a new array with the results of calling a provided function on every element in the calling array. The Map method is commonly used in JavaScript, as you can see in the example given below:…
Want to change the default app icon and notification icon of your React Native app in Android? Then you are at the right place. It would have been a tough task if there was no Android Asset Studio. Android Asset studio helps to create launcher icons as well as notification icons in proper formats. Update:…
Sometimes, you may need to show currency symbols inside your React Native app. For example, if you are creating an app like a currency converter then you certainly need currency symbols. Showing currency symbols in React Native is almost the same as in HTML. Just get the HTML Unicode of the currency and you can…
Pull down to refresh is a cool feature we usually see in Android apps. It helps users to refresh a list or collection of data. In react native, you can use the RefreshControl component to implement pull down to refresh feature. The RefreshControl works as a prop for components such as ScrollView, Flatlist etc. See…
If there were no libraries such as react navigation, navigation in react native would have been an uphill task. In this blog post, you can learn how to create a bottom tab navigator in your react native project. First of all, I recommend you install react navigation into your react native project by following the…
In this blog post, I will show you how to embed a YouTube Video in your react native app using WebView. As you may know, the WebView component is removed from the react native core. But you can use the Webview component from react native community. First of all, install react native webview using the…
The Text component in React Native appears to be simple but it has a lot of props for customization and usability. Sometimes, we want to make the Text component more stylish by having shadows with vibrant colors. In such cases, you don’t need to rely on any third-party component libraries- react native text itself has…