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

react-native-navigator-wrapper

v0.3.0

Published

A React Native Navigator component wrapper that implements nested navigators for both push and modal transitions.

Downloads

12

Readme

react-native-navigator-wrapper

A React Native Navigator component wrapper that implements nested navigators for both push and modal transitions.

Disclaimer

This component uses the JS Navigator implementation of React Native. Future versions of the component will use the actual NavigatorExperimental.

Installation

You can install this component through npm:

npm i react-native-navigator-wrapper --save

Configure the awesome react-native-vector-icons from Joel Oblador to display the back button icons. Remember to include the Ionicons.ttf font in your project. All the components of the library are written in ES6/ES7 style.

Motivation

This library implements the nested Navigator strategy to let the developer to use both push-like transitions and modal transitions that can also handle push navigation inside them. Think about a login/signup process. You can let the user to browse your app and then present a modal when they want to register. Once the modal is open, you can provide push navigation between signup or register screens. This is what tries to solve this component.

Take this pseudo-jsx code as an example:

<Navigator
  renderScene={(route, navigator) => {
    if (route.id === 'innerNavigator') {
      // This navigator uses push-like transitions
      return <Navigator />
    }
    // This navigator also uses push-like transitions, but it is opened using
    // FloatFromBottom scene config
    return <Navigator />
  }}
/>

The parent navigator will push new components using FloatFromBottom. Both inner navigators will use FloatFromRight, but the inner navigator will keep the default navigation history and the other navigator is going to be used when presenting a modal component. With this you can have push navigation inside a modal component.

Usage

This library can be used in several ways. It's composed from a couple of different components that interact with each other. In short, it has a navigation bar that mimics the iOS and Android navigation bar and two navigation wrappers.

Nested navigation with TopNavigatorWrapper

You can use TopNavigatorWrapper component to bring the nested navigator strategy just importing the component and wrapping whatever you want to render inside it:

import React from 'react'
import { TopNavigatorWrapper } from 'react-native-navigator-wrapper'
import MyComponent from './MyComponent'

class MyApp extends React.Component {
  render () {
    return (
      <TopNavigatorWrapper modalStyle={{backgroundColor: '#090909'}}>
        <MyComponent />
      </TopNavigatorWrapper>
    )
  }
}

You component MyComponent will have a topNavigator prop. It will let you to push new components in a modal-style, opening from bottom to top.

Navigation with NavigatorWrapper

If you just want to use the navigation bar inside a navigator, use the NavigatorWrapper component:

import React from 'react'
import { NavigatorWrapper } from 'react-native-navigator-wrapper'

class MyComponent extends React.Component {
  render () {
    return (
      <NavigatorWrapper
        initialRoute={{
          component: Component,
          title: 'Title'
        }}
      />
    )
  }
}

Every time you push a component that's inside the NavigatorWrapper component you will have a navigator prop, just like the top navigation option before, that will let you to keep pushing components in the stack.

Custom routeMapper

The React Native Navigator.NavigatorBar component has an object called routeMapper that configures the three components that can be displayed inside the navigation bar: LeftButton, RightButton and Title. This library auto-generates a default route mapper object that displays an iOS & Android style back button, a title and accepts a right element to render.

It also provides functions to generate each of the route mapper components so you can build a completely custom navigation bar for each NavigatorWrapper. See the source code for more information.

🚧 Roadmap

  • [ ] Handle several hardware back button actions with multiple navigators (Android).

License

MIT.