A FlatList is the most suitable component in case of showing the same sort of dynamic data in your react native mobile application. In this blog post, I will explain how to show a text message through FlatList when it is empty. When the data source of your FlatList component goes empty, then the user…
TextInput is one of the most important components in React Native. In this blog post, I am sharing with you how to make the TextInput focus automatically. When the TextInput is in focus the keyboard appears automatically and this prompts the user to type in. You can use the autoFocus prop to make the TextInput…
In react native, we use onPress prop in touchable components to enable pressing functionality. But, what about having an onPress function for the View component itself? This feature is one of the things I was missing when I compare react native to native Android development. If you are using react native version greater than 0.55.3…
While developing mobile apps with react native, chances are high that you may come across some scenarios where the value of the variable you declared becomes undefined. So, how to check if a variable is undefined or not in react native as well as JavaScript? Earlier I have written about how to check undefined property…
If you have an image in your react native app and you want to rotate the image to some degree using code, then you are at the right destination. This blog post teaches you how to tilt or rotate an image in react native. If you are looking for how to rotate an image with…
We use modals to show alerts, messages, or any other information to the user. As modals are basically dialog boxes displayed over the parent view, it attracts user attention. Hence, modals are an important component in React Native. In most of the modals, there will be a close button which makes the modal hide when…
Upper case and lower case conversions of text are used for many purposes including form filling and authentication. Converting text to upper case or lower case is pretty easy in react native. You can use the JavaScript methods toLowerCase() as well as toUpperCase() on strings. The usage case of toLowerCase and toUpperCase in react native…
In this blog post, I show you how to make the screen refresh when you navigate back in react native using react navigation library. Most of the react native projects out there prefer react navigation library for the navigation solutions. Usually, when a user navigates back using the back arrow of the header or hardware…
Sometimes, we may need to execute code after some delay. In such cases, we use JavaScript method setTimeout in React Native. The setTimeout method is used to execute a function after waiting a specific amount of time. See the following snippet to see how we use the setTimeout method. The yourFunction will execute only after…
In an earlier post, I have written how to do api calls in react native with axios library. In this blog post, I show you how to use async and await in react native with axios. The following code is from the previous blog post and in that, I use Axios to call API from…
AsyncStorage is used to store data in key-value pairs. Plain and small data can be easily stored with AsyncStorage. If you have something big then adding key-value pairs for every bit of information is ineffective. In such cases, you can convert them to JavaScript objects and store them in AsyncStorage. Before saving AsyncStorage you need…
AsyncStorage is simple global storage for your react native app. It is a key value based storage you can use throughout the app. Sometimes you may need to reset or clear Asyncstorage. As the storage is unencrypted, it is not suitable for storing sensitive data. In situations like logging out, clearing all data stored in…