Environment variables are global variables. The files with the .env extension are suitable for saving variables such as domains, API URLs, endpoints, etc. They help to decouple configuration details from our whole project. How to setup .env file in react native In react native, just adding a .env file is not enough. You have to …
We always want to test our app before creating a signed APK file or ABD file and publishing it to the Google Play Store. Generating a debug APK file not only helps us to test the app ourselves but also let us to share it among other users. Let’s check how to generate debug APK …
Everyone knows the importance of FlatList component in react native apps. FlatList helps us to huge amount of data in the most user friendly way. In this blog post, let’s check how to add a scroll to bottom functionality to FlatList. If you are looking for how to add scroll to top option in flatlist …
How to Add Scroll to Bottom Functionality to FlatList in React Native Read More »
FlatList is one of the most popular components used in react native mobile apps. It helps you to show your data to users in a convenient and scrollable way. A scroll to the top option will be a nice feature for FlatList with so much data. It helps users to return to the top of …
How to Add Scroll to Top Functionality to FlatList in React Native Read More »
If you have worked with any apps with social feeds then you might have faced this issue. The images you receive from the server will have different heights and widths. As a mobile app developer, you may need to show them neatly with a fixed width and dynamic height. Let’s see how to show images …
How to Show Images with Dynamic Height in React Native Read More »
In this blog post, let’s see how to do API calls using Axios, Redux, and Hooks in react native. As the importance of hooks and proper state management increases, making API calls with hooks and redux is a better way and can be helpful for large react native applications. Before starting out, please do install …
React Native API Call Example with Axios, Redux, and Hooks Read More »
TextInput is the component where the end user gives input. Sometimes, we may need to control how the values are inserted to the TextInput. Let’s check how to capitalize the text inserted through TextInput in react native. If you are looking for how to capitalize a Text component in react native then you can check …
How to Capitalize TextInput Component in React Native Read More »
Sometimes, we need to show text in some specific case. There are already JavaScript functions such as toLowerCase and toUpperCase. But having a prop for changing cases or capitalize can make your work simpler. In this react native example, I am using a text style prop named textTransform for the case conversion and capitalization of …
How to Capitalize Text in React Native using Style Read More »
Hooks are integral part of a functional component. The useRef hook is used to invoke methods on react native components. In this blog post, let’s check how to use useRef in react native. We have a TextInput component and a Pressable component. When we press the Pressable component, the text inside TextInput should be cleared …
How to use useRef Hook in React Native Functional Component Read More »
Most of the react native developers are shifting from class-based components to functional components. You can even see changes in the examples given in the official documentation of react native. Many of them are demonstrated using functional components. In this react native tutorial, I am going to show you the basics of functional component with …
When the user interface of your react native app begins to get complex you may need to place or position one view over another view to create components. In this blog post, I will show you a simple react native example where one view is put over another one. We use the style property position …
How to put One View over Another in React Native Read More »
If you are a react native developer who regularly publishes apps through Google Play Store then you might already know this – According to new Google Play Policies, they accept only new Android apps that target at least API level 29 i.e. Android 10. And by 2 November 2020, they also stop updates of existing …
React Native Android Apps must Target Android 10 (API Level 29) Read More »
In this blog post, I will show you how to create a button with a ripple effect in react native without using any external library. We all know that ripple effects come with material design. Ripple effect helps the user to identify that his action such as button press is registered. Please note that I …
How to Create a Button with Ripple Effect in React Native Read More »
The Pressable is a new core component introduced in React Native version 0.63. It is basically a wrapper that detects touch interactions. It is a well-defined component and can be used instead of touchable components such as TouchableOpacity, Button, etc. The Pressable component is very easy to implement as given below. The Pressable component has …
