Bug when using Slider in BottomSheetModal (even with NativeViewGestureHandler)

[hristowwe]

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 and NativeViewGestureHandler

Describe what you expected to happen:

1.o move slider in BottomSheetModal

Reproducible sample code

import React, { useCallback, useMemo, useRef } from "react";
import { View, StyleSheet, Button, Image } from "react-native";
import {
  BottomSheetModal,
  BottomSheetModalProvider,
} from "@gorhom/bottom-sheet";
import { NativeViewGestureHandler } from "react-native-gesture-handler";
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",
                }}
              />
     <NativeViewGestureHandler disallowInterruption={true}>
              <Slider
                style={{ width: "70%", height: 40 }}
                minimumValue={0}
                maximumValue={1}
                minimumTrackTintColor="gray"
                maximumTrackTintColor="#000000"
                thumbTintColor="gray"
              />
        </NativeViewGestureHandler>
              <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;

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.

[Brma1048]

With this it works for me: https://github.com/gorhom/react-native-bottom-sheet/issues/549#issuecomment-894810747