I'm in the process of setting up a slider within a horizontal ScrollView to enhance page scrolling speed. I've successfully linked the page position to the slider value, so as I scroll the page, the slider thumb moves correspondingly.
My setup involves using React Native Slider and a ScrollView. Take a look at the current result:
https://web.archive.org/web/20190624092331/https://www.bonellicio.us/work/img.gif
Being new to RN, it's likely that I'm overlooking something crucial here.
class Comp extends Component {
state = {
width : 0,
value : 0,
cursor : 0
}
moveTheCursor = (val) => {
this.scrollView.scrollTo({x: val, y: 0, animated: true})
}
scrollTheView = (event) => {
this.setState({
value : Math.floor(event.nativeEvent.contentOffset.x),
cursor : Math.floor(event.nativeEvent.contentOffset.x)
})
}
checkWidth = ({nativeEvent}) => {
arrayWidth.push(nativeEvent.layout.width)
let ww = (arrayWidth[0] * this.props.data.length) - Math.round(Dimensions.get('window').width);
this.setState({
width : ww,
})
}
render() {
return (
<React.Fragment>
<ScrollView
ref={ref => this.scrollView = ref}
horizontal
style={styles.car}
scrollEventThrottle={1}
onScroll={this.scrollTheView}
showsHorizontalScrollIndicator={false}
decelerationRate={0}
//snapToInterval={200} //your element width
snapToAlignment={"center"}
>
</ScrollView>
<Slider
style={styles.containerSlide}
thumbImage={require("./../../assets/img/buttons/thumb.png")}
trackImage={require("./../../assets/img/buttons/bar.png")}
minimumValue={0}
maximumValue={this.state.width}
onValueChange={this.moveTheCursor}
value={this.state.cursor}
/>
</React.Fragment>
);
}
}
The issue arises when I attempt to use the slider thumb to scroll the page, as it triggers a scroll that resets the thumb position, leading to inaccurate behavior (flickering predominantly). Is there a solution to break out of this cycle?