npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

between-pages

v1.0.8

Published

A library to help you animate and improve the user experience when is moved between pages with animations on react native apps.

Downloads

114

Readme

Between Pages

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.

I will show some applications with navigation libraries below.

  • 🧪 Well tested
    • every module is extensively tested both android and ios.
  • 👁 Well typed
    • Everthing was strongly typed with typescript
  • 🔥 PR's welcome
    • If you have any idea how we can improve this library, pls text me
    • You can send pull requests or create an issue

Animating Buttons Clicks with Between Wrapper

Now in the new version of Between Pages, in addition to animating and making transitions, you can animate button clicks. Very easy to implement and a very good result on FPS. See the example below:

All types of animation are in Between Types, below I will be explaining the implementation. Before you start animating screen or buttons you need to go through the initial steps.

Getting Started

Before starting to install you need to see the minimum requirements, so between can work very well, check the versions below:

Minimum Requirements

react-native >= 0.59</> if you're using expo >= 41 if you're using typescript >= 4.x

Installation

  npm i between-pages

or

  yarn add between-pages

Expo

If you're using Expo to build beautiful apps, you can execute like this:

  npx expo install between-pages

Usage

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";

...

Transistion Configurable properties

Now here, you specify all types of properties beyond a simple animation type in the startTransition function in first parameter.

| Name | Type | Description | Default value | | ------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- | | type | String | Between Types is a type of a specific animation that can be access importing, all types is below. | BetweenTypes.FADE | | endAnimation | boolean | With this proprety we can specific if when animation is finished if the component must stay or return to initial state, this is useful when we want a navigation after an animation. | true | | delay | Number | Delay in miliseconds to start the transition applied. | 0 | | duration | Number | Duration in miliseconds of one transition applied. | 500 |

The last and second parameter, as I left it in the code comments above, is a callback that is always called when an animation is finished. I'll leave an example further down on how this is useful along with a navigation using react-navigation.

| Type | Description | Default value | | -------- | ----------------------------------------------------- | ------------- | | Function | Callback that happens when the animation is finished. | null |

All of Between Types

These are all types of animation that can be used easily:

| Name | Description | value | | --------- | --------------------------------------- | --------------------- | | FADE | A transistion moving opacity up 0 to 1 | BetweenTypes.FADE | | SPRING | A transistion moving scale up 0.1 to 1 | BetweenTypes.SPRING | | TO UP | A transistion moving from bottom to top | BetweenTypes.TOUP | | TO BOTTOM | A transistion moving from top to bottom | BetweenTypes.TOBOTTOM | | LEFT | A transistion moving from right to left | BetweenTypes.LEFT | | RIGHT | A transistion moving from left to right | BetweenTypes.RIGHT |

Using BetweenPages with react-navigation

Between pages was developed to facilitate an animation between components before a navigation or before some event. Yeah, there's a good way to implement the two together which is with react-native-navigation.

First of all you need to install and configure your route stack with react-navigation, all the documentation about that is in the react-navigation documentation.

...

import { useNavigation } from '@react-navigation/native';
import { useBetweenPages, BetweenTypes } from "between-pages";

import Home from "./Home";

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

  const handleAnimation = () => {
    startTransition(
      {
        type: BetweenTypes.FADE,
        endAnimation: false,
        duration: 3000,
      },
      () => {
        navigation.navigate("Home");
      }
    );
  };

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

As I said above, the endAnimation helps to make the navigation with a great performance when changing routes, making the animation not hide the next screen.

Buttons clicks animated

To start animating button clicks with Between Types, you must import the Wrapper and add it around your component as a button. In this way:

...

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

const WrapperExamples: React.FC = () => {
  return (
    <View style={styles.container}>
      <Wrapper
        delay={100}
        onPress={() => {}}
        type={BetweenTypes.SPRING}
        >
        <Button title="Click me" backgroundColor="#D4C1EC" />
      </Wrapper>
      <Wrapper
        delay={300}
        type={BetweenTypes.FADE}
        onPress={() => {}}
        type={BetweenTypes.FADE}
        >
        <Button title="Click me" backgroundColor="#FEFFBE" />
      </Wrapper>
    </View>
  );
};

const Button = ({
  title,
  backgroundColor = "#FFFFFF",
}: {
  title: string;
  backgroundColor?: string;
}) => {
  return (
    <View
      style={[
        styles.button,
        {
          backgroundColor,
        },
      ]}
    >
      <Text style={styles.title}>{title}</Text>
    </View>
  );
};

...

Be careful when using this type of animation, because the Wrapper only accepts two types, SPRING and FADE.

Contributing

Reporting Bugs

You can't write code without writing the occasional bug. Especially as Betweeng Pages is moving quickly, bugs happen. When you think you've found one here's what to do:

  • Search the existing issues for one like what you're seeing. If you see one, there are no other issues like yours then create a new one here: https://github.com/HubertRyanOfficial/between-pages/issues.

You got it! 👍😁

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