Bug when using Slider in BottomSheetModal

Bug

I am tring to use Slider component from this link github but it cant slide . I can slide only on Iphone but in Android it wont work. I will upload video –>

Environment info

Library	Version
@gorhom/bottom-sheet	3.6.6
react-native	0.64.2
react-native-reanimated	2.2.0
react-native-gesture-handler	1.10.3

Steps To Reproduce

1.Fix slider to working with BottomSheetModal

Describe what you expected to happen:

1. To move slider in BottomSheetModal

Video link (in Android)

https://user-images.githubusercontent.com/57602380/126652126-f49102a2-48d7-4093-a0d6-5831a08b8d0a.mp4

import React, { useCallback, useMemo, useRef } from "react";
import { View, StyleSheet, Button, Image } from "react-native";
import {
  BottomSheetModal,
  BottomSheetModalProvider,
} from "@gorhom/bottom-sheet";
import Slider from "@react-native-community/slider";
const App = () => {
  // ref
  const bottomSheetModalRef = useRef(null);

  // variables
  const snapPoints = useMemo(() => ["25%", "35%"], []);

  // callbacks
  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present();
  }, []);
  const handleSheetChanges = useCallback((index) => {
    console.log("handleSheetChanges", index);
  }, []);

  // renders
  return (
    <BottomSheetModalProvider>
      <View style={styles.container}>
        <Button
          onPress={handlePresentModalPress}
          title="Present Modal"
          color="black"
        />

        <BottomSheetModal
          ref={bottomSheetModalRef}
          index={1}
          snapPoints={snapPoints}
          onChange={handleSheetChanges}
        >
          <View style={styles.contentContainer}>
            <View
              style={{
                flexDirection: "row",
                justifyContent: "center",
                alignContent: "center",
              }}
            >
              <Image
                source={require("./assets/sun.png")}
                style={{
                  width: 20,
                  height: 20,
                  top: 10,
                  opacity: 0.7,
                  right: 5,
                  justifyContent: "center",
                }}
              />
              <Slider
                style={{ width: "70%", height: 40 }}
                minimumValue={0}
                maximumValue={1}
                minimumTrackTintColor="gray"
                maximumTrackTintColor="#000000"
                thumbTintColor="gray"
              />
              <Image
                source={require("./assets/sun.png")}
                style={{ width: 26, height: 26, top: 8, left: 5 }}
              />
            </View>
            <View
              style={{
                flexDirection: "row",
                justifyContent: "center",
                alignContent: "center",
              }}
            ></View>
          </View>
        </BottomSheetModal>
      </View>
    </BottomSheetModalProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    justifyContent: "center",
    backgroundColor: "grey",
  },
  contentContainer: {
    flex: 1,
  },
});

export default App;

[gorhom]

@hristowwe in this case you need to use activeOffsetY & failOffsetX , look at https://github.com/gorhom/react-native-bottom-sheet/blob/18a32e5979d22a693734d1af7fef6cc9887cea67/example/src/screens/integrations/ViewPagerExample.tsx#L12-L19

[hristowwe]

So how can i fix it?