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-1

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.

GitHub

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.">