Using React Native Linear Gradient for Making White Text Visible on Light Images
Rendering text on top of images is a common UI patter for both mobile and web apps. The difficulty with this is that as developers, we can't control what the image will look like - it might be primarily light or primarily dark. So we'll need to ensure that the text shows up on the image regardless of how light or dark it is but without significantly altering the image.
With React Native Linear Gradient, we can be clever about how we darken the image to ensure the text is always visible.
Check out the comparison for the image with and without the using a gradient.
Linear Gradient Expo | Pure React Native libraries that support it.
Instructor: [0:00] We start with an image rendered using ImageBackground from React Native. Over the top of the image, we have a view, which contains the content, with two lines of text, one for the heading and one for the attribution.
[0:14] Since both the image and the text are predominantly white, it can be quite difficult to make out the text from the top of the image. To offset this, we could use the text-shadow properties. Let's set the text-shadow color to black and the text-shadow radius to 1. Let's copy both of these styles also for the attribution.
[0:37] Now, saving this, we can see that the text is slightly easier to make out, but we could definitely do better. Another common solution would be to make the whole image darker. Let's find the view that renders the contents. That's the first view inside the ImageBackground. Let's give it a background color of rgba , , and .4. That's black with 40 percent opacity.
[1:03] Now, saving this, we can see that the text is super easy to make out, but obviously, the image itself is now much darker, which might not be what you want. Ideally, we would like to make only the area with the text darker.
[1:18] Let's import linear gradient from React Native LinearGradient, and let's replace the view that renders the content with the linear gradient. For the colors array, let's go from transparent to rgba , , , .4. Lastly, let's comment out this background color we added earlier.
[1:42] Now, saving this, we'll see that, since we made the opacity a gradient, it only gets applied to the bottom half of the image. Here are the three options side by side to illustrate the comparison.
[1:52] First, we have the image with no alterations. We can see that the text is quite hard to make out. Second, we have the image with the whole of the image overlaid with a 40 percent black opacity. We'll see that the text is easy to make out, but the image is significantly darker.
[2:09] Lastly, we have a linear gradient, making the top of the image look like the original and just the bottom of the image with the gradient applied, making the text easy to see and giving us the best of both worlds.