How to make iOS Simulator Keyboard shown when Running Apps

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

How to Run your React Native App on Specific iOS Simulator

Most of the times, you may want to test your react native app on different iOS simulators to ensure whether your app works well with all iOS devices. When you run react-native run-ios command it opens up your default iOS simulator. In order to run your app on specific iOS simulator you need to specify … Read more

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 parent. In such cases, the other components like button respond only when you click or tap outside of the TextInput twice. To solve this React Native issue, you have to use keyboardShouldPersistTaps prop with ScrollView or FlatList. Then … Read more

How To Take Screenshots in iPhone Simulator

When we submit our apps to App Store or Play Store, submitting screenshots are mandatory. In this blogpost, I will tell you how to take screenshots in your iOS simulator. Owning all iOS devices is not possible for everyone. Hence, we need to use iOS simulator to take screenshots. And taking screenshots using iPhone simulator … Read more

Requiring unknown Module “571” React Native Error Fix

I was trying to run a React Native project on iPhone simulator with react-native run-ios and came across this react native error:Error: Requiring unknown module “571”.If you are sure the module is there, try restarting Metro Bundler. You may also want to run yarn, or `npm install` (depending on your environment).It was the first time … Read more

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. For showing ActivityIndicator while loading I use two props of WebView- … Read more

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 Animated library from React Native. In the componentDidMount lifecycle 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 … Read more

How to Add an Icon inside TextInput in React Native

Sometimes, you may want to show icon inside your TextInput, specifically saying- an icon aligned to the left of the TextInput. React Native TextInput has inlineImageLeft prop to add icon inside it. Unfortunately inlineImageLeft supports only Android platform. There’s also another prop named inlineImagePadding to adjust the padding of the image inside TextInput. As the … Read more

How to Use Filter Method in React Native

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 Filter method to avoid use of for and while loops and it transform one array into another after ‘filtering’. In the following example, I have a FlatList with … Read more

How to Align Button to Bottom of the Screen in React Native

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 flexbox so that the button would be aligned to the bottom of the screen irrespective of screen size. I have written a sample code below … Read more