Most of the time, the react native image component is enough for showing images in your react native app. If your app has so many images to load then you may find issues such as flickering, cache miss, etc with the image component. So, how to make your images optimized and load faster in react…
By default, the elements of react native are arranged vertically. You can also arrange them horizontally using style properties. In this react native tutorial, let’s check how to place your Text component over the Image component. You can place text over an image in react native in multiple ways. The position style property can be…
Sometimes, you may want to add images and apply some darkness to them. In this short tutorial, let’s check how to bring down the brightness of an image in React Native. The Image component of react native doesn’t allow to have children. Hence, we are using ImageBackground component which allows children. The idea here is…
It’s always good to have common color variables throughout your react native project. This helps you to manage your colors and usage easily. Even though this seems pretty obvious beginners may not know how to add a color file in react native. For example, create a file named Colors.js in your project. Then add the…
ESLint is a code analysis tool that helps you to fix issues such as syntax errors in your code easily. Simply, it increases the productivity of a developer. In some rare cases, you may want to disable ESLint for a particular file in react native. The way to disable ESLint for a file is by…
When you are developing a react native app, it’s usual to use console.log function for debugging purposes. Extensive use of console.log may make your app slow. Hence, it would be good to remove console.log from production due to security issues. There are libraries such as redux logger which uses console.log. Manually removing console.log is not…
Razorpay is a popular payment gateway among developers, especially in India. In this react native tutorial, let’s check how to add the Razorpay payment gateway in your react native project. I assume you have an account with Razorpay. Get test API keys from Settings > API Keys. Real money is not used when you use…
Usually, we run react native apps on real Android devices using the USB debugging method. The main issue with this method is that you need your device connected through a USB cable all the time. In this blog post, let’s how to debug or run your react native apps over a wireless network (WiFi). First…
Flipper is a debugging tool backed by Facebook and can be used for debugging Android, iOS, and react native projects. From version 0.62 onwards, React Native comes with default support for Flipper. Let’s check how to use flipper with react native. First of all, you have to install the Flipper app on your PC. You…
PDF is one of the most popular formats used for documents. As a result, you may have to add PDF support to your react native apps. In this blog post, let’s check how to create thumbnails for PDF files in react native. We use a third party library named react native pdf thumbnail to generate…
We get API responses mostly in JSON format. It’s due to the simplicity and popularity of JSON. Sometimes, developers prefer to give API responses in raw text. In this blog post, let’s check how to handle text responses using Fetch in react native. React Native provides Fetch API for our networking needs. Fetch returns promise…
The Portable Document Format (PDF) is one of the most popular formats used for documents. In this blog post, let’s check how to show pdf files in react native. React Native Pdf is a third party that helps us to open and read pdf files from a URL or local assets in react native. It…