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 = {
  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 (
        initialRoute = {...}
        configureScene={() => FloatFromRight}

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

Related Posts

Controlling a ventilation system via HomeKit

How to setup a micro controller to control a ventilation system and integrate it with Apple HomeKit.

Learning Elixir: 1 year later

One year ago I dived into learning Elixir. It's time for a retrospective.

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.