Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.

Overview

react-native-snap-carousel

platforms npm npm

github issues github closed issues Issue Stats



Some great news for you, fellow plugin user!

💡 Head over there now to learn more about all the goodness that's coming your way.



Table of contents

  1. Showcase
  2. Usage
  3. Example
  4. Props, methods and getters
  5. Layouts and custom interpolations
  6. ParallaxImage component
  7. Pagination component
  8. Tips and tricks
  9. Known issues
  10. Important note regarding Android
  11. Important note regarding iOS
  12. Roadmap
  13. Credits

Showcase

🙌 New feature: layouts

Do you want to find out more?

react-native-snap-carousel default layout react-native-snap-carousel tinder layout react-native-snap-carousel stack layout

Real-world examples

These are live apps we've created that make heavy use of the plugin. Don't be shy, share yours if you've done something awesome with it!

react-native-snap-carousel aix react-native-snap-carousel aix

react-native-snap-carousel react-native-snap-carousel react-native-snap-carousel


🤝 Maintainers wanted

Hey there,

Creating and maintaining this plugin has been a fun ride that started in 2016. We thank you all for your appreciation and for making the most out of it! You've motivated us to spend countless hours improving the plugin, and made us happy to give back to the Open Source community.

Put simply, we love this project. However we currently aren't able to give it the love it deserves and the care it requires. If you have enough time and knowledge, and want to become a maintainer, please let us know.

💡 Just head there if you're interested.

We're not abandoning the ship, but we need more people to help us keep it alive and well!


Usage

$ npm install --save react-native-snap-carousel

If you're using Typescript you should also install type definitions:

$ npm install --save @types/react-native-snap-carousel
import Carousel from 'react-native-snap-carousel';

export class MyCarousel extends Component {

    _renderItem = ({item, index}) => {
        return (
            <View style={styles.slide}>
                <Text style={styles.title}>{ item.title }</Text>
            </View>
        );
    }

    render () {
        return (
            <Carousel
              ref={(c) => { this._carousel = c; }}
              data={this.state.entries}
              renderItem={this._renderItem}
              sliderWidth={sliderWidth}
              itemWidth={itemWidth}
            />
        );
    }
}

Example

Here are simple examples that can be edited in real time in your browser:

You can also find a more in-depth (read "complex") one in the /example folder.

react-native-snap-carousel

Props, methods and getters

In order to let you to create mighty carousels and to keep up with your requests, we add new features on a regular basis. Consequently, the list of available props has become really huge and deserves a documentation of its own.

📚 Documentation for "Props, methods and getters"

Layouts and custom interpolations

Built-in layouts

In version 3.6.0, we've added two new layouts on top of the original one: the first one is called 'stack' since it mimics a stack of cards, and the other one is called 'tinder' since it provides a Tinder-like animation.

You can choose between the three of them using the new prop layout and you can modify the default card offset in the 'stack' and 'tinder' layouts with prop layoutCardOffset.

react-native-snap-carousel default layout

<Carousel layout={'default'} />

react-native-snap-carousel stack layout ios react-native-snap-carousel stack layout android

<Carousel layout={'stack'} layoutCardOffset={`18`} />

react-native-snap-carousel tinder layout ios react-native-snap-carousel tinder layout android

<Carousel layout={'tinder'} layoutCardOffset={`9`} />

A few things worth noting:

  • As you can see, the effect had to be inverted on Android. This has to do with a really annoying Android-specific bug.
  • Even though the new layouts have been created with horizontal carousels in mind, they will also work with vertical ones \o/
  • ⚠️ You should NOT use stack or tinder layouts if you have a large data set to display. In order to avoid rendering issues, the carousel will use a ScrollView component rather than a FlatList one for those layouts (see prop useScrollView). The tradeof is that you won't benefit from any of FlatList's advanced optimizations. See this issue for workarounds; or you may want to implement your own custom interpolation.

Custom interpolations

On top of the new layouts, we've exposed the logic we used so that users can create their own awesome layouts! If you're interested, take a deep breath and dive into the dedicated documentation.

📚 Documentation for "Custom interpolations"

Here are a few examples of what can easily be achieved (you can explore the source code and try it live in the provided example):

react-native-snap-carousel custom layout react-native-snap-carousel custom layout react-native-snap-carousel custom layout

