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 … Read more
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 … Read more
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 … Read more
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, … Read more
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 … Read more
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 … Read more
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 … Read more
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 … Read more
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 … Read more
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 … 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 display images … Read more
Apps such as image editing apps or social apps allow users to use their own photos. In this react native tutorial, I am going to show you a camera roll example where the images of your device are listed as a grid. CameraRoll is a react native API that gives access to the user’s photos … Read more
In react native, ImageBackground component is used to set a background image for a screen. The ImageBackground component should be the parent and all other components should be its children. Sometimes, we might need to tweak the background images to create visually beautiful screens. In this blog post, I will explain how to darken background … Read more
The mobile app user interface should be made beautiful to attract the attention of its users. In some scenarios, setting an image as the background for a screen can make the app looks more appealing, and cool. In this blog post, let’s check how to make an image background for a screen in react native. … Read more
