From 52227a631d4097a69131c1ff8cc304a4d0db1d65 Mon Sep 17 00:00:00 2001 From: Pulkit Saini <54940154+pulbee@users.noreply.github.com> Date: Mon, 8 Nov 2021 20:42:07 +0530 Subject: [PATCH 1/4] 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. --- doc/PROPS_METHODS_AND_GETTERS.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/doc/PROPS_METHODS_AND_GETTERS.md b/doc/PROPS_METHODS_AND_GETTERS.md index 0deff3ca..e5dd26b5 100644 --- a/doc/PROPS_METHODS_AND_GETTERS.md +++ b/doc/PROPS_METHODS_AND_GETTERS.md @@ -35,7 +35,7 @@ Prop | Description | Type | Default `callbackOffsetMargin` | Scroll events might not be triggered often enough to get a precise measure and, therefore, to provide a reliable callback. This usually is an Android issue, which might be linked to the version of React Native you're using (see ["Unreliable callbacks"](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/KNOWN_ISSUES.md#unreliable-callbacks)). To work around this, you can define a small margin that will increase the "sweet spot"'s width. The default value should cover most cases, but **you will want to increase it if you experience missed callbacks**. | Number | `5` `enableMomentum` | See [momentum](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md#momentum) | Boolean | `false` `enableSnap` | If enabled, releasing the touch will scroll to the center of the nearest/active item | Boolean | `true` -`firstItem` | Index of the first item to display. :warning: **Make sure to use inherited props [`getItemLayout`](https://facebook.github.io/react-native/docs/flatlist#getitemlayout) & [`initialScrollIndex`](https://facebook.github.io/react-native/docs/flatlist#initialscrollindex) if the prop doesn't seem to work**. | Number | `0` +`firstItem` | Index of the first item to display. :warning: **Make sure to use inherited props [`getItemLayout`](https://reactnative.dev/docs/flatlist#getitemlayout) & [`initialScrollIndex`](https://reactnative.dev/docs/flatlist#initialscrollindex) if the prop doesn't seem to work**. | Number | `0` `hasParallaxImages` | Whether the carousel contains `` components or not. Required for specific data to be passed to children. | Boolean | `false` `lockScrollTimeoutDuration` | This prop works in conjunction with `lockScrollWhileSnapping`. When scroll is locked, a timer is created in order to release the scroll if something goes wrong with the regular callback handling. **Normally, you shouldn't have to use this prop.** | Number | `1000` `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` @@ -65,7 +65,7 @@ Prop | Description | Type | Default Prop | Description | Type | Default ------ | ------ | ------ | ------ `activeAnimationOptions` | Custom animation options. Note that `useNativeDriver` will be enabled by default and that opacity's easing will always be kept linear. **Setting this prop to something other than `null` will trigger custom animations and will completely change the way items are animated**: rather than having their opacity and scale interpolated based the scroll value (default behavior), they will now play the custom animation you provide as soon as they become active. **This means you cannot use props `layout`, `scrollInterpolator` or `slideInterpolatedStyle` in conjunction with `activeAnimationOptions`.** | Object | `null` -`activeAnimationType` | Custom [animation type](https://facebook.github.io/react-native/docs/animated.html#configuring-animations): either `'decay`, `'spring'` or `'timing'`. Note that it will only be applied to the scale animation since opacity's animation type will always be set to `timing` (no one wants the opacity to 'bounce' around). | String | `'timing'` +`activeAnimationType` | Custom [animation type](https://reactnative.dev/docs/animated#configuring-animations): either `'decay`, `'spring'` or `'timing'`. Note that it will only be applied to the scale animation since opacity's animation type will always be set to `timing` (no one wants the opacity to 'bounce' around). | String | `'timing'` `activeSlideAlignment` | Determine active slide's alignment relative to the carousel. Possible values are: `'start'`, `'center'` and `'end'`. **It is not recommended to use this prop in conjunction with the `layout` one.** | String | `'center'` `containerCustomStyle` | Optional styles for Scrollview's global wrapper | View Style Object | `{}` `contentContainerCustomStyle` | Optional styles for Scrollview's items container | View Style Object | `{}` @@ -89,13 +89,13 @@ Prop | Description | Type | Default ### Inherited props -The component is built on top of the `FlatList` component, meaning it inherits from [`FlatList`](https://facebook.github.io/react-native/docs/flatlist.html), [`VirtualizedList`](https://facebook.github.io/react-native/docs/virtualizedlist.html), and [`ScrollView`](https://facebook.github.io/react-native/docs/scrollview.html). +The component is built on top of the `FlatList` component, meaning it inherits from [`FlatList`](https://reactnative.dev/docs/flatlist), [`VirtualizedList`](https://reactnative.dev/docs/virtualizedlist), and [`ScrollView`](https://reactnative.dev/docs/scrollview). You can use almost all props from this three components, but some of them can't be overriden because it would mess with our implementation's logic. Here are a few useful props regarding carousel's **style and "feeling"**: `scrollEnabled` (if you want to disable user scrolling while still being able to use `Carousel`'s methods), `showsHorizontalScrollIndicator`, `overScrollMode` (android), `bounces` (ios), `decelerationRate` (ios), `scrollEventThrottle` (ios). -And here are some useful ones for **performance optimizations and rendering**: `initialNumToRender`, `maxToRenderPerBatch`, `windowSize`, `updateCellsBatchingPeriod`, `extraData`, `removeClippedSubviews` (the latter may have bugs, as stated in [RN's doc](https://facebook.github.io/react-native/docs/flatlist.html#removeclippedsubviews)). The first three are already implemented with default parameters, but you can override them if they don't suit your needs. +And here are some useful ones for **performance optimizations and rendering**: `initialNumToRender`, `maxToRenderPerBatch`, `windowSize`, `updateCellsBatchingPeriod`, `extraData`, `removeClippedSubviews` (the latter may have bugs, as stated in [RN's doc](https://reactnative.dev/docs/flatlist#removeclippedsubviews)). The first three are already implemented with default parameters, but you can override them if they don't suit your needs. ## Methods From 0aecc4ed305f611966adb5774a03eeb3508c0be2 Mon Sep 17 00:00:00 2001 From: Pulkit Saini <54940154+pulbee@users.noreply.github.com> Date: Mon, 8 Nov 2021 20:48:03 +0530 Subject: [PATCH 2/4] Update TIPS_AND_TRICKS --- doc/TIPS_AND_TRICKS.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/doc/TIPS_AND_TRICKS.md b/doc/TIPS_AND_TRICKS.md index 1b435b60..e7e2456f 100644 --- a/doc/TIPS_AND_TRICKS.md +++ b/doc/TIPS_AND_TRICKS.md @@ -25,13 +25,13 @@ Here are a few good practices to keep in mind when dealing with the component (o * **Implement `shouldComponentUpdate`** (see [the `shallowCompare` addon](https://www.npmjs.com/package/react-addons-shallow-compare`)) for every carousel children (in `renderItem()`) or **make it a `PureComponent`** (some users report that `shouldComponentUpdate` is faster, but you should try both and decide for yourself). * 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. * 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` -* **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 from memory. +* **Add [prop `removeClippedSubviews`](https://reactnative.dev/docs/scrollview#removeclippedsubviews)** and set it to `true` so that out-of-view items are removed from memory. Here are a few other tips given by [@pcooney10](https://github.com/pcooney10) in [this thread](https://github.com/meliorence/react-native-snap-carousel/issues/247#issuecomment-360276562): - Make sure there aren't any excessive calls to `this.setState` in the component that renders the carousels and their parents. - Properly leverage the `initialNumToRender` and `maxToRenderPerBatch` props inherited from `FlatList`, and `windowSize` inherited from `VirtualizedList`. -- Utilize [`InteractionManager`](https://facebook.github.io/react-native/docs/interactionmanager.html) to render the Carousels that are "below the fold". +- Utilize [`InteractionManager`](https://reactnative.dev/docs/interactionmanager) to render the Carousels that are "below the fold". - Avoid using functions and object literals for props declared on components - this apparently results in "new props" during a re-render. Lastly, make sure to read [this note](https://github.com/meliorence/react-native-snap-carousel#important-note-regarding-android) regarding Android and [this one](https://github.com/meliorence/react-native-snap-carousel#important-note-regarding-ios) regarding iOS. @@ -40,7 +40,7 @@ Lastly, make sure to read [this note](https://github.com/meliorence/react-native Since version `1.5.0`, the snapping effect can be based on momentum (by setting `enableMomentum` to `true`) instead of when you're releasing your finger. It means that the component will wait until the `ScrollView` 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](https://facebook.github.io/react-native/docs/scrollview.html#decelerationrate). +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](https://reactnative.dev/docs/scrollview#decelerationrate). If momentum is disabled (default behavior), make sure to play with prop `scrollEndDragDebounceValue` since it can help achieving a better snap feeling. From 46c407f47c1eb244a86543381ee6a1db50e70021 Mon Sep 17 00:00:00 2001 From: Pulkit Saini <54940154+pulbee@users.noreply.github.com> Date: Mon, 8 Nov 2021 20:50:32 +0530 Subject: [PATCH 3/4] Update CUSTOM_INTERPOLATIONS --- doc/CUSTOM_INTERPOLATIONS.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/doc/CUSTOM_INTERPOLATIONS.md b/doc/CUSTOM_INTERPOLATIONS.md index 69f51ac7..83dcd84e 100644 --- a/doc/CUSTOM_INTERPOLATIONS.md +++ b/doc/CUSTOM_INTERPOLATIONS.md @@ -30,7 +30,7 @@ Version `3.6.0` introduced a new cool feature: layouts. On top of the default on ``` -We are able to do all this thanks to React Native's great [Animated API](https://facebook.github.io/react-native/docs/animations.html). Basically, we interpolate the current scroll position and provide to each item a set of animations based on this value. But those new layouts are just the tip of the iceberg. You can easily create others like these ones: +We are able to do all this thanks to React Native's great [Animated API](https://reactnative.dev/docs/animations). Basically, we interpolate the current scroll position and provide to each item a set of animations based on this value. But those new layouts are just the tip of the iceberg. You can easily create others like these ones: ![react-native-snap-carousel custom layout](https://i.imgur.com/slnTbyG.gif) ![react-native-snap-carousel custom layout](https://i.imgur.com/OrdLsCM.gif) @@ -43,7 +43,7 @@ We've decided to expose a way for users to provide their own interpolators, cust ### Prerequisites -- You have some experience with React Native's [Animated API](https://facebook.github.io/react-native/docs/animations.html). +- You have some experience with React Native's [Animated API](https://reactnative.dev/docs/animations). - You have a good understanding of [Animated's interpolations](https://github.com/browniefed/react-native-animation-book/blob/master/INTERPOLATION.md). - You've read and understood [the caveats](#caveats). - You are known for both your mental toughness and the peace of your mind. @@ -295,4 +295,4 @@ We use the native driver to ensure smooth animations and prevent performance iss We hope that you find this feature as awesome and useful as we are. Now go create awesome animations! -We only ask for one thing in return: **please share with us your most interesting interpolations!** \ No newline at end of file +We only ask for one thing in return: **please share with us your most interesting interpolations!** From f949822ae4419d9192567cfdca16b17f73d1e816 Mon Sep 17 00:00:00 2001 From: Pulkit Saini <54940154+pulbee@users.noreply.github.com> Date: Mon, 8 Nov 2021 20:51:34 +0530 Subject: [PATCH 4/4] Update PARALLAX_IMAGE --- doc/PARALLAX_IMAGE.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/doc/PARALLAX_IMAGE.md b/doc/PARALLAX_IMAGE.md index 35273102..e366e152 100644 --- a/doc/PARALLAX_IMAGE.md +++ b/doc/PARALLAX_IMAGE.md @@ -9,14 +9,14 @@ Version `3.0.0` introduced a `` component, an image component a Prop | Description | Type | Default ------ | ------ | ------ | ------ `containerStyle` | Optional style for image's container | View Style Object | `{}` -`dimensions` | Optional on-screen dimensions of the image, as measured with [native methods](https://facebook.github.io/react-native/docs/direct-manipulation.html#other-native-methods). This allows for a bit of optimization, but it's sometimes tricky to get these in responsive layouts. | `{ width: number, height: number }` | `undefined` +`dimensions` | Optional on-screen dimensions of the image, as measured with [native methods](https://reactnative.dev/docs/direct-manipulation#other-native-methods). This allows for a bit of optimization, but it's sometimes tricky to get these in responsive layouts. | `{ width: number, height: number }` | `undefined` `fadeDuration` | Duration of the fade-in effect when image is loaded | Number | `500` `parallaxFactor` | Speed of the parallax effect. Be aware that the bigger the value, the more image will appear "zoomed in". | Number | `0.3` `showSpinner` | Whether to display a spinner while image is loading or not | Boolean | `true` `spinnerColor` | Color of the spinner | String | 'rgba(0, 0, 0, 0.4)' `AnimatedImageComponent` | Custom animated image component | Function Object | `Animated.Image` -All [`` props](https://facebook.github.io/react-native/docs/image.html#props) are also inherited, **particularly `source` which is required**. +All [`` props](https://reactnative.dev/docs/image#props) are also inherited, **particularly `source` which is required**. ## Usage