0.0.1 • Published 4 years ago

react-native-gallery-image-overlay v0.0.1

Weekly downloads
2
License
MIT
Repository
github
Last release
4 years ago

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:

PropExplanationDefault ValueType
HeightSets mainImgHeight,openImgHeight with react-native-responsive-screen0Boolean
widthSets mainImgWidth,openImgWidth react-native-responsive-screen0Boolean
BackgroundColormainViewBackgroundColor, openViewBackgroundColorgraysting
renderDatathe images which will be render .{}object
accessibleWhether internal components should be declared as accessible. Useful for iOS XCUITest.trueBoolean

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.