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

Elixir side-project #2: A Graphql API with Elixir (2/2)

Building a GraphQL API for my recipe planning side-project.

Elixir side-project #2: Planning Recipes with a Supermarket API (1/2)

Introduction to my next side-project to learn Elixir.

Learning Elixir: My side-project

Learnings from starting on a side-project written in Elixir.

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.