Package Exports
- react-native-grid-image-viewer-with-caption
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-grid-image-viewer-with-caption) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-native-grid-image-viewer-with-caption
A grid display for multiple images with caption which you can view on clicking in fullscreen mode and swipe through.
Key Points
- Grid Image Viewer With Caption
- Full Screen Mode Image Viewer
- Max Lightweight Component
- No Dependency, No Configuration
- Click on image to view full screen
- Smooth Animation
- Swipe image to navigate to next image
- Available for iOS and Android
- Also works with Expo
Installation
npm i react-native-grid-image-viewer-with-caption --save
or
yarn add react-native-grid-image-viewer-with-caption
Usage
Class component
import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import GridImageViewerCaption from 'react-native-grid-image-viewer-with-caption';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
gallery:[
{ image: 'http://image.jpg', text:'Caption 1' },
{ image: 'http://image.jpg', text:'Caption 2' },
{ image: 'http://image.jpg', text:'Caption 3' }
]
};
}
render() {
return (
<View style={styles.background}>
<Text style={styles.headline_text}>Grid View Images With Caption</Text>
<Text style={styles.explore_text}>Click on an image to view in full screen mode</Text>
<GridImageViewerCaption data={this.state.gallery} captionColor="#fff" />
</View>
);
}
};
const styles = StyleSheet.create({
background: {
backgroundColor: 'black',
flex: 1
},
headline_text: {
color: 'white',
fontSize: 30,
fontWeight: 'bold',
marginTop: 50,
marginLeft: 20
},
explore_text: {
marginTop: 5,
marginBottom: 10,
color: 'white',
marginLeft: 20,
fontSize: 12,
fontWeight: '600'
},
});
Props
Prop | Type | Description |
---|---|---|
data | array | List of images to be displayed in the grid should be in the form: [{image: url1}, {image: url2}, ...] |
headers | json | (Optional) Pass headers, for instance to restrict access. Eg. {'Authorization': 'Bearer ' + 'TOKEN'} |
renderGridImage | function(item, defaultStyle) => Node | (Optional) Custom function to render each image in grid view. Default style must be applied on the returned node and the image itself (if different). |
renderModalImage | function(item, defaultStyle) => Node | (Optional) Custom function to render each image in modal view. Default style must be applied on the |
transparent | int | (Optional) Transparency on the background when single image is viewed in full screen mode, Range=[0, 1] |
Caption Color | string | (Optional) (Default = white) Change the caption color by ading, captionColor="color" |
License
This project is licensed under the MIT License - see LICENSE.md for details
Author
Made by The Coding Beats