Vertical scrollview conflicting with vertical navigation

Question

In my react native app I'm using askonov's react-native-router-flux to display a scene with a vertical ScrollView widget. I've configured the scene to float up from the bottom and it appears that, by default, dragging down from the top closes the scene.

<Router> <Scene key="root" hideNavBar={true}> <Scene key="welcome" component={Welcome}/> <Scene key="demo" component={Demo} direction="vertical"/> </Scene> </Router>

The ScrollView contains much more then what can be displayed on screen so users are expected to drag it up and down. Unfortunately it appears the drag-down-to-close-scene behavior is conflicting with the ScrollView, so users are unintentionally closing the scene when they just want to scroll up.

Specifically - it looks like the flick gesture is specifically being overridden. Flicking up doesn't fling the ScrollView content like it should, while flicking down closes the scene.

This appears to be a new behavior since I've upgraded to React Native 0.32. When I was at 0.22 the flick up gesture still worked to fling the ScrollView content.

Ideally, I'd only like the scene to close if the ScrollView's content is already completely scrolled to the top. I'd settle for simply disabling the flick-to-close behavior completely.

Answer 1

You might try adding panHandlers={null} to your scene props. That should disable the flick-to-close, I believe.

Additionally, you could possibly then utilize a RefreshControl in your ScrollView to add an action when the user is pulling down from the list that is already at the top (basically a pull-down-to-refresh action, but instead it would dismiss, hacky but could work).