Need help with react-native-image-carousel?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

anvilabs
208 Stars 45 Forks MIT License 112 Commits 7 Opened issues

Description

Image carousel with support for fullscreen mode with swiping and pinch-to-zoom.

Services available

!
?

Need anything else?

Contributors list

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

Demo

Installation

npm install --save react-native-image-carousel

Usage

import ImageCarousel from 'react-native-image-carousel';

export default class App extends Component { _imageCarousel: ImageCarousel;

componentWillMount() { (this: any)._renderHeader = this._renderHeader.bind(this); }

_renderHeader(): ReactElement { return ( Exit ); }

_renderFooter(): ReactElement { return ( Footer! ); }

_renderContent(idx: number): ReactElement { return ( ); }

render(): ReactElement { return ( { this._imageCarousel = imageCarousel; }} renderContent={this._renderContent} renderHeader={this._renderHeader} renderFooter={this._renderFooter} > {urls.map((url: string): ReactElement => ( ))} ); } }

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]
| 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
| Component to render in fullscreen mode for the given index. | |
renderHeader?
|
() => ReactElement
| Component to render at the top when in fullscreen mode. | |
renderFooter?
|
() => ReactElement
| 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.