react-native-image-carousel
Image carousel with support for heading, captions, fullscreen mode, image swiping and pinch-to-zoom in fullscreen mode.
Supports both Android and iOS. Zoom feature works on iOS only.
Demo
Installation
npm install --save react-native-image-carousel
Usage
import ImageCarousel from 'react-native-image-carousel'; export default class App extends Component<any, any, any> { _imageCarousel: ImageCarousel; componentWillMount() { (this: any)._renderHeader = this._renderHeader.bind(this); } _renderHeader(): ReactElement<any> { return ( <TouchableWithoutFeedback onPress={this._imageCarousel.close}> <View> <Text style={styles.closeText}>Exit</Text> </View> </TouchableWithoutFeedback> ); } _renderFooter(): ReactElement<any> { return ( <Text style={styles.footerText}>Footer!</Text> ); } _renderContent(idx: number): ReactElement<any> { return ( <Image style={styles.container} source={{ uri: urls[idx] }} resizeMode={'contain'} /> ); } render(): ReactElement<any> { return ( <View style={styles.container}> <ImageCarousel ref={(imageCarousel: ImageCarousel) => { this._imageCarousel = imageCarousel; }} renderContent={this._renderContent} renderHeader={this._renderHeader} renderFooter={this._renderFooter} > {urls.map((url: string): ReactElement<any> => ( <Image key={url} style={styles.image} source={{ uri: url, height: 100 }} resizeMode={'contain'} /> ))} </ImageCarousel> </View> ); } }Check full example in Example folder.
Props and methods
Every prop is optional.
| Name | Type | Description |
|---|---|---|
activeProps? | Object | Props of each child when in fullscreen mode. (For a component to fill the screen activeProp's style must be flex: 1). This prop is ignored in case renderContent prop is provided. |
activeComponents? | [ReactElement<any>] | Active components' bounds will be used for opening/closing fullscreen mode animations. If not provided, the immediate children are used. |
zoomEnabled? | boolean | true by default, if false, children are not zoomable. |
hideStatusBarOnOpen? | boolean | true by default, if false, status bar does not fade out on open. |
renderContent? | (idx: number) => ReactElement<any> | Component to render in fullscreen mode for the given index. |
renderHeader? | () => ReactElement<any> | Component to render at the top when in fullscreen mode. |
renderFooter? | () => ReactElement<any> | Component to render at the bottom when in fullscreen mode. |
onIdxChange? | (idx: number) | Fired on index change in fullscreen mode. |
onOpen? | () => void | Fired on fullscreen mode open. |
onClose? | () => void | Fired on fullscreen mode close. |
react-native-image-carousel also provides two methods for opening and closing the fullscreen mode respectively:
open(startIdx: number), close.
License
MIT License © Anvilabs LLC
