Content swiper component for React Native that supports fullscreen mode and multiple animations styles with customization support.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.babelrc
.editorconfig
.eslintignore
.eslintrc
.gitignore
LICENSE
README.md
package.json
yarn.lock

README.md

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!