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.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`inactiveSlideOpacity` | Value of the opacity effect applied to inactive slides | Number | `0.7`
219
221
`inactiveSlideScale` | Value of the 'scale' transform applied to inactive slides | Number | `0.9`
222
+
`inactiveSlideShift` | Value of the 'translate' transform applied to inactive slides (see [#204](https://github.com/archriss/react-native-snap-carousel/issues/204) for an example usage) | Number | `0`
220
223
`slideStyle` | Optional style for each item's container (the one whose scale and opacity are animated) | Animated View Style Object | `{}`
221
224
222
225
### Callbacks
@@ -406,6 +409,12 @@ export class MyCarousel extends Component {
406
409
407
410
[This plugin](https://github.com/shichongrui/react-native-on-layout) can also prove useful.
408
411
412
+
### Viewport wide slides / no preview effect
413
+
414
+
**If you are using the plugin without the preview effect (meaning that your slides, as well as your slider, are viewport wide), we do not recommend using this plugin.**
415
+
416
+
You'll be better off with [`react-native-swiper](https://github.com/leecade/react-native-swiper) for the simple reason that it implements the `ViewPagerAndroid` component, which provides a way better overall feeling on Android, whereas we must hack our way around [the miscellaneous `ScrollView` limitations](#flatlist-and-scrollviews-limitations).
417
+
409
418
### Understanding styles
410
419
411
420
Here is a screenshot that should help you understand how each of the above variables is used.
@@ -473,18 +482,19 @@ Note that this plugin is built on top of React Native's `FlatList` which, in tur
473
482
- there is no `scrollEnd`event
474
483
-`scrollTo` method doesn't accept any callback
475
484
- Android's `scrollTo` animation is quite brutal
476
-
- it is not possible to specify a scroll duration.
485
+
- it is not possible to specify a scroll duration
486
+
- there are performance issues with the `FlatList` component.
477
487
478
488
On top of that, `FlatList` has [its own set of bugs and buggy behaviors](https://github.com/facebook/react-native/issues?utf8=%E2%9C%93&q=flatlist).
479
489
480
-
We're trying to work around these issues, but the result is not always as smooth as we'd want it to be. **You can help by letting the React Native team know how badly we need those features!** React Native has [a dedicated canny](https://react-native.canny.io/feature-requests) for feature requests; here are the ones that need your vote:
490
+
We're trying to work around these issues, but the result is not always as smooth as we'd want it to be. **You can help by letting the React Native team know how badly we need those features!** React Native has [a dedicated canny](https://react-native.canny.io/feature-requests) for feature requests; here are the ones that need your vote the most:
481
491
- [[ScrollView] Add completion callback to scrollTo](https://react-native.canny.io/feature-requests/p/scrollview-add-completion-callback-to-scrollto)
482
492
- [snapToInterval for Android](https://react-native.canny.io/feature-requests/p/snaptointerval-for-android)
483
493
- [Add speed attribute to scrollTo](https://react-native.canny.io/feature-requests/p/add-speed-attribute-to-scrollto)
484
494
- [Bring ios only methods to Android ScrollView](https://react-native.canny.io/feature-requests/p/bring-ios-only-methods-to-android-scrollview)
Remember that every vote counts and take a look at [#203](https://github.com/archriss/react-native-snap-carousel/issues/203) for more info!
488
498
489
499
### React Native version
490
500
@@ -498,6 +508,14 @@ Bear in mind that we follow RN evolutions closely, which means newer versions of
498
508
499
509
It can take user experience from "crappy and sluggish" to "pretty good" - it's Android though, so nothing like "perfect" or "incredibly smooth"...
500
510
511
+
### Performance tips
512
+
513
+
Here are a few good practices to keep in mind when dealing with the component (or any `FlatList`for that matter):
514
+
1.**Implement `shouldComponentUpdate`** (see [the `shallowCompare` addon](https://www.npmjs.com/package/react-addons-shallow-compare`)) for the `renderItem` component or **make it a `PureComponent`** (some users report that `shouldComponentUpdate` is faster, but you should try both and decide for yourself).
515
+
1. Make sure the carousel **isn't a child of a `ScrollView`** (this includes `FlatList`, `VirtualizedList` and many plugins). Apparently, it would render all child components, even those currently off-screen.
516
+
1. **Add [prop `removeClippedSubviews`](https://facebook.github.io/react-native/docs/scrollview.html#removeclippedsubviews)** and set it to `true` so that out-of-view items are removed.
517
+
1. If your data set is huge, **consider loading additional chunks of data only when the user has reached the end of the current set**. In order to do this, you'll have to play with`VirtualizedList`'s props `onEndReached` and `onEndReachedThreshold`
518
+
501
519
### Unreliable callbacks
502
520
503
521
When `enableMomentum` is disabled (default behavior), providing a reliable callback is really tricky since no `scrollEnd` event has been exposed yet for the `ScrollView` component. We can only rely on the `scrollEndDrag` event, which comes with a huge bunch of issues. See [#34](https://github.com/archriss/react-native-snap-carousel/issues/34) for more information.
@@ -524,6 +542,7 @@ Note that you may want to reverse the order of your data array for your items to
524
542
525
543
## Roadmap
526
544
545
+
- [ ] Add more examples
527
546
- [ ] Implement a custom `PanResponder` for better control over carousel's callbacks and overall feeling
0 commit comments