Slider passes events to parent

[phrozenra]

If trying to embed react-native-slider in react-native-swiper, the dragging events are leaked through to react-native-swiper, thus moving the page at the same time with the thumb

[tamirla]

I have the same issue. There's no solution for this problem ?

[jariwalabhavesh]

+1 I am facing this issue too. @phrozenra @tamirla have you find any solution??

[tamirla]

@jariwalabhavesh I didn't, I'm using the standard react-native's Slider component

[jariwalabhavesh]

@jeanregisser SOME UPDATE ON THIS ISSUE

Here is code

import Swiper from 'react-native-swiper';
import Slider from 'react-native-slider';
var styles = StyleSheet.create({
  container: {
    // flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    // backgroundColor: '#F5FCFF',
  },
  wrapper: {
  },
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB',
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5',
  },
  slide3: {
    // flex: 1,
    // justifyContent: 'center',
    // alignItems: 'center',
    // backgroundColor: '#92BBD9',
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  },
  trackStyle: {
    height: 7,
    borderRadius: 5,
  },
  thumbStyle: {
    width: 24,
    height: 24,
    borderRadius: 24 / 2
  },
})
class MyNewApp extends Component {
  constructor(props) {
    super(props);
    this.state = { value: 15 }
  }
  render() {
    let onValueChange = (value) => {
      this.setState({
        value: value
      })
    }
    return (
      <View style={styles.container} >
        <Swiper style={styles.wrapper} showsButtons={false} loop={false} >
          <View style={styles.slide1}>
            <Text style={styles.text}>Hello Swiper</Text>
          </View>
          <View style={styles.slide2}>
            <Text style={styles.text}>Beautiful</Text>
          </View>
          <View style={styles.slide3} >
            <Text style={styles.text}>And simple</Text>
            <View >
            <Slider
              minimumValue={1}
              maximumValue={25}
              step={1}
              thumbTintColor={"#607380"}
              minimumTrackTintColor={"#f1f3f5"}
              maximumTrackTintColor={"#f1f3f5"}
              trackStyle={styles.trackStyle}
              thumbStyle={styles.thumbStyle}
              value={this.state.value}
              onValueChange={(value) => onValueChange(value)}
            />
            </View>
          </View>
        </Swiper>
      </View>
    );
  }
}

slider pass event to swiper Any workaround or solution? Thanks!

[cesargdm]

Having the same issue when parent is a ScrollView, scrolls whole content

[ghost]

i also meet this issue ,

[jariwalabhavesh]

@cesargdm @kokiy @PhilippKrone @tamirla i had fixed it by little hack

react-native-swiper has property scrollEnabled which allow to stop/start swiper swiping.

So what i had done

Slider had two event callback onSlidingStart and onSlidingComplete

 <Slider
          onSlidingStart={()=> //set swiper _scrollEnabled_ to false}
          onSlidingComplete={(value) => //set swiper _scrollEnabled_ to true}/>

This hack will fix issue, Hope this solution will be helpful to other folks.

[ghost]

@jariwalabhavesh i use antd-mobile Carousel not <slider/> ,But thank you

[lucidlive]

@jariwalabhavesh This onSlidingStart / onSlidingComplete solution works but it is not performant at all for me. The react-native slider component seems to prevent bubbling of drag events and it would be great if this slider could do the same.