Creating a stack navigator, with proper animations, using Ionic and React.

Pedro Palhari — Tue, 18 Feb 2020 11:44:32 +0000

So, I've been really diggin' the Ionic and React integration. I usually add it to an already existing React application and go from there.

But, recently, I've stumbled upon something. I want to control the direction of my transitions between pages.

And the docs, they sure do provide something to work with. You can pass a prop called routeDirection to some specific Ionic components. But you can't control it with code.

But, I, want to control the direction of my transitions, with my own code, so I started looking into it.

It happens that these transitions are actually part of a Context called NavContext inside @ionic/react, so you can just:

import { useContext } from "react";
import { NavContext } from "@ionic/react";


function MyComponent(){
  let navigationContext = useContext(NavContext);

  //forbidden by the gods, a back-animated-push
  navigationContext.navigate("/route", "back"); 
}

So, to create a stack animator, all you need is a hook to handle the screens you've passed, and one singleton array shared between them:

//IonicCustomNavigation.ts

import { useContext } from "react";
import { NavContext } from "@ionic/react";

//Hook to encapsulate navigation context
export function useContextNavigation() {
  let navigation = useContext(NavContext);

  return navigation;
}

//Stack
let stack: string[] = ["/"];
export function useStackNavigation() {
  let navigation = useContextNavigation();

  console.log(stack);

  function navigateTo(screen: string) {
    let indexOfScreenOnStack = stack.indexOf(screen);
    if (indexOfScreenOnStack != -1) {
      if (indexOfScreenOnStack == stack.length - 1) return;

      stack = stack.slice(0, indexOfScreenOnStack);
      navigation.navigate(screen, "back");
    } else {
      navigation.navigate(screen, "forward");
    }
    stack.push(screen);
  }

  return navigateTo;
}

And done! You'd need to pass extra parameters to the navigateTo function if you want to handle state, but that is simple enough.

I spent some time working around a solution, and that seems to do it.

For reference, the versions I'm using of Ionic and Ionic/React are:

/**
"@ionic/react-router@^5.0.0":
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/@ionic/react-router/-/react-router-5.0.0.tgz#939e9619cceebc2603cc738eb276d3bd6b523762"
  integrity sha512-IjBSZtel1W9zJvdwI9Z8LOHS9eOWhulumiTuvG2yD1Qj6dQ8Cp67zOYdHhxkhH2JBnxILC+vJgXp/0pnEFIu2Q==
  dependencies:
    tslib "*"

"@ionic/react@^5.0.0":
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/@ionic/react/-/react-5.0.0.tgz#12a7ea61ce7e9e35a27768628370020bbfd6091a"
  integrity sha512-Q6uPAyWa01XLoZ7MdeM0xRKID8SR/hFuoGIjXFlawq2TKwiPCZbSjegHXdFHcX0LHTC/iQuu4Ly2d8UaD5ljZQ==
  dependencies:
    "@ionic/core" "5.0.0"
    ionicons "^5.0.0"
    tslib "*"
*/

DEV Community: teepad

Creating a stack navigator, with proper animations, using Ionic and React.