Better back swiping with the React Native Navigator


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.

const SCREEN_WIDTH = require('Dimensions').get('window').width;

/**
 * Overwrite the default navigator scene config.
 * to use a wider area for back swiping.
 */
const FloatFromRight = {
  ...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.

  render() {
    return (
      <Navigator
        initialRoute = {...}
        configureScene={() => FloatFromRight}
        renderScene={this.renderScene}
      />
    );
  }

I recommend diving into the well written NavigatorSceneConfigs.js to find out how you can customize your animations.

Related Posts

Learning How to Learn – Online Course Notes

My notes for the online course “Learning How to Learn”.

Why the Elixir language has great potential

Elixir enables creating fast, reliable and concurrent modern applications with high productivity

Tips for making screencasts for presentations

As an alternative to live demos you can play screen casts during your tech talk.

Trust and Integrity

My notes for the Speed of Trust by FranklinCovey.

NodeJS: Factory Function Pattern, Dependency Registry and Hot Reloading

This article shows how to combine Factory Functions with a rapid feedback loop using hot reloading.

How to keep plugins when updating PhpStorm

When updating PhpStorm my plugins seemed to be gone, but you can easily move them over.

Command duration in fish shell

Display how long the last command took and notify when a long running command is finished.

ES6 in Node and in your Browser with Traceur

How to use Google traceur to transpile ES6 javascript to ES5.

PHPUnit find slow tests

When optimizing your testsuite it can be handy do find out how long each test takes to run. It would be nice to have a list of and how many seconds they took.

Remote debugging for PHP cli scripts

Enable remote debugging for your console PHP scripts without much fuzz.