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.