javascriptreact-nativereact-native-modal

Swipeable React-native-modal with nested ScrollView

I'm using the latest release of react-native-modal that implement the swipe feature

I'd like to add a ScrollView inside my modal.

Here's what i've done so far

https://snack.expo.io/ryRylJFHz

Solution

  • I know that this question is old but since there isn't an answer I am providing a solution to this.

    The latest version of react-native-modal provides a prop propagateSwipe that allows swipe events to propagate to child components in your case to ScrollView

    <Modal propagateSwipe={true}> 
    <ScrollView> 
       // .... other components
    </ScrollView>
<Modal>

    But currently in the v11.3.1 it has a small issue when you provide swipeDirection prop and it doesn't work.

    The workaround to this issue is to add TouchableOpacity component inside ScrollView. Also adding activeOpacity={1} removes opacity change animation on press.

    <Modal> 
    <ScrollView> 
         <TouchableOpacity activeOpacity={1}> ... </TouchableOpacity> 
    </ScrollView>
<Modal>

    You can read more here about this issue.