ParallaxImage component

Version 3.0.0 introduced a <ParallaxImage /> component, an image component aware of carousel's current scroll position and therefore able to display a nice parallax effect (powered by the native driver to ensure top-notch performance).

📚 Documentation for "ParallaxImage component"

react-native-snap-carousel parallax image

Pagination component

Starting with version 2.4.0, a customizable <Pagination /> component has been added. You can see below how it looks like with its default configuration.

📚 Documentation for "Pagination component"

react-native-snap-carousel pagination

Tips and tricks

We've gathered together all the useful tips and tricks. There is a bunch of them, which makes this section a must-read!

📚 Documentation for "Tips and tricks"

Known issues

Make sure to read about the known issues before opening a new one; you may find something useful.

📚 Documentation for "Known issues"

Important note regarding Android

react-native-snap-carousel android

Android's debug mode is a mess: timeouts regularly desynchronize and scroll events are fired with some lag, which completely alters the inner logic of the carousel. On Android, you will experience issues with carousel's behavior when JS Dev Mode is enabled, and you might have trouble with unreliable callbacks and loop mode when it isn't. This is unfortunate, but it's rooted in various flaws of ScrollView/FlatList's implementation and the miscellaneous workarounds we had to implement to compensate for it.

⚠️ Therefore you should always check if the issue you experience also happens in a production environment. This is, sadly, the only way to test the real performance and behavior of the carousel.

For more information, you can read the following notes: "Android performance" and "Unreliable callbacks".

Important note regarding iOS

react-native-snap-carousel ios

⚠️ When debugging with the iOS simulator, you're only one "Cmd + T" away from toggling "Slow Animations". If carousel's animations seem painfully slow, make sure that you haven't enabled this setting by mistake.

Roadmap

  • Add more examples
  • Base the plugin on a component less buggy than FlatList
  • Implement different layouts and allow using custom interpolations
  • Implement both FlatList and ScrollView handling
  • Add the ability to provide custom items animation
  • Implement 'loop' mode
  • Improve Android's behavior
  • Add parallax image component
  • Base the plugin on FlatList instead of ScrollView
  • Add alignment option
  • Add pagination component
  • Add vertical implementation
  • Handle device orientation event (see this note)
  • Add RTL support
  • Improve momemtum handling
  • Improve snap on Android
  • Handle passing 1 item only
  • Fix centering

Credits

Written by Benoît Delmaire (bd-arc) and Maxime Bertonnier (Exilz) at Meliorence.

