How to make iOS Simulator Keyboard shown when Running Apps

By default, you use the keyboard hardware of your mac in your iOS simulator. But you may need to test the behavior of the iOS device keyboard when using your react native app. It is also known that React Native has some keyboard-related issues. Switching from a hardware keyboard to a simulator keyboard is easy….

OnPress Function Fires only after Tapping Twice when Keyboard Present React Native Issue Fix

This is a common react native issue especially when you use TextInput with ScrollView / FlatList as a parent. In such cases, the other components like the button respond only when you click or tap outside of the TextInput twice. To solve this React Native issue, you have to use the keyboardShouldPersistTaps prop with ScrollView…

How to Add Activity Indicator in React Native WebView to Show Progress

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…

How to Make an Image Rotate with Animation in React Native

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…

How to Add an Icon inside TextInput in React Native

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…