react-native-overlay-image

Image overlay with transparent background that hides when you tap outside

• Demo
• Installation
• How to use
• Properties
• Contribute

Demo

Try it yourself on this Expo Snack

Installation

1npm install --save react-native-overlay-image

How to use

Import the component

1import ImageOverlay from 'react-native-overlay-image'

1<ImageOverlay
2    source={{
3        uri: 'https://images.unsplash.com/photo-1529665253569-6d01c0eaf7b6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1085&q=80',
4    }}
5/>

Changing opacity of the overlay's background

using CSS rgba() with an opacity between 0 and 1

1<ImageOverlay
2    source={{
3        uri: 'https://images.unsplash.com/photo-1529665253569-6d01c0eaf7b6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1085&q=80',
4    }}
5    modalStyle={{
6        backgroundColor: 'rgba(0, 0, 0, 0.7)'
7    }}  
8/>

Properties

Prop	required	Type	Description
source	Yes	React Native ImageSource	Source of the button image and overlay image
imageButtonStyle	No	ImageStyle	Style of the small image that you tap to zoom
modalStyle	No	ViewStyle	Style of the overlay container of the zoomed image. Useful to change the background color and opacity of the overlay
zoomedImageStyle	No	ImageStyle	Style of the zoomed image overlay. Useful to change its width and height (defaults to 2/3 of the screen width)

Contribute

You are welcome to create a pull request with any improvement, bugfix or documentation.

Component tested on iOS 16 using Expo SDK 47 and React Native version 0.70.5