fix(web): invalidate position on ancestor scroll (#472)

* fix(web): invalidate position on ancestor scroll

Fixes #471. Added a test case to `example-web`.

* Use const isAlreadyInvalidated instead of a comment

Co-authored-by: Bartosz Klonowski <[email protected]>

Author: motiz88

example-web/src/Examples.tsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 // @ts-ignore
-import {Text, View, StyleSheet} from 'react-native';
+import {Text, View, StyleSheet, ScrollView} from 'react-native';
 // @ts-ignore
 import Slider, {SliderProps} from '@react-native-community/slider';
 
@@ -201,4 +201,29 @@ export const examples: Props[] = [
       return <SliderExample disabled value={0.6} />;
     },
   },
+  {
+    title: 'Slider in horizontal scroll view',
+    render() {
+      return (
+        <ScrollView
+          horizontal
+          style={{
+            paddingVertical: 50,
+            borderStyle: 'dotted',
+            borderWidth: 1,
+            flexDirection: 'row',
+            width: 300,
+          }}
+          contentContainerStyle={{ overflowX: 'scroll' }}
+        >
+          <View style={{ width: 400, paddingLeft: 100 }}>
+            <SliderExample maximumValue={100} />
+            <Text style={{ textAlign: 'right', width: 200 }}>
+              Scroll right, then slide ➔
+            </Text>
+          </View>
+        </ScrollView>
+      );
+    },
+  },
 ];

package/src/RNCSliderNativeComponent.web.tsx

@@ -76,7 +76,7 @@ const RCTSliderWebComponent = React.forwardRef(
     const containerSize = React.useRef({width: 0, height: 0});
     const containerPositionX = React.useRef(0);
     const containerRef = forwardedRef || React.createRef();
-    const hasBeenResized = React.useRef(false);
+    const containerPositionInvalidated = React.useRef(false);
     const [value, setValue] = React.useState(initialValue || minimumValue);
     const lastInitialValue = React.useRef<number>();
     const animationValues = React.useRef<AnimationValues>({
@@ -166,18 +166,36 @@ const RCTSliderWebComponent = React.forwardRef(
       }
     }, [initialValue, updateValue, animationValues]);
 
-    const onResize = () => {
-      hasBeenResized.current = true;
-    };
     React.useEffect(() => {
+      const invalidateContainerPosition = () => {
+        containerPositionInvalidated.current = true;
+      };
+      const onDocumentScroll = (e: Event) => {
+        const isAlreadyInvalidated = !containerPositionInvalidated.current;
+        if (
+          isAlreadyInvalidated &&
+          containerRef.current &&
+          // @ts-ignore
+          e.target.contains(containerRef.current)
+        ) {
+          invalidateContainerPosition();
+        }
+      };
       //@ts-ignore
-      window.addEventListener('resize', onResize);
+      window.addEventListener('resize', invalidateContainerPosition);
+      //@ts-ignore
+      document.addEventListener('scroll', onDocumentScroll, {capture: true});
 
       return () => {
         //@ts-ignore
-        window.removeEventListener('resize', onResize);
+        window.removeEventListener('resize', invalidateContainerPosition);
+
+        //@ts-ignore
+        document.removeEventListener('scroll', onDocumentScroll, {
+          capture: true,
+        });
       };
-    }, []);
+    }, [containerRef]);
 
     const containerStyle = StyleSheet.compose(
       {
@@ -242,8 +260,8 @@ const RCTSliderWebComponent = React.forwardRef(
     const getValueFromNativeEvent = (pageX: number) => {
       const {width = 1} = containerSize.current;
 
-      if (hasBeenResized.current) {
-        hasBeenResized.current = false;
+      if (containerPositionInvalidated.current) {
+        containerPositionInvalidated.current = false;
         updateContainerPositionX();
       }
       const containerX = containerPositionX.current;