How to add a transparent overlay in React Native?

Sometimes, we want to add a transparent overlay in React Native.

In this article, we’ll look at how to add a transparent overlay in React Native.

How to add a transparent overlay in React Native?

To add a transparent overlay in React Native, we can use the ImageBackground component.

For instance, we write:

import * as React from 'react';
import { View, ImageBackground, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

const s = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    width: null,
    height: null,
    backgroundColor: 'red',
    opacity: 0.3,
  },
});

export default function App() {
  return (
    <ImageBackground
      source={{ uri: 'https://picsum.photos/200/300' }}
      style={s.backgroundImage}>
      <View />
    </ImageBackground>
  );
}

to add an ImageBackground with the source set to an object with the uri of the background image.

And we add the backgroundImage style that sets opacity to 0.3 to add a transparent overlay over the image.

Conclusion

To add a transparent overlay in React Native, we can use the ImageBackground component.