Dragging horizontal Slider doesn't prevent pan from going through to React Navigation modal (and swiping page vertically)

[garrettg123]

Description

Dragging the <Slider.Thumb> doesn't capture the touch move and it bubbles up to the parent screen. When this is a modal, it starts moving because modals can be dragged down to close, and then it also cancels the slider thumb panning.

CodeSandbox/Snack link

none

Steps to reproduce

React Navigation setup:

      <HomeStack.Group
        screenOptions={{
          headerTransparent: true,
          headerTitle: '',
          presentation: 'modal',
          headerLeft: () => <BackButton icon={faAngleDown} />,
        }}
      >
        <HomeStack.Screen name='NowPlaying' component={NowPlayingScreen} />
      </HomeStack.Group>

NowPlayingScreen:

        <FormControl>
          <Slider
            size='md'
            mt='4'
            minValue={0}
            maxValue={duration}
            value={position}
            onChange={changingPosition => {
              console.log('Changing slider position', changingPosition)
              setChangingPosition(changingPosition)
            }}
            onChangeEnd={position => {
              console.log('Changed slider position', position)
              if (currentAudioPostId) {
                setCurrentPosition(position)
                seek(position)
              }
            }}
            onTouchStart={e => {
              console.log('Slider touch started')
              // e.stopPropagation()
              // e.preventDefault()
              // return true
            }}
            onTouchMove={e => {
              console.log('Slider touch moved')
              // e.stopPropagation()
              // e.preventDefault()
              // return true
            }}
            // onStartShouldSetResponder={() => true}
            // onMoveShouldSetResponder={() => true}
            onTouchCancel={() => {
              console.log('Canceled changing slider position')
              setChangingPosition(null)
            }}
            colorScheme='tertiary'
          >
            <Slider.Track>
              <Slider.FilledTrack />
            </Slider.Track>
            <Slider.Thumb
            // onMoveShouldSetResponder={() => {
            //   console.log('move start slider thumb')
            //   return true
            // }}
            // onStartShouldSetResponder={() => {
            //   console.log('start slider thumb')
            //   return true
            // }}
            />
          </Slider>
        </FormControl>

All the commented parts were tested and failed to capture the pan responding.

NativeBase Version

^3.3.7

Platform

• [ ] Android
• [ ] CRA
• [x] Expo
• [X] iOS
• [ ] Next

Other Platform

No response

Additional Information

No response

[surajahmed]

@garrett-gottlieb Thanks for reporting! We'll look into this.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[showtan001]

@surajahmed

Modal of react native is the same, can't slide

<Modal
      animationType="fade"
      transparent={true}
      visible={visible}
      supportedOrientations={['portrait', 'landscape', 'landscape-left', 'landscape-right']}
      onDismiss={() => setVisible(false)}
      statusBarTranslucent={true}
      onRequestClose={() => setVisible(false)}
    >

  <Slider
        onTouchStart={e => {
          console.log('Slider touch started')
          // e.stopPropagation()
          // e.preventDefault()
          // return true
        }}
        onTouchMove={e => {
          console.log('Slider touch moved')
          // e.stopPropagation()
          // e.preventDefault()
          // return true
        }}
        // onStartShouldSetResponder={() => true}
        // onMoveShouldSetResponder={() => true}
        onTouchCancel={() => {
          console.log('Canceled changing slider position')
        }}
        >
          <Slider.Track bg="trueGray.300">
            <Slider.FilledTrack />
          </Slider.Track>
          <Slider.Thumb />
      </Slider>
 </Modal>

https://user-images.githubusercontent.com/32892347/177755570-6655abd3-c5cf-4c49-a4cd-ffebab82c72e.MOV

[bahri-dev]

Are there any updates for it?