Slider not working on Modal

[sandeepsuthar]

When we added slide on Modal presentation popup, slide not working(touch not working ).

[mustafaAwwal]

I am having the same problem in my implementation.

[fahad86]

I'm seeing this too.. Any workarounds available for this?

[leonardorib]

Seeing this too.

I couldn't find the cause and was needing this as fast as possible for a project. If you are in the same situation you can use this package here: @miblanchard/react-native-slider. Definetly not perfect but solves this particular issue and works well enough in both platforms.

[Muthu011]

Is it fixed ? any workarounds available for this?

[spirit1616]

With version 2.1.1 it works.

[nanokoko89]

With version 2.1.1 it works.

This version i occur this error:

iOS Bundling complete 3183ms
ERROR Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

I tried to AppRegistry it:

import React, { useCallback, useState } from "react";
import RangeSliderRN from "rn-range-slider";
import { AppRegistry, View, Text } from "react-native";

import Label from "./Label";
import Notch from "./Notch";
import Rail from "./Rail";
import RailSelected from "./RailSelected";
import Thumb from "./Thumb";

const RangeSlider = ({ from, to }) => {
const [low, setLow] = useState(from);
const [high, setHigh] = useState(to);

const renderThumb = useCallback(() => , []);
const renderRail = useCallback(() => , []);
const renderRailSelected = useCallback(() => , []);
const renderLabel = useCallback((value) => , []);
const renderNotch = useCallback(() => , []);
console.log(123);
const handleValueChange = useCallback(
(newLow, newHigh) => {
setLow(newLow);
setHigh(newHigh);
},
[setLow, setHigh]
);

return (
<>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
marginVertical: 10,
}}
>

<Text
style={[
{ fontStyle: "italic" },
{ textAlign: "left", fontSize: 14, color: "#D2D2D2" },
]}
>
Min

<Text
style={[{ fontWeight: "bold" }, { fontSize: 18, color: "#000000" }]}
>
{low}€



<Text
style={[
{ fontStyle: "italic" },
{ textAlign: "right", fontSize: 14, color: "#D2D2D2" },
]}
>
Max

<Text
style={[{ fontWeight: "bold" }, { fontSize: 18, color: "#000000" }]}
>
{high}€



<RangeSliderRN
// style={styles.slider}
style={{ width: "100%" }}
min={from}
max={to}
step={1}
floatingLabel
renderThumb={renderThumb}
renderRail={renderRail}
renderRailSelected={renderRailSelected}
// renderLabel={renderLabel}
// renderNotch={renderNotch}
onValueChanged={handleValueChange}
/>
</>
);
};

export default RangeSlider;
AppRegistry.registerComponent("RangeSlider", () => RangeSlider);

But it now work.
Anyone know how to fix this?

[nanokoko89]

anyone fix this? Got same problem!

[prakashkrsingh0]

I have also the same issue. please inform me if somebody finds any solution.

[fahad86]

I found that having the slider inside <Pressable> element makes it to not function.

After replacing all <Pressable> (or any views types which handle touch) with plain views (for testing) it started working.

Now need to figure out how to handle existing behaviour without the parent <Pressable> view of the RangeSlider

[cs-ashiqu]

Any updates here? I'm also facing the same issue? Is there any fix?
@githuboftigran

[Caliman-Nicolae]

Update package manually

PanResponder.create({
   onStartShouldSetPanResponderCapture: trueFunc, // update this to trueFunc
})

It will work inside modal
@cs-ashiqu

[Zakyyy]

@Caliman-Nicolae I am using it inside bottom sheet and still not working after updating
PanResponder.create({ onStartShouldSetPanResponderCapture: trueFunc, // update this to trueFunc })

[Wictor-dev]

Update package manually

PanResponder.create({
   onStartShouldSetPanResponderCapture: trueFunc, // update this to trueFunc
})

It will work inside modal @cs-ashiqu

That work for me as well, thanks.

[vrajmehta22]

Hello Everyone same as you all i was facing the same problem for rn-slider just to fix this replace the following code in the index.tsx file of the rn-slider.. plugin in the node-modules

PanResponder.create({ onStartShouldSetPanResponderCapture: trueFunc, // this is the main thing to get replaced for fixture onMoveShouldSetPanResponderCapture: falseFunc, onPanResponderTerminationRequest: falseFunc, onPanResponderTerminate: trueFunc, onShouldBlockNativeResponder: trueFunc,

I hope this will help :).