Support attaching animated value to Carousel scroll animated event (#1207)

ethanshar · web-flow · commit 16afa97a1c6d · 2021-02-28T11:57:38.000+02:00
diff --git a/demo/src/screens/componentScreens/CarouselVerticalScreen.tsx b/demo/src/screens/componentScreens/CarouselVerticalScreen.tsx
@@ -1,13 +1,8 @@
 import {Carousel, Constants, Text, View, Colors} from 'react-native-ui-lib';
 import React, {Component} from 'react';
+import {StyleSheet, Animated, TextStyle} from 'react-native';
 import _ from 'lodash';
-import {StyleSheet} from 'react-native';
-import {
-  renderBooleanOption,
-  renderSliderOption
-} from '../ExampleScreenPresenter';
-
-interface Props {}
+import {renderBooleanOption, renderSliderOption} from '../ExampleScreenPresenter';
 
 interface State {
   numberOfPagesShown: number;
@@ -29,10 +24,11 @@ const BACKGROUND_COLORS = [
 
 const pageHeight = Constants.windowHeight / 2;
 
-class CarouselVerticalScreen extends Component<Props, State> {
+class CarouselVerticalScreen extends Component<{}, State> {
   carousel = React.createRef<typeof Carousel>();
+  animatedScrollOffset = new Animated.ValueXY();
 
-  constructor(props: Props) {
+  constructor(props: {}) {
     super(props);
 
     this.state = {
@@ -41,44 +37,70 @@ class CarouselVerticalScreen extends Component<Props, State> {
     };
   }
 
+  renderAnimatedCounter = () => {
+    const {numberOfPagesShown} = this.state;
+    const animatedStyles = _.times(numberOfPagesShown, page => {
+      return {
+        opacity: this.animatedScrollOffset.y.interpolate({
+          inputRange: [pageHeight * page - 50, pageHeight * page, pageHeight * page + 50],
+          outputRange: [0, 1, 0]
+        }),
+        transform: [
+          {
+            translateX: this.animatedScrollOffset.y.interpolate({
+              inputRange: [pageHeight * page - 50, pageHeight * page, pageHeight * page + 50],
+              outputRange: [-50, 0, 50]
+            })
+          }
+        ]
+      };
+    });
+    return (
+      <View absT>
+        {_.times(numberOfPagesShown, page => (
+          <Text key={page} h1 animated style={[styles.animatedPageCounter, animatedStyles[page]] as TextStyle}>
+            {page}
+          </Text>
+        ))}
+      </View>
+    );
+  };
+
   render() {
-    const {numberOfPagesShown, autoplay} = this.state
+    const {numberOfPagesShown, autoplay} = this.state;
     return (
       <View flex paddingT-20>
         <View marginH-20 marginB-20>
           {renderBooleanOption.call(this, 'autoplay', 'autoplay')}
-          {renderSliderOption.call(
-            this,
-            'Number of pages shown',
-            'numberOfPagesShown',
-            {
-              min: 3,
-              max: 10,
-              step: 1,
-              initial: 5
-            }
-          )}
+          {renderSliderOption.call(this, 'Number of pages shown', 'numberOfPagesShown', {
+            min: 3,
+            max: 10,
+            step: 1,
+            initial: 5
+          })}
+        </View>
+        <View>
+          <Carousel
+            key={'carousel'}
+            ref={this.carousel}
+            animatedScrollOffset={this.animatedScrollOffset}
+            scrollEventThrottle={16}
+            autoplay={autoplay}
+            pageWidth={Constants.windowWidth}
+            pageHeight={pageHeight}
+            initialPage={0}
+            containerStyle={{height: pageHeight}}
+            allowAccessibleLayout
+            horizontal={false}
+          >
+            {_.map([...Array(numberOfPagesShown)], (_, index) => (
+              <Page style={{backgroundColor: BACKGROUND_COLORS[index]}} key={index}>
+                <Text style={styles.pageText}>{index}</Text>
+              </Page>
+            ))}
+          </Carousel>
+          {this.renderAnimatedCounter()}
         </View>
-        <Carousel
-          key={'carousel'}
-          ref={this.carousel}
-          autoplay={autoplay}
-          pageWidth={Constants.windowWidth}
-          pageHeight={pageHeight}
-          initialPage={0}
-          containerStyle={{height: pageHeight}}
-          allowAccessibleLayout
-          horizontal={false}
-        >
-          {_.map([...Array(numberOfPagesShown)], (_, index) => (
-            <Page
-              style={{backgroundColor: BACKGROUND_COLORS[index]}}
-              key={index}
-            >
-              <Text style={styles.pageText}>{index}</Text>
-            </Page>
-          ))}
-        </Carousel>
       </View>
     );
   }
@@ -103,7 +125,12 @@ const styles = StyleSheet.create({
   pageText: {
     fontSize: 40,
     color: 'white'
+  },
+  animatedPageCounter: {
+    position: 'absolute',
+    top: 20,
+    left: 20
   }
 });
 
-export default CarouselVerticalScreen
+export default CarouselVerticalScreen;
diff --git a/generatedTypes/components/carousel/index.d.ts b/generatedTypes/components/carousel/index.d.ts
@@ -54,6 +54,7 @@ declare class Carousel extends Component<CarouselProps, CarouselState> {
     onMomentumScrollEnd: () => void;
     goToNextPage(): void;
     onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    onScrollEvent: (...args: any[]) => void;
     renderChild: (child: ReactNode, key: Key) => JSX.Element | undefined;
     renderChildren(): JSX.Element[] | null | undefined;
     renderPageControl(): JSX.Element | undefined;
diff --git a/generatedTypes/components/carousel/types.d.ts b/generatedTypes/components/carousel/types.d.ts
@@ -1,10 +1,10 @@
-import { StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent, PointPropType } from 'react-native';
+import { ScrollViewProps, StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent, PointPropType, Animated } from 'react-native';
 import { PageControlProps } from '../pageControl';
 export declare enum PageControlPosition {
     OVER = "over",
     UNDER = "under"
 }
-export interface CarouselProps {
+export interface CarouselProps extends ScrollViewProps {
     /**
      * the first page to start with
      */
@@ -87,6 +87,11 @@ export interface CarouselProps {
      * instead of vertically in a column. The default value is true.
      */
     horizontal?: boolean | null;
+    /**
+     * Pass to attach to ScrollView's Animated.event in order to animated elements base on
+     * Carousel scroll offset (pass new Animated.ValueXY())
+     */
+    animatedScrollOffset?: Animated.ValueXY;
 }
 export interface CarouselState {
     containerWidth?: number;
diff --git a/src/components/carousel/index.tsx b/src/components/carousel/index.tsx
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {Component, RefObject, ReactNode, Key} from 'react';
-import {ScrollView, StyleSheet, LayoutChangeEvent, NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
+import {Animated, ScrollView, StyleSheet, LayoutChangeEvent, NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
 import {Constants} from '../../helpers';
 import {Colors} from '../../style';
 import {asBaseComponent} from '../../commons/new';
@@ -319,6 +319,12 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     _.invoke(this.props, 'onScroll', event);
   };
 
+  // @ts-ignore
+  onScrollEvent = Animated.event([{nativeEvent: {contentOffset: {y: this.props?.animatedScrollOffset?.y, x: this.props?.animatedScrollOffset?.x}}}], {
+    useNativeDriver: true,
+    listener: this.onScroll
+  });
+
   renderChild = (child: ReactNode, key: Key): JSX.Element | undefined => {
     if (child) {
       const paddingLeft = this.props.horizontal ? this.shouldUsePageWidth() ? this.getItemSpacings(this.props) : undefined : 0;
@@ -434,33 +440,34 @@ class Carousel extends Component<CarouselProps, CarouselState> {
   }
 
   renderCarousel() {
-    const {containerStyle, animated, horizontal, ...others} = this.props;
+    const {containerStyle, animated, horizontal, animatedScrollOffset, ...others} = this.props;
     const {initialOffset} = this.state;
     const scrollContainerStyle = this.shouldUsePageWidth()
       ? {paddingRight: this.getItemSpacings(this.props)}
       : undefined;
     const snapToOffsets = this.getSnapToOffsets();
     const marginBottom = Math.max(0, this.getContainerPaddingVertical() - 16);
+    const ScrollContainer = animatedScrollOffset ? Animated.ScrollView : ScrollView;
     return (
       <View animated={animated} style={[{marginBottom}, containerStyle]} onLayout={this.onContainerLayout}>
-        <ScrollView
+        <ScrollContainer
+          showsHorizontalScrollIndicator={false}
+          showsVerticalScrollIndicator={false}
+          decelerationRate="fast"
+          scrollEventThrottle={200}
           {...others}
           ref={this.carousel}
+          onScroll={animatedScrollOffset ? this.onScrollEvent : this.onScroll}
           contentContainerStyle={scrollContainerStyle}
           horizontal={horizontal}
-          showsHorizontalScrollIndicator={false}
-          showsVerticalScrollIndicator={false}
           pagingEnabled={this.shouldEnablePagination()}
           snapToOffsets={snapToOffsets}
-          decelerationRate="fast"
           contentOffset={initialOffset} // iOS only
-          scrollEventThrottle={200}
           onContentSizeChange={this.onContentSizeChange}
-          onScroll={this.onScroll}
           onMomentumScrollEnd={this.onMomentumScrollEnd}
         >
           {this.renderChildren()}
-        </ScrollView>
+        </ScrollContainer>
         {this.renderPageControl()}
         {this.renderCounter()}
       </View>
diff --git a/src/components/carousel/types.tsx b/src/components/carousel/types.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import {StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent, PointPropType} from 'react-native';
+import {ScrollViewProps, StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent, PointPropType, Animated} from 'react-native';
 import {PageControlProps} from '../pageControl';
 
 export enum PageControlPosition {
   OVER = 'over',
   UNDER = 'under'
 }
 
-export interface CarouselProps {
+export interface CarouselProps extends ScrollViewProps {
   /**
    * the first page to start with
    */
@@ -85,12 +85,16 @@ export interface CarouselProps {
    * the amount of ms to wait before switching to the next page, in case autoplay is on
    */
   autoplayInterval?: number;
-
   /**
    * When true the scroll view's children are arranged horizontally in a row
    * instead of vertically in a column. The default value is true.
    */
   horizontal?: boolean | null;
+  /**
+   * Pass to attach to ScrollView's Animated.event in order to animated elements base on 
+   * Carousel scroll offset (pass new Animated.ValueXY())
+   */
+  animatedScrollOffset?: Animated.ValueXY;
 }
 
 export interface CarouselState {
