Merge pull request #523 from archriss/wip-3.8.0

Wip 3.8.0

Author: Benoît Delmaire

.npmignore

@@ -1 +1,4 @@
-/example
+/example
+/node_modules
+package-lock.json
+yarn.lock

CHANGELOG.md

@@ -1,3 +1,14 @@
+## v3.8.0
+
+* Set [`removeClippedSubviews`](https://facebook.github.io/react-native/docs/scrollview#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](https://github.com/archriss/react-native-snap-carousel/pull/439) for more info (thanks [@Jberivera](https://github.com/Jberivera))
+* Allow using a custom scroll component. See [#498](https://github.com/archriss/react-native-snap-carousel/pull/498) for more info (thanks [@martinezguillaume](https://github.com/martinezguillaume))
+* Prevent loop animation from being played when reaching the end of the dataset. See [#443](https://github.com/archriss/react-native-snap-carousel/pull/443) for more info (thanks [@suhanmoon](https://github.com/suhanmoon))
+* Fire the `onTouchStart` prop. See [#464](https://github.com/archriss/react-native-snap-carousel/pull/464) for more info (thanks [@sangle7](https://github.com/sangle7))
+* Add accessibilityLabel to `Pagination`. See [#438](https://github.com/archriss/react-native-snap-carousel/pull/438) for more info (thanks [@thymikee](https://github.com/thymikee))
+* Allow `contentContainerCustomStyle` to override default paddings. See [#482](https://github.com/archriss/react-native-snap-carousel/pull/482) for more info (thanks [@yamov](https://github.com/yamov))
+
 ## v3.7.5
 * Fix issue with `scrollEnabled` introduced in version `3.7.3`... again! (thanks [@ifsnow](https://github.com/ifsnow))
 

CONTRIBUTING.md

@@ -7,6 +7,6 @@ If you would like to report a problem, take a look around and see if someone alr
 :warning: When doing so, you need to fill out [the issue template](https://raw.githubusercontent.com/archriss/react-native-snap-carousel/master/ISSUE_TEMPLATE.md) completely. **This step is mandatory!** Not doing so will result in your issue getting closed. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template.
 
 * **One issue, one bug:** Please report a single bug per issue.
+* **Provide a [Snack example]((https://snack.expo.io/)):** To demonstrate the issue, you need to provide a reduced test case using [Snack](https://snack.expo.io/) and follow [the guidelines for providing a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). More often than not, providing a screencast will also be of tremendous help to understand the matter at stake (a screenshot might sometimes be enough).
 * **Provide reproduction steps:** List all the steps necessary to reproduce the issue. Provide a Snack, share the relevant source code or upload a sample project to GitHub. We should be able to follow these steps to reproduce your issue with minimal effort.
-* **Provide a Snack and/or a screencast:** To demonstrate the issue, you need to provide a reduced test case using [Snack](https://snack.expo.io/) and follow [the guidelines for providing a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). More often than not, providing a screencast will also be of tremendous help to understand the matter at stake (a screenshot might sometimes be enough).
 * **Try out the latest version:** Verify that the issue can be reproduced locally by updating your project to use [the latest commit from `master`](https://github.com/archriss/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md#using-a-specific-commit). The bug may have already been fixed! Also make sure to test the latest stable release of React Native as your issue could be linked to RN's core.

ISSUE_TEMPLATE.md

@@ -21,13 +21,13 @@
 
 ### Have you followed the required steps before opening a bug report?
 
-(Check the step you've followed - replace the space character between the square brackets (`[]`) by an `x`.)
+(Check the step you've followed - put an `x` character between the square brackets (`[]`).)
 
-- [ ] I have read [the guidelines regarding bug report](https://github.com/archriss/react-native-snap-carousel/blob/master/CONTRIBUTING.md).
-- [ ] I have reviewed [the documentation](https://github.com/archriss/react-native-snap-carousel/blob/master/README.md) in its entirety, including the dedicated documentations :books:.
-- [ ] I have searched for [existing issues](https://github.com/archriss/react-native-snap-carousel/issues) and made sure that the problem hasn't already been reported.
-- [ ] I am using [the latest plugin version](https://github.com/archriss/react-native-snap-carousel/releases).
-- [ ] I am following [the issue template](https://raw.githubusercontent.com/archriss/react-native-snap-carousel/master/ISSUE_TEMPLATE.md) closely in order to produce a useful bug report.
+- [] I have read [the guidelines regarding bug report](https://github.com/archriss/react-native-snap-carousel/blob/master/CONTRIBUTING.md).
+- [] I have reviewed [the documentation](https://github.com/archriss/react-native-snap-carousel/blob/master/README.md) in its entirety, including the dedicated documentations :books:.
+- [] I have searched for [existing issues](https://github.com/archriss/react-native-snap-carousel/issues) and made sure that the problem hasn't already been reported.
+- [] I am using [the latest plugin version](https://github.com/archriss/react-native-snap-carousel/releases).
+- [] I am following [the issue template](https://raw.githubusercontent.com/archriss/react-native-snap-carousel/master/ISSUE_TEMPLATE.md) closely in order to produce a useful bug report.
 
 <!--
   Please DO NOT go futher if you've not followed ALL of the above steps.

doc/CUSTOM_INTERPOLATIONS.md

@@ -285,7 +285,7 @@ With custom interpolations, what you're most likely to experience is... nothing!
 
 Two solutions:
 - **Play with the following `FlatList` props** until you find something that suits your needs (or not): `initialNumToRender`, `maxToRenderPerBatch`, `windowSize` and `updateCellsBatchingPeriod`.
-- **Set `useScrollView` to `true`**. End of the bugs. : warning: This is a trade-off: you will have to forget about the performance optimizations that *are supposed* to come with `FlatList`, but your sanity will be preserved. We've chosen this solution for the 'stack' and 'tinder' layouts. **Bear in mind that this solution is not suited for large data sets.**
+- **Set `useScrollView` to `true` and/or `removeClippedSubviews` to `false`**. End of the bugs. :warning: This is a trade-off: you will have to forget about the performance optimizations that *are supposed* to come with `FlatList`, but your sanity will be preserved. We've chosen this solution for the 'stack' and 'tinder' layouts. **Bear in mind that this solution is not suited for large data sets.**
 
 ### Others
 

doc/PROPS_METHODS_AND_GETTERS.md

@@ -41,7 +41,7 @@ Prop | Description | Type | Default
 `lockScrollWhileSnapping` | Prevent the user from swiping again while the carousel is snapping to a position. This prevents miscellaneous minor issues (inadvertently tapping an item while scrolling, stopping the scrolling animation if the carousel is tapped in the middle of a snap, clunky behavior on Android when short snapping quickly in opposite directions). The only drawback is that enabling the prop hinders the ability to swipe quickly between items as a little pause between swipes is needed. **Note that the prop won't have any effect if `enableMomentum` is set to `true`, since it would otherwise impede the natural and expected behavior.** | Boolean | `false`
 `shouldOptimizeUpdates` | Whether to implement a `shouldComponentUpdate` strategy to minimize updates | Boolean | `true`
 `swipeThreshold` | Delta x when swiping to trigger the snap | Number | `20`
-`useScrollView` | Whether to use a `ScrollView` component instead of the default `FlatList` one. The advantages are to avoid rendering issues that can arise with `FlatList` and to provide compatibility with React Native pre- `0.43`. The major drawbacks are that you won't benefit from any of `FlatList`'s advanced optimizations and that you won't be able to use either `VirtualizedList` or `FlatList`'s specific props. **We recommend activating it only with a small set of slides and to test performance thoroughly in production mode.** | Boolean | `false` for `default` layout, `true` for `stack` and `tinder` layouts
+`useScrollView` | Whether to use a `ScrollView` component instead of the default `FlatList` one. The advantages are to avoid rendering issues that can arise with `FlatList` and to provide compatibility with React Native pre- `0.43`. The major drawbacks are that you won't benefit from any of `FlatList`'s advanced optimizations and that you won't be able to use either `VirtualizedList` or `FlatList`'s specific props. **We recommend activating it only with a small set of slides and to test performance thoroughly in production mode.** Since version `3.7.6`, this prop also accepts a custom scroll component (see #498 for more info). | Boolean | `false` for `default` layout, `true` for `stack` and `tinder` layouts
 `vertical` | Layout slides vertically instead of horizontally | Boolean | `false`
 
 ### Loop
@@ -56,7 +56,7 @@ Prop | Description | Type | Default
 Prop | Description | Type | Default
 ------ | ------ | ------ | ------
 `autoplay` | Trigger autoplay on mount. If you enable autoplay, we recommend you to set `enableMomentum` to `false` (default) and `lockScrollWhileSnapping` to `true`; this will enhance user experience a bit. | Boolean | `false`
-`autoplayDelay` | Delay before enabling autoplay on startup & after releasing the touch | Number | `5000`
+`autoplayDelay` | Delay before enabling autoplay on startup & after releasing the touch | Number | `1000`
 `autoplayInterval` | Delay in ms until navigating to the next item | Number |  `3000`
 
 ### Style and animation

doc/TIPS_AND_TRICKS.md

@@ -59,7 +59,7 @@ const sliderWidth = Dimensions.get('window').width;
 const itemWidth = slideWidth + horizontalMargin * 2;
 const itemHeight = 200;
 
-const styles = Stylesheet.create({
+const styles = StyleSheet.create({
     slide: {
         width: itemWidth,
         height: itemHeight,
@@ -95,7 +95,7 @@ const styles = Stylesheet.create({
 
 ## Carousel's stretched height
 
-Since `<Carousel />` is, ultimately, based on `<ScrollView />`, it inherits [its default styles](https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/ScrollView.js#L864) and particularly `{ flexGrow: 1 }`. This means that, by default, **the carousel container will stretch to fill up all available space**.
+Since `<Carousel />` is, ultimately, based on `<ScrollView />`, it inherits [its default styles](https://github.com/facebook/react-native/blob/c38f167019a3c481847d4abc80a458f7784f1336/Libraries/Components/ScrollView/ScrollView.js#L1153-L1169) and particularly `{ flexGrow: 1 }`. This means that, by default, **the carousel container will stretch to fill up all available space**.
 
 If this is not what you're after, you can prevent this behavior by passing `{ flexGrow: 0 }` to prop `containerCustomStyle`.