GitHub

Swiper component for React Native with previews and snapping effect. #reactnative #carousel

  • snapToNext (animated = true) Snap to next item manually
  • Callback fired when navigating to an item
  • create ({ slide : { width : itemWidth // other styles for your item’s container } }; < Carousel itemWidth = {itemWidth} slideStyle = { styles .
  • Delay in ms until navigating to the next item
  • snapToItem (index, animated = true) Snap to an item manually

react-native-snap-carousel – Swiper component for React Native with previews and snapping effect. Compatible with Android & iOS.

@DevManny_: Swiper component for React Native with previews and snapping effect. #reactnative #carousel

Simple swiper component for React Native with previews and snapping effect. Compatible with Android & iOS. Pull requests are very welcome!

You can try these examples live in Archriss’ showcase app on android and ios. Note that the app is still WIP.

import Carousel from ‘react-native-snap-carousel’; _renderItem (data, index) { return ( … ); } render () { }

In addition of these props, you can provide any prop from ScrollView since it’s using it both on Android & iOS.

renderItem Function returning a react element. The entry data is the 1st parameter, its index is the 2nd Function Required

true

false

true

true

false

null

null

You can find the following example in the /example folder.

If you need some extra horizontal margin between slides (besides the one resulting from the scale effect), you should add it as

on the slide container. Make sure to take this into account when calculating item’s width.

const slideWidth = 250; const horizontalMargin = 40; const itemWidth = slideWidth + horizontalMargin * 2; const styles = Stylesheet.create({ slide: { width: itemWidth // other styles for your item’s container } };

, the snapping effect can now be based on momentum instead of when you’re releasing your finger. It means that the component will wait until the

isn’t moving anymore to snap. By default, the inertia isn’t too high on Android. However, we had to tweak the default iOS value a bit to make sure the snapping isn’t delayed for too long. You can adjust this value to your needs thanks to this prop.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

GitHub