react-native-image-gallery-overlay
v0.0.1
Published
react-native-image-gallery-overlay
Downloads
5
Maintainers
Readme
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.