osdnk
Slider not working on BottomSheet renderContent
Hello guys.
I have this type BottomSheet
<BottomSheet
callbackNode={fall}
ref={sheetRef}
snapPoints={[99, Dimensions.get("window").height + 50]}
borderRadius={0}
renderContent={renderContent}
/>
And in renderContent have this track status component
import React, { useEffect, useState } from "react";
import { View, Text } from "react-native";
import TrackPlayer from "react-native-track-player";
import { useTrackPlayerProgress } from "react-native-track-player/lib/hooks";
import Slider from "@react-native-community/slider";
import useAudio from "../../hooks/useAudio";
import { getFormattedTime } from "../../utils";
export const TrackStatus = () => {
const { playerConfig } = useAudio();
//the value of the slider should be between 0 and 1
const [sliderValue, setSliderValue] = useState(0);
//flag to check whether the use is sliding the seekbar or not
const [isSeeking, setIsSeeking] = useState(false);
//useTrackPlayerProgress is a hook which provides the current position and duration of the track player.
//These values will update every 250ms
const { position, duration } = useTrackPlayerProgress(250);
//this hook updates the value of the slider whenever the current position of the song changes
useEffect(() => {
if (!isSeeking && position && duration) {
setSliderValue(position / duration);
}
}, [position, duration]);
//this function is called when the user starts to slide the seekbar
const slidingStarted = () => {
setIsSeeking(true);
};
//this function is called when the user stops sliding the seekbar
const slidingCompleted = async (value) => {
await TrackPlayer.seekTo(value * duration);
setSliderValue(value);
setIsSeeking(false);
};
return (
<View style={{ zIndex: 100000, elevation: 100000 }}>
<View
style={{
flexDirection: "row",
paddingHorizontal: 0,
alignItems: "center",
height: 40,
zIndex: 1,
elevation: 1,
zIndex: 10000000,
elevation: 100000000,
}}
>
<Slider
minimumValue={0}
maximumValue={1}
thumbTintColor="#ffffff"
minimumTrackTintColor="#000000"
maximumTrackTintColor="#808080"
onSlidingStart={slidingStarted}
onSlidingComplete={slidingCompleted}
value={sliderValue}
style={{ width: "100%", zIndex: 100000, elevation: 100000 }}
/>
</View>
<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
<Text
style={{
width: 40,
textAlign: "center",
fontSize: 12,
color: "#ffffff",
}}
>
{getFormattedTime(position)}
</Text>
<Text
style={{
width: 40,
textAlign: "center",
fontSize: 12,
color: "#ffffff",
}}
>
{getFormattedTime(duration)}
</Text>
</View>
</View>
);
};
I can't seek the Slider progress value. No actions fired, no move.
Without BottomSheet Slider working correct but in renderContent have no action.
Can you suggest what the problem?
Thanks.
Hello guys.
I have this type BottomSheet
<BottomSheet callbackNode={fall} ref={sheetRef} snapPoints={[99, Dimensions.get("window").height + 50]} borderRadius={0} renderContent={renderContent} />And in renderContent have this track status component
import React, { useEffect, useState } from "react"; import { View, Text } from "react-native"; import TrackPlayer from "react-native-track-player"; import { useTrackPlayerProgress } from "react-native-track-player/lib/hooks"; import Slider from "@react-native-community/slider"; import useAudio from "../../hooks/useAudio"; import { getFormattedTime } from "../../utils"; export const TrackStatus = () => { const { playerConfig } = useAudio(); //the value of the slider should be between 0 and 1 const [sliderValue, setSliderValue] = useState(0); //flag to check whether the use is sliding the seekbar or not const [isSeeking, setIsSeeking] = useState(false); //useTrackPlayerProgress is a hook which provides the current position and duration of the track player. //These values will update every 250ms const { position, duration } = useTrackPlayerProgress(250); //this hook updates the value of the slider whenever the current position of the song changes useEffect(() => { if (!isSeeking && position && duration) { setSliderValue(position / duration); } }, [position, duration]); //this function is called when the user starts to slide the seekbar const slidingStarted = () => { setIsSeeking(true); }; //this function is called when the user stops sliding the seekbar const slidingCompleted = async (value) => { await TrackPlayer.seekTo(value * duration); setSliderValue(value); setIsSeeking(false); }; return ( <View style={{ zIndex: 100000, elevation: 100000 }}> <View style={{ flexDirection: "row", paddingHorizontal: 0, alignItems: "center", height: 40, zIndex: 1, elevation: 1, zIndex: 10000000, elevation: 100000000, }} > <Slider minimumValue={0} maximumValue={1} thumbTintColor="#ffffff" minimumTrackTintColor="#000000" maximumTrackTintColor="#808080" onSlidingStart={slidingStarted} onSlidingComplete={slidingCompleted} value={sliderValue} style={{ width: "100%", zIndex: 100000, elevation: 100000 }} /> </View> <View style={{ flexDirection: "row", justifyContent: "space-between" }}> <Text style={{ width: 40, textAlign: "center", fontSize: 12, color: "#ffffff", }} > {getFormattedTime(position)} </Text> <Text style={{ width: 40, textAlign: "center", fontSize: 12, color: "#ffffff", }} > {getFormattedTime(duration)} </Text> </View> </View> ); };I can't seek the Slider progress value. No actions fired, no move.
Without BottomSheet Slider working correct but in renderContent have no action.
Can you suggest what the problem?
Thanks.
any idea? facing the same issue
@avgupta456 @hovoaep , I solved adding enabledContentGestureInteraction = {false}
@ShumGG it's still not working for me with enabledContentGestureInteraction = {false}
It works when enabledContentGestureInteraction = {false} for me. However, I'm still having trouble dymanically setting it to false becuase of the same issue.
add enabledContentGestureInteraction={false} in <BottomSheet /> and it's working with me.
I have fixed the issue with enableContentPanningGesture={false}
It worked for me. Thanks a lot!! BTW, this issue was specific to Android devices in my case.
