react-native-gallery-image-overlay

react-native-image-overlay-gallery

An image overlay component built using native Modal which can be invoked from anywhere in the component hierarchy.

Installation

npm install react-native-image-overlay-gallery --save or if you are using Yarn, yarn add react-native-image-overlay-gallery

Features

Unlike other modal/overlay components, it can be triggered from anywhere in the component hierarchy since it is using react-native Modal. no linking is required. Works out of the box for both Android and IOS. Can be customised by passing style props.

Props

This module accepts the following props:

Prop	Explanation	Default Value	Type
Height	Sets mainImgHeight,openImgHeight with react-native-responsive-screen	0	Boolean
width	Sets mainImgWidth,openImgWidth react-native-responsive-screen	0	Boolean
BackgroundColor	mainViewBackgroundColor, openViewBackgroundColor	gray	sting
renderData	the images which will be render .	{}	object
accessible	Whether internal components should be declared as accessible. Useful for iOS XCUITest.	true	Boolean

Examples:

Simple usage

import React from 'react';
import OverlayImgView from 'react-native-image-overlay-gallery'
 
 const imgs =[
  {
    image: require('./img/1.jpg'),
  },
  {
    image: require('./img/2.jpg'),
  },
  {
    image: require('./img/3.jpg'),
  },
  {
    image: require('./img/4.jpg'),
  },
  {
    image: require('./img/3.jpg'),
  },
]
 
class App extends React.PureComponent {
  render(){
  return (
    
    <OverlayImgView 
      columns='3' 
      mainViewBackgroundColor='gray' 
      mainImgWidth='30%'
      mainImgHeight='15%'
      openViewBackgroundColor='black'
      openImgHeight='80%'
      openImgWidth='100%'
      renderData = {imgs}
    />
 
  );
}
 
};

Don’t forget to hit star.