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

rn-push

v2.0.3

Published

No need to link any native code.

Downloads

13

Readme

React Native simplest push from right transition

No need to link any native code.

Why would You use this library?

  1. Super simple codebase
  2. Gesture handling and animation of the fading view are handled on the main thread
  3. Looks nice on ios and android

Problem

There are three approaches to handle navigation in React Native app:

  1. You can use native components like NavigatorIOS, Wix Navigation etc. - it's hard to customise them though and You have to install native dependencies.
  2. You can write navigation in JS that tries to mimick native navigation - You will inevitebly end up with uncanny valley UX.
  3. You can invent Your custom JS navigation - but it is usually hard to come up with better transitions than default ones on Android and iOS.

This library represents third approach. But it is better than others becuase it uses scrollview as a gesture handler under the hood, which means You don't have to run animations on JS thread.

Installation

yarn add rn-push

npm install rn-push

Usage

This component takes a single children and passes a push prop to it. Component that You will push to will receive pop prop. You can push deeper from the screen that is already pushed.

import Push from "rn-push";

function App(props) {
  // you can pass color prop (default: #efefef)
  return (
    <Push color="#efefef">
      <Screen />
    </Push>
  );
}

function Screen(props) {
  return (
    <View>
      <Button
        title="Next"
        onPress={() =>
          props.push({
            component: Screen2,
            passProps: {
              title: "Previous"
            }
          })
        }
      />
    </View>
  );
}

function Screen2(props) {
  return (
    <View>
      <Button title={props.title} onPress={() => props.pop()} />
    </View>
  );
}

Component that you push from receieves pushState prop. You can do something like this:

class Screen extends Component {
  componentWillReceiveProps(props) {
    if (props.pushState === false) {
      // do something when user goes back
      // ie. fetch data to update Your view or something like that
    }
  }

  render() {
    return (
      <View>
        <Button
          title="Next"
          onPress={() =>
            props.push({
              component: Screen2,
              passProps: {
                title: "Previous"
              }
            })
          }
        />
      </View>
    );
  }
}