Issues
  • Warning : Calling 'getNode()' on the ref an Animated Component is no longer necessary.

    Warning : Calling 'getNode()' on the ref an Animated Component is no longer necessary.

    Is this a bug report, a feature request, or a question?

    Question

    Have you followed the required steps before opening a bug report?

    (Check the step you've followed - put an x character between the square brackets ([]).)

    Have you made sure that it wasn't a React Native bug?

    It is a warning regarding deprecation of the method getNode().

    Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

    (Write your answer here and specify the iOS/Android versions on which you've been able to reproduce the issue.)

    Is the bug reproductible in a production environment (not a debug one)?

    Yes.

    Environment

    React native: 0.62.0 react-native-snap-carousel: 3.8.4

    Target Platform: Android (9.0) iOS (13.3)

    Expected Behavior

    No warning should be raised. Upgrade is needed.

    Actual Behavior

    Raise of a warning. image

    Reproducible Demo

    (Paste the link to a Snack example in which the issue can be reproduced. Please follow the guidelines for providing a Minimal, Complete, and Verifiable example.)

    Steps to Reproduce

    opened by dilinade 44
  • Layout is messed up with RTL devices

    Layout is messed up with RTL devices

    The example from google play doesn't work on LG G2

    opened by dyaacov 35
  • Carousel blank when changing tab for the first time. Will appear after first scroll.

    Carousel blank when changing tab for the first time. Will appear after first scroll.

    Is this a bug report or a feature request?

    Bug report

    Have you read the guidelines regarding bug report?

    Yes

    Have you read the documentation in its entirety?

    Yes

    Have you made sure that your issue hasn't already been reported/solved?

    Yes

    Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

    iOS

    Is the bug reproductible in a production environment (not a debug one)?

    Yes

    Have you been able to reproduce the bug in the provided example?

    Yes

    Environment

    Expo: 24 React: 16.0.0 React Native: 0.51 react-native-snap-carousel: 3.4.0 react-navigation: 1.0.0-beta.21

    Steps to Reproduce

    1. Open project.
    2. Change to tab containing the carousel.
    3. Carousel is blank.
    4. Try to scroll. Carousel will appear back like normal.

    Expected Behavior

    Carousel appear normally.

    Actual Behavior

    So I have multiple carousel on multiple tab. I use react-navigation tabnavigator. On my first screen I have two carousel, and on my second screen I have another carousel. When I run my app, the carousel on the first screen works as expected. But when I change tab to my second screen, the carousel is there, but its blank. I can see it occupying the space for its height but nothing appear there. But when I scroll the page, or I scroll horizontally the area where I expect my carousel to be, it appear. I tested it on newly created snack, the same thing occur. Check my example snack below. This only happen in iOS, on Android its working fine.

    Reproducible Demo

    Open this snack on iOS, or use expo snack emulator. After load, change tab. https://snack.expo.io/@afirulaf/carousel-snap-bug

    react-native bug 
    opened by afirulaf 33
  • Typescript

    Typescript

    2 'bugs' might have been fixed btw

    Platforms affected

    What does this PR do?

    What testing has been done on this change?

    Tested features checklist

    opened by Titozzz 31
  • Feature request/guidance: Zoom an image?

    Feature request/guidance: Zoom an image?

    Is this a bug report or a feature request?

    Feature request.

    I've been struggling (and failing!) quite a bit getting a decent image zoom within a page/swiper. Don't ask me how I missed this control, which looks way more polished than others I've seen so far. I basically just need a gallery, and as such, my users will want to be able to zoom into an image.

    The problem I have probably exists here too though: If I have an ImageZoom control (that allows zooming, panning an image), that will probably collide with the "outer carousel's" own gesture handling. Is there a working sample or guidance I could use as a starting point?

    Thanks!

    * 
    opened by hardcodet 30
  • Problem on re-rendering of component, setting a new firstItem index

    Problem on re-rendering of component, setting a new firstItem index

    I have several miniComponents listed in my carousel and a user can select and deselect these miniComponents on different screens to be visible in the carousel or not. Removing and adding them works splendidly (the miniComponents.map function below).

    So an actual rerendering is on this page with the Carousel happening.

    But if remove one of the miniComponents, my activeMiniCompIndex might chance as components now move to different positions. I set in firstItem the activeMiniCompIndex, the Carousel stays however on the same position. I checked via console.log output that the activeMiniCompIndex is changing and that a rerender is executed in the component containing the carousel, however the carousel is not.

    <Carousel
                ref={carousel => {
                  this._carousel = carousel;
                }}
                firstItem={activeMiniCompIndex}
                sliderWidth={Dimensions.get('window').width}
                itemWidth={Dimensions.get('window').width * 0.75}
                scrollEndDragDebounceValue={0}
                inactiveSlideOpacity={0.8}
                contentContainerCustomStyle={S.carouselContainer}
                onSnapToItem={index => {
                  this.activeMiniCompKeyStorage.set(miniComponents[index].key);
                  if (index !== activeMiniCompIndex) {
                    tracker.trackEvent('miniComponents', 'scrollTo', { label: miniComponents[index].name });
                    this.setState({ activeMiniCompKey: miniComponents[index].key });
                  }
                }}
              >
                {miniComponents.map((miniComponent, index) =>
                  <View key={index}>
                    {this.renderContent(miniComponent)}
                  </View>
                )}
    </Carousel>
    

    I checked your documentation and past issues, unfortunately I couldn't find a solution to this problem.

    Thank you in advance for your help!

    opened by KevKo1990 29
  • Choppy behaviour on iOS when slide's width is small

    Choppy behaviour on iOS when slide's width is small

    I am having a situation where I want to use the carousel to act like an option picker, the user will swipe to choose a certain option. so I am having a slide width of 80 and the width of the slider is the same as the device width. It's working pretty well on android however it's acting very weird on iOS. it may not be clear here but it's even choppier on an actual device.

    Android mar-26-2017 13-27-52

    iOS mar-26-2017 13-50-20

    opened by alialaa 27
  • Consider to use FlatList.

    Consider to use FlatList.

    Did you consider to use FlatList instead of ScrollView? it will improve a lot performance and it has lazy load for items that works properly

    enhancement testers wanted 
    opened by scerelli 26
  • Implement 'loop' mode

    Implement 'loop' mode

    If autoplay is set to true, the carousel jumps from the last slide to the first one whereas it would be better to provide an infinite loop.

    feature 
    opened by bd-arc 25
  • Archriss' showcase app swipe behaviour

    Archriss' showcase app swipe behaviour

    Hi,

    Can you please share what animationFunc & animationOptions do you use in the Archriss' showcase app? The feeling of the swipe in the example app and in the Archriss' showcase app drastically differ...

    opened by grundmanise 23
  • setting zIndex in slideInterpolatedStyle does not work

    setting zIndex in slideInterpolatedStyle does not work

    Is this a bug report, a feature request, or a question?

    question

    I am trying to have my active item to be on top of every other items and it does not seem to work.

    I have tried

    ATTEMPT1: interpolating the zIndex with animated value, just like opacity and scale: does not work

    ATTEMPT2: sending active index as props and using that: does not work

    TEST: just reverting the zIndex: does not work

    • note that the other two interpolating functions, animatedOpacity and animatedScale works fine.

    I'm using iOS which does make use of zIndex. To make sure, I have tested the same with elevation also.

    Anyone with insight please help.

    ` _animatedStyles = (index, animatedValue, carouselProps) => { let animatedOpacity = {}; let animatedScale = {}; let animatedZIndex = {};

      animatedZIndex = {
        // ATTEMPT1: interpolate the animated value
        // zIndex: animatedValue.interpolate({
        //     inputRange: [0, 1],
        //     outputRange: [1, 2]
        // })
    
        // ATTEMPT2: send activeIndex as a prop to the carousel and check if the index matches
        // zIndex: carouselProps.activeIndex == index ? 2 : 1
    
        // TEST: try to revert the zIndices as the docs states.
        // zIndex: carouselProps.data.length - index
      }
    
      if (carouselProps.inactiveSlideOpacity < 1) {
          animatedOpacity = {
              opacity: animatedValue.interpolate({
                  inputRange: [0, 1],
                  outputRange: [0.5, 1]
              })
          };
      }
    
      if (carouselProps.inactiveSlideScale < 1) {
          animatedScale = {
              transform: [{
                  scale: animatedValue.interpolate({
                      inputRange: [0, 1],
                      outputRange: [0.9, 1]
                  })
              }]
          };
      }
    
      return {
          ...animatedOpacity,
          ...animatedScale,
          ...animatedZIndex,
      };
    

    }

            <Carousel
            slideInterpolatedStyle={this._animatedStyles}
            onLayout = {this.layout}
            layout={"default"}
            ref={ref => this.carousel = ref}
            data={this.state.dataToBeUsed}
            sliderWidth={wp('100%')}
            itemWidth={wp('80%')}
            renderItem={this.renderItem}
            activeIndex = {this.state.activeIndex}
            onSnapToItem = { index => this.setState({activeIndex:index}) } />
            )}
    

    `

    Have you followed the required steps before opening a bug report?

    (Check the step you've followed - put an x character between the square brackets ([]).)

    Have you made sure that it wasn't a React Native bug?

    yes since all the other props are working, and zIndex works fine without this library

    Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

    haven't tested on Android with elevation but it's a zIndex issue which is only viable for iOS

    • doesn't work on Android with elevation either.

    Is the bug reproductible in a production environment (not a debug one)?

    haven't tested

    Environment

    "react": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
    "react-native-snap-carousel": "^3.9.1",
    
    iOS 15.1.1
    

    Expected Behavior

    The active item, which can be pinched larger in my case, should be on top of other inactive items, which span like 5% width at the sides

    Actual Behavior

    my active item's enlarged view is hidden behind inactive items.

    Reproducible Demo

    (Paste the link to a Snack example in which the issue can be reproduced. Please follow the guidelines for providing a Minimal, Complete, and Verifiable example.)

    Steps to Reproduce

    can be reproduced by the code above.

    opened by msj-js 0
  • Show different UI when item is active

    Show different UI when item is active

    Is it possible to show the buttons only on active item and the items that are not active don't have any buttons? carousel

    opened by acopetkovic 0
  • #893 Fix Android momentum invalid behaviour: Do not call onSnapToItem…

    #893 Fix Android momentum invalid behaviour: Do not call onSnapToItem…

    … twice.

    Platforms affected

    Android

    What does this PR do?

    Fix issue with calling onSnapToItem twice for Android.

    opened by Romick2005 0
  • Calling carouselRef.current.snapToItem() invoke carousel onSnapToItem twice for Android

    Calling carouselRef.current.snapToItem() invoke carousel onSnapToItem twice for Android

    For my particular case I need to go back to the previous slide if not all fields is filled. So I used carousel onSnapToItem callback to listen to the swipe events. But if I need to go back I call carouselRef.current.snapToItem(invalidFieldSlideIndex), but this cause onSnapToItem to call twice first time with correct index and second with bad index.

    So for example I have 3 slides. Swiping from the first slide and then back I will get on onSnapToItem called three times with the following values: 1 // active slide index (swipe) 0 // active slide index (programmatically call carouselRef.current.snapToItem(0)) 1 // active slide index (called from _onMomentumScrollEnd function passed to the ScrollViewComponent)

    For iOS it is working perfectly well.

    opened by Romick2005 0
  • Update react native documentation's links

    Update react native documentation's links

    • The link references to react naitve documentation have a ".html" postfix in url's path.
    • Clicking on the current outdated links, routes to a 404 not found page.

    fix #890

    opened by pulbee 0
  • Links to react native documentation, resolves to a 404 not found page.

    Links to react native documentation, resolves to a 404 not found page.

    The link references given to react native documentation, in doc/PROPS_METHODS_AND_GETTERS are no longer working, Routing to the links gives back a 404 not found page. The documentation needs to be updated as per the new link scheme of react native's documentation website.

    opened by pulbee 0
  • Scrolling on android appears to get stuck between views unless moved slowly

    Scrolling on android appears to get stuck between views unless moved slowly

    Is this a bug report, a feature request, or a question?

    Bug Report

    Have you followed the required steps before opening a bug report?

    (Check the step you've followed - put an x character between the square brackets ([]).)

    Have you made sure that it wasn't a React Native bug?

    Yes

    Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

    Android

    Is the bug reproductible in a production environment (not a debug one)?

    I have confirmed this by building the android app with NODE_ENV=production in my env file, yes.

    Environment

    Environment: React: 17.0.1 React native: 0.64.2 react-native-snap-carousel: 3.9.1

    Target Platform: Android (12.5.3)

    Expected Behavior

    Swiping between views on Android should snap to the next view when released.

    Actual Behavior

    If I swipe with some (pretty normal) momentum, the carousel will get stuck between 2 pages, and not call the onSnapToItem method. If I swipe slowly and release about halfway, it perfectly snaps perfectly to the next page. I am aware of the performance issues on android and have tried many props/settings and fixes found in various places on the internet and in the issues here, apologies if I've missed something very common.

    Reproducible Demo

    (Paste the link to a Snack example in which the issue can be reproduced. Please follow the guidelines for providing a Minimal, Complete, and Verifiable example.)

    Steps to Reproduce

    These are the current settings after all my efforts.

              <Carousel
                scrollEnabled={calendarState === CalendarState.Open}
                firstItem={prevMonths}
                data={monthData}
                sliderWidth={calendarWidth}
                itemWidth={calendarWidth}
                inactiveSlideOpacity={0.5}
                inactiveSlideScale={0.8}
                inactiveSlideShift={0}
                removeClippedSubviews={false}
                lockScrollWhileSnapping={isAndroid}
                enableMomentum={false}
                disableIntervalMomentum
                enableSnap
                onSnapToItem={onMonthChanged}
                renderItem={renderItem}
              />
    

    https://user-images.githubusercontent.com/83917938/140102710-343fc1d4-5cc4-450a-8041-dd1ebec5324f.mp4

    I am using the carousel to create a calendar, each page is a "month" containing rows of weeks, containing 7 days, there is a lot of elements here when you consider we have potentially 42 "days" per month/page and in my case, up to 7 months at a time....

    opened by droplessjake 6
  • Vertical mode for stacks?

    Vertical mode for stacks?

    anyone who has implemented stacks in vertical mode? if yes please let me know here

    opened by crushy26 0
  • Why swipeThreshold prop removed in v4?

    Why swipeThreshold prop removed in v4?

    why it's removed ? and what's the alternative to this prop? i want to control how strong user must be scroll/snap to next/prev item

    Thanks!

    opened by 7dp 0
  • If the component in this component is clicked twice quickly, the second click event will not be triggered?

    If the component in this component is clicked twice quickly, the second click event will not be triggered?

    Only the second click of the first quick double-click after the component is created will not be triggered, and subsequent clicks will all be triggered.

    opened by ShaoGongBra 1
Releases(v3.9.1)
  • v3.9.1(May 27, 2020)

  • v3.9.0(Apr 3, 2020)

  • v3.8.4(Oct 29, 2019)

    • Remove TypeScript definitions since they were causing issues (thanks @radko93)
      • If you're using Typescript you should install the type definitions this way: npm install --save @types/react-native-snap-carousel
    Source code(tar.gz)
    Source code(zip)
  • v3.8.3(Oct 27, 2019)

    • Seems like it's time to remove the getItemLayout & initialScrollIndex override to properly display the first item when its index is a huge number (thanks @rontalx)
    • Fix snapToItem not working when enableMomentum is set to true on Android (thanks @daaashleywch)
    • Add basic TypeScript support (thanks @facuacostag)
    • Stack layout's peaking items will remain opaque if inactiveSlideOpacity is set to 1
    Source code(tar.gz)
    Source code(zip)
  • v3.8.2(Oct 11, 2019)

  • v3.8.1(Sep 20, 2019)

  • v3.8.0(May 21, 2019)

    • Set removeClippedSubviews to false by default for 'tinder' and 'stack' layouts, or when useScrollView is set to true. This aims at preventing a bunch of rendering issues.
    • Make sure that autoplay is properly restarted after a touchStart event
    • Allow serialized animated event as onScroll. See #439 for more info (thanks @Jberivera)
    • Allow using a custom scroll component. See #498 for more info (thanks @martinezguillaume)
    • Prevent loop animation from being played when reaching the end of the dataset. See #443 for more info (thanks @suhanmoon)
    • Fire the onTouchStart prop. See #464 for more info (thanks @sangle7)
    • Add accessibilityLabel to Pagination. See #438 for more info (thanks @thymikee)
    • Allow contentContainerCustomStyle to override default paddings. See #482 for more info (thanks @yamov)
    Source code(tar.gz)
    Source code(zip)
  • v3.7.5(Oct 5, 2018)

  • v3.7.4(Sep 13, 2018)

  • v3.7.3(Sep 7, 2018)

  • v3.7.2(Jul 26, 2018)

  • v3.7.1(Jun 11, 2018)

  • v3.7.0(Apr 12, 2018)

    New features and enhancements

    • Add a new callback method: onBeforeSnapToItem()
    • Add prop lockScrollTimeoutDuration
    • Add the ability to enable/disable callback's execution when snaping programmatically
    • Add the ability to change scrollEnabled to true from initially false (thanks @tomauty)

    Bugfixes

    • Fix random errors when accessing wrapped component's reference
    • Fix errors triggered when calling setState() while the component has already been unmounted

    Other

    • Support keyExtractor on ScrollView (thanks @hadimhd)
    Source code(tar.gz)
    Source code(zip)
  • v3.6.0(Jan 29, 2018)

    • Add a layout prop to let users choose between 3 different carousel layouts (see the documentation) react-native-snap-carousel default layout react-native-snap-carousel stack layout react-native-snap-carousel tinder layout
    • Add the ability to define dynamic styles based on scroll position with props scrollInterpolator and slideInterpolatedStyle. This allows implementing custom animations and layouts (see the dedicated documentation).
    • Rename props customAnimationType and customAnimationOptions to activeAnimationType and activeAnimationOptions
    Source code(tar.gz)
    Source code(zip)
  • v3.5.0(Jan 3, 2018)

    Source code(tar.gz)
    Source code(zip)
  • v3.4.0(Nov 6, 2017)

    • Fix snapToItem call that results in snapping to the wrong item when loop is enabled
    • Fix issue that, in some use cases, prevents every items but the initial ones to be rendered
    • On Android, prevent loop and callback issues because scroll offset's value doesn't return an integer
    • Add prop inactiveSlideShift (see #204)
    • Expose FlatList's prop inverted (use at your own risk since it will mess with the current handling of RTL layouts)
    • Set removeClippedSubviews to true by default
    Source code(tar.gz)
    Source code(zip)
  • v3.3.4(Oct 17, 2017)

    • Fix issue with possible faulty index when loopClonesPerSide is greater than data length
    • Guard against setNativeProps() being undefined
    • On Android, make sure that the first item has the proper active style after init
    • On iOS, remove the feature "snap as soon as the previous/next item becomes active when lockScrollWhileSnapping is enabled" since it messes with direct calls to snapToItem()
    Source code(tar.gz)
    Source code(zip)
  • v3.3.3(Oct 10, 2017)

  • v3.3.2(Oct 3, 2017)

  • v3.3.1(Oct 3, 2017)

  • v3.3.0(Oct 2, 2017)

    • Bring in the most wanted 'infinite loop' feature :tada: (see the 'Loop' section for more info about the new props loop and loopClonesPerSide)
    • Improve Android behavior when momentum is disabled
    • Guard against potential errors when component is unmounted
    • Add prop lockScrollWhileSnapping to improve behavior when momentum is disabled
    Source code(tar.gz)
    Source code(zip)
  • v3.2.3(Sep 21, 2017)

  • v3.2.2(Sep 18, 2017)

    • Fix RTL issues
    • Fix issue with active item when enableMomentum was set to true
    • Fix issue with overlapping items (thanks @henninghall)
    • ParallaxImage component: allow overriding default styles
    • Pagination component: adapt to RTL layouts
    Source code(tar.gz)
    Source code(zip)
  • v3.2.1(Sep 14, 2017)

  • v3.2.0(Sep 13, 2017)

    • Refactor callback handling. Make sure to use the new prop callbackOffsetMargin if you experience missed callbacks.
    • Make item's scale and opacity animations follow scroll value (thanks @hammadj)
    • Pagination component: make dots tappable with new props tappableDots and carouselRef (see the example)
    • Fix issue when carousel has been unmounted but parent container requires to re-render
    • Fix state and scroll issues when the currently active item is being dynamically removed
    • Improve snap feeling when momentum is disabled (default)
    • Add prop callbackOffsetMargin
    • Remove props animationFunc, animationOptions, scrollEndDragDebounceValue, snapOnAndroid, and useNativeOnScroll
    Source code(tar.gz)
    Source code(zip)
  • v3.1.0(Aug 24, 2017)

  • v3.0.0(Aug 23, 2017)

    WARNING

    • Do not use this version as some temporary code was pushed to npm by mistake. Make sure to use version 3.1.0 instead.

    Breaking changes

    • Plugin is now built on top of FlatList, which allows for huge performance optimizations. From now on, items must be rendered using props data and renderItem.

    General

    • Add ParallaxImage component (see the specific documentation here)
    • Add prop activeSlideAlignment
    • Fix issue with autoplay when setting scrollEnabled to false
    • Prevent going back to the first item when overscrolling the last one
    • Prevent callback from being called at the wrong time in some specific scenarios
    Source code(tar.gz)
    Source code(zip)
  • v2.4.0(Jul 21, 2017)

    • Add Pagination component (see the specific documentation here)
    • Allow firstItem to be changed dynamically
    • Allow 0 value for carouselHorizontalPadding and carouselVerticalPadding (thanks @bonbonez)
    • Keep the easing of slide's opacity animation linear
    • Use native driver for slide's animation (can be overridden via animationOptions)
    Source code(tar.gz)
    Source code(zip)
  • v2.3.1(Jun 30, 2017)

  • v2.3.0(Jun 16, 2017)

    v2.3.0

    • Refactor callback handling to provide a more reliable solution when momentum is disabled
    • Fix issue with parallel animations (thanks @jnbt)
    • Prevent calls to undefined interpolators when working with dynamic slides (thanks @cskaynar)
    • Improve vertical mode
    • Add prop scrollEndDragDebounceValue
    • Expose current scroll position with this.currentScrollPosition
    • Remove props scrollEndDragThrottleValue and snapCallbackDebounceValue (use scrollEndDragDebounceValue instead)
    Source code(tar.gz)
    Source code(zip)
Owner
Meliorence
📱 Crafting amazing apps with fitness influencers 🥇 Created the #1 fitness app in Taiwan 🇫🇷 The French Touch
Meliorence
react-native-page-swiper ★83 - Page Swiper component for React Native.

react-native-page-swiper Page Swiper component for React Native. Getting Started Installation Basic Usage Properties Examples Development Installation

Fixt 90 Oct 7, 2021
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

FuYaoDe 3.2k Nov 22, 2021
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Shinix 61 Nov 13, 2021
Paged Parallax Swiper with Effects

React Native Parallax Swiper Configurable parallax swiper based on an iOS pattern. Features Flexible. Share one Animated.Value between ParallaxSwiper

Zachary Gibson 600 Nov 27, 2021
iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping

react-native-image-crop-picker iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping Result

Ivan Pusic 5.2k Dec 1, 2021
A react-native confirmation code field compatible with IOS, Android

react-native-confirmation-code-field A simple react-native confirmation code field compatible with iOS, Android. Links Documentation Example app Live

David Narbutovich 641 Nov 24, 2021
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

YunJiang.Fang 347 Jul 23, 2021
A cross-platform (iOS / Android) single and multiple-choice React Native component.

react-native-multiple-choice A cross-platform (iOS / Android) single and multiple-choice React Native component. Install npm i react-native-multiple-c

Dan 68 Nov 16, 2021
Simple carousel component.Fully implemented using Reanimated v2.Support to IOS and ANDROID.

Simple carousel component.Fully implemented using Reanimated v2.Support to IOS and ANDROID.

赵東澔 229 Dec 1, 2021
React Native Carousel control with support for iOS and Android

React Native Carousel Control React Native Carousel with support for both iOS and Android. React >= 16 -> 2.x.x React < 16 -> 1.x.x Installation npm i

Gustavo Machado 238 Nov 18, 2021
react-native-3dcube-navigation ★80 - Page Swiper component with 3D cube transition (horizontal and vertical)

react-native-3dcube-navigation Installation With Yarn $ yarn add react-native-3dcube-navigation With NPM $ npm i react-native-3dcube-navigation --save

Zeh Fernandes 253 Nov 19, 2021
A collection of useful units and a simple grid implementation for responsive layouts in React Native.

react-native-units A collection of useful units and a simple grid implementation for responsive layouts in React Native. React Native uses density-ind

Alex Fox 25 Nov 19, 2021
The best Swiper component for React Native.

The best Swiper component for React Native. react-native-swiper Roadmap see: ROADMAP.md Changelogs [1.6.0-rc] Dependency Remove ViewPagerAndroid, use

斯人 9.8k Dec 2, 2021
Automatic linking of URLs, phone numbers, emails, handles, etc. in strings for React Native

React Native AutoLink Auto-Linking component for React Native. Parses text and wraps URLs, phone numbers, emails, social handles, hashtags, and more w

Josh Swan 465 Nov 26, 2021
This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement

This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement. This list implementation for big list rendering on React Native works with a recycler focused on performance and memory usage and so it permits processing thousands items on the list.

Marco Cesarato 241 Nov 28, 2021
🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

toastify-react-native ?? toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense! De

Zahid Ali 22 Nov 10, 2021
Tinder-like swiper for react-native

react-native-swiper-animated Tinder like animations swiper for React Native ATTENTION! THIS PACKAGE IS NO LONGER UNMAINTAINED!! Unfortunately, I don't

Gozie Ochu 223 Sep 22, 2021
A react native scroll view component with Parallax header :p

RNParallax (react-native-parallax-header) A react native scroll view component with Parallax header :p Inspired by GitHub - jaysoo/react-native-parall

Carol 506 Nov 24, 2021
🏀 Native bounceable effect for any React Native component. Built with Reanimated 2. Compatible with Expo.

Quick start > yarn add rn-bounceable Make sure you have react-native-reanimated and react-native-gesture-handler installed in your project. Usage impo

Batyr 16 Nov 26, 2021