Better back swiping with the React Native Navigator

Jan 17, 2016

When observing people testing out an React Native iOS app on a phone which uses the
Navigator library
I noticed that swiping back from a detail screen to an overview screen
is a bit hard to acomplish. You have to swipe very close from the edge of the screen
to navigate back. When there is a case around the the screen it gets even trickier.

Luckily it is easy to optimize this. The Navigator uses ScreenConfigs to describe
screen transitions. Unfortunately I didn’t find much documentation around scene configs
but the NavigatorSceneConfigs.js
is very descriptive.

To adjust the area where a swipe from the edge should be counted as a back navigation,
you can adjust the edgeHitWidth in the gestures part of the scene config.

For example you can create a new SceneConfig which uses the default FloatFromRight scene config and
overwrite the edgeHitWidth to be able to swipe anywhere in the left half of the screen.

constSCREEN_WIDTH=require('Dimensions').get('window').width;/**
* Overwrite the default navigator scene config.
* to use a wider area for back swiping.
*/constFloatFromRight={...Navigator.SceneConfigs.FloatFromRight,gestures:{pop:{...Navigator.SceneConfigs.FloatFromRight.gestures.pop,edgeHitWidth:SCREEN_WIDTH/2,},},};

You can use your own scene config in the configureScene callback as a property of the Navigator.