I am using React Native's Navigator to navigate through scenes in iOS app. I found that although I can swipe back to previous screen by swiping from left edge to right, it looks like the region that I can swipe is not as big or responsive as the native navigation. Sometimes I swipe a little off the edge and it doesn't work.
I am wondering if there is a way to apply some tuning to this area, i.e. make the swipe go back area a little bigger so user have better success rate.
It may not be the best solution but you can change the edgeHitWidth in NavigatorSceneConfigs.js
The default for 'left-to-right' is 30
This will affect your entire project and every time you upgrade react native you will need to make these changes again.
Don't know if it still can help but :
const SCREEN_WIDTH = require('Dimensions').get('window').width;
const buildStyleInterpolator = require('buildStyleInterpolator');
const BaseSceneConfig = Navigator.SceneConfigs.HorizontalSwipeJump;
const CustomBackGesture = Object.assign({}, BaseSceneConfig.gestures.jumpBack, {
// Make it so we can drag anywhere on the screen
edgeHitWidth: SCREEN_WIDTH,
});
const CustomForwardGesture = Object.assign({}, BaseSceneConfig.gestures.jumpForward, {
// Make it so we can drag anywhere on the screen
edgeHitWidth: SCREEN_WIDTH,
});
const CustomSceneConfig = Object.assign({}, BaseSceneConfig, {
// A very tighly wound spring will make this transition fast
springTension: 100,
springFriction: 1,
gestures: {
jumpBack: CustomBackGesture,
jumpForward: CustomForwardGesture,
},
});
you can customize gesture and edgeHitWidth: SCREEN_WIDTH does the trick.