JSPM

react-native-content-swiper

0.1.4
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q31843F
  • License MIT

Swiper component for React Native where you can swipe images and other content

Package Exports

  • react-native-content-swiper

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-content-swiper) 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-content-swiper

React Native Content Swiper is simple "plain JS" image viewer component for your RN/Expo app that includes multiple pre-defined animations, but you can easily make your own.

Component supports orientation that you can limit to happen in fullscreen-mode only, so even if your application is locked to portrait-mode, you can enable image rotations in fullscreen.

Installation

yarn add react-native-content-swiper

Or

npm install react-native-content-swiper

Usage

<ContentSwiper>
  <Image source={yourImage1} />
  <Image source={yourImage2} />
  <Image source={yourImage3} />
</ContentSwiper>

You can use it with normal images, but since we support orientation changes, you can use AutoResizeImage instead to support correct scaling in landscape-mode.

<ContentSwiper>
  <AutoResizeImage source={yourImage1} />
  <AutoResizeImage source={yourImage2} />
  <AutoResizeImage source={yourImage3} />
</ContentSwiper>

You can choose animation style from few predefined animations, but since they are simple interpolators you can easily do your own too.

<ContentSwiper animator={Animators.Stack}>
  <AutoResizeImage source={yourImage1} />
  <AutoResizeImage source={yourImage2} />
  <AutoResizeImage source={yourImage3} />
</ContentSwiper>

Included Animation Styles

Slide SlideZoom RotateY Stack

License

The MIT License.

See LICENSE

For Developers

Any contribution and PR's are welcome. Let's keep it simple, but make it even better!