Sometimes, you may want to check if a value is undefined or not in react native. The usual scenario you face undefined property is while iterating through a JavaScript object with invalid keys. This blog post helps you to check if a JavaScript object property is undefined or not. In JavaScript, you can make use…
The name conflict may occur in react native when you import components from react native as well as from any other third-party libraries with the same name. Just have a look at the code snippet given below: As you notice, we have imported two Text components, one from react native and the other from react…
React Native provides a StatusBar component to control your app status bar. You can easily create a white color StatusBar with the following snippet: Yes, there’s a problem with the above snippet, the whole status bar turns to white and you can’t see the content such as the signal, battery, etc. In such cases, you…
Sometimes you may want to show an image in a round shape in your React Native app. Usually, we show images such as profile images in a circular shape. In this blog post, let’s check how to add a round image in react native easily. Making round images in Android and iOS is easy. In…
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….
Most of the time, you may want to test your react native app on different iOS simulators to ensure that your app works well with all iOS devices. When you run react-native run-ios command it opens up your default iOS simulator. In this blog post, let’s check how to run your app on a specific…
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…
When we submit our apps to App Store or Play Store, submitting screenshots is mandatory. In this blog post, 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 the iOS simulator to take screenshots. And taking screenshots using…
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…