Swipeable React-native-modal with nested ScrollView

Question

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

Answer 1

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

<Modal> 
    <ScrollView> 
         <TouchableOpacity> ... </TouchableOpacity> 
    </ScrollView>
<Modal>

You can read more here about this issue.

Answer 2

I had this issue multiple of times where I needed to add a scrollview, and none of the packages out there were doing it well. In reality, handling swiping and scrolling events are more complicated than expected.

I came up with creating a component to handle the scrollview behavior by default and others behaviors that are really common. You can check it here, it's called react-native-modalize

Hope it will solve this issue!

Answer 3

I fixed this issue by Defining a fixed height for the scrollview container.

For E.g

<View style={{height: 300}}>
   {hasResults ? (
       <ScrollView>
         ....
       </ScrollView>
    ) : undefined}
</View>

According to official react native docs scrollview should have a bounded height to work.

https://reactnative.dev/docs/scrollview

Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes quick to debug.