react-native-image-gallery-overlay

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

Installation

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

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-image-gallery-overlay	0	Boolean
`width`	Sets mainImgWidth,openImgWidth react-native-image-gallery-overlay	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-gallery-overlay'

 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.

Package detail