How to make transitions between pages in your react native app.

Library between-page logo

What is the BetweenPages for?

A library to help you animate and improve the user experience when is moved between pages with animations on react native apps. Between Pages uses the underlying native library called Animated from react native itself, thus allowing all animation between routes to be at high FPS.

Between Pages was developed to create animations from simple to complex levels before navigation, restoring the entire screen before every route, making the movement natural. Remembering that BetweenPages is not recommended for route management.

Examples:

How to apply

Before starting to install you need to see the minimum requirements, so between can work very well, here: https://github.com/HubertRyanOfficial/between-pages

npm i between-pages

or

yarn add between-pages

First of all, before we start animating our screens to get some feedback later, we need to insert the Provider inside the root of the project. It’s usually in /App.js.

...

import { BetweenPagesProvider } from "between-pages";

export default function App() {
  return (
    <BetweenPagesProvider>
      <Main />
      {/*.........*/}
    </BetweenPagesProvider>
  );
}

First Transition

In any screen that is already inside our general Provider, we can make a transition together with the Between Types, which are the types of transition that we can make with the page or screen that turns next.

Let’s see an example as if we were on a screen called Main, the next screen is Home. So we want an animated transition to the next screen using the useBetweenPages passing the next route component like first parameter:

...

import { useBetweenPages, BetweenTypes } from "between-pages";

import Home from "./Home";

const Main: React.FC = () => {
  const { startTransition } = useBetweenPages(<Home />);

  const handleAnimation = () => {
    startTransition(
      // First parameter are animation type, duration and others thing about animations.
      {
        type: BetweenTypes.FADE,
        duration: 3000,
      },
      // Second parameter is a callback that happens when the animation is finished.
      () => {}
    );
  };

  return (
    <View style={styles.container}>
      <Text
        onPress={() => handleAnimation()}
        style={{ fontSize: 30, fontWeight: "bold", color: "#FFFFFF" }}
      >
        Page 1
      </Text>
    </View>
  );
};

...

In this case as we can se, importing the useBetweenPages you can specify the component that will be animated. All types of animations are inside the BetweenTypes object, further below are all types of animations that exist for now.

You can access the types of animations in this way below:

...

import {  BetweenTypes } from "between-pages";

Remembering that the repository has much more details and more configurations.

You got it! 👍😁

Thank you very much, I hope I have helped the great React community. ❤🙌

Repository

GitHub

Tapedin: @hubertryan

Twitter

Instagram

Thank you very much, I hope I have helped the great React community. ❤🙌

Hubert Ryan Logo