When it comes to handling images, sometimes we may need to convert them to Base64 format. In this tutorial, let’s learn how to convert an image to Base64 string in react native. We use react native blob util library to generate Base64 from the image. You can install the library using the following command. Also,…
In this blog post, we will be discussing how to display a loading placeholder in react native while an image is being loaded from the internet. This can improve the user experience by letting the user know that the image is being loaded and that they should wait. The Image component in react native has…
Adding color filters to images can be a fun and creative way to enhance the appearance of an image in your mobile app. In this blog post, let’s learn how to apply color filters to an image easily in react native. The react native color max image filters library helps us to apply simple color…
SVG, expanded as Scalable Vector Graphics, is a popular choice for displaying images in applications because they can be scaled to any size without losing quality. In this blog post, let’s learn how to load and display SVG images from URLs in react native. React native doesn’t have inbuilt support for SVG images. Hence, we…
Shadows are a powerful design element and can add depth and character to your app’s user interface. In this tutorial, let’s learn how to add shadows to an image in react native. It’s easy to add shadows to images in react native using a few simple style properties. But, instead of applying the properties directly,…
The Image is one of the most important components in react native. Sometimes, you may need to blur the image for making UI pretty. In this blog post, let’s learn how to blur an image easily in react native. The Image component comes with the blurRadius property that helps us to apply the blur effect…
The Image is one of the most important components in react native. Sometimes, you may need to blur the image for making UI pretty. In this blog post, let’s learn how to blur an image easily in react native. The Image component comes with the blurRadius property that helps us to apply the blur effect…
Expo is a set of tools and services built around React Native that makes it easier to develop and deploy mobile applications. In this blog post, let’s learn how to add an image picker using Expo. I expect you have a react native project created using the Expo CLI. You can easily create an image…
In this blog post, let’s learn how to add an image with rounded corners in react native. We use the Image component and the borderRadius property to create rounded corners for the image. See the following code snippet. You will get the following output. Following is the complete code for reference. Using the borderRadius style…
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…