0.0.1 • Published 4 years ago
react-native-gallery-image-overlay v0.0.1
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.
0.0.1
4 years ago