• This repository has been archived on 23/Nov/2018
  • Stars
    star
    149
  • Rank 248,568 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 9 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A complete scene routing library for react native

scene-Router (v2)

A complete scene routing library written in pure JavaScript for React Native. It supports iOS and Android. The api is so easy that you just have to learn only 2 simple things, scene decorator and Router component.

Description

We, at Pressly, using react-native and our app consists of large number of scenes. We wanted somthing super simple, it went through a lot of internal reversion, until we decided to open source it.

scene-router supports the following out of box:

  • url like path, which can contains params and query strings. e.g. '/user/:id'
  • passing custom props to target scene
  • storeless, you can connect to redux or mobx stores
  • reset stack of scenes
  • animating scene from all 4 direction
  • gesture enable
  • configure scene settings at scene difinition and route time
  • all animation are being configure to optimize useNativeDriver feature

Installation

npm install scene-router

Prerequisite

we recommended to use decorator. It makes the code a lot easier to maintain. If you don't want to use it, that's ok too.

in order to enable decorator in your react-native project follow the 3 steps below,

1: install babel-plugin-transform-decorators-legacy using yarn or npm and 2: configure your .babelrc file as follows

{
  "extends": "react-native/packager/react-packager/rn-babelrc.json",
  "plugins": ["transform-decorators-legacy"]
}

3: if you are using flowtype, make sure to add esproposal.decorators=ignore under [options] tags inside .flowconfig file

Usage

There are 2 things you should learn about scene-router in oreder to start using it in your project

scene decorator

scene is a decorator feature which register your component as a scene. here's an example

import React, { Component } from 'react'
import { scene } from 'scene-router'

@scene({
  path: '/scene1'
})
class MyFirstScene extends Component {
  render() {
    ...
  }
}

a little bit of explaination, what we did was adding scene as a decorator on top of our first component MyFirstScene. We were passing path. This is our path to this scene. so every time, Router wants to render this scene, all it needs a path url. scene-router will handle all coordinations and animations behind the scene.

you might ask, so what if I want to show my scene from top to bottom. As I said, scene decorator accepts many arguments. except path the rest of the arguments are optional. here's the list of all options

option type required default value route time change Description
path String Yes N/A No register a scene with this unique path
side Side No Side.FromRight Yes how the scene will animated, from which side
threshold Number No 30 Yes how far from side you have to swip to make the gesture working
gesture Boolean No true Yes enable or disable gesture
reset Boolean No false Yes all scenes prior to this scene will be destroyed
backgroundColor String No white Yes the back color of each scene

ther are 5 differant sides you can choose from

name description
FromLeft Animate the Scene From Left to Right
FromRight Animate the Scene From Right to Left
FromTop Animate the Scene From Top to Bottom
FromBottom Animate the Scene From Bottom to Top
Static No animation

There is one little thing, every component which decorated with scene will have a method called, updateSceneStatus(status: Status). This method will be called based on whether your scene is Active, InActive, MightActive or MightInActive. In other words, We are adding 4 more lifecycles to React. remember this is just a utility to help you!

import React, { Component } from 'react'
import { scene, Status } from 'scene-router'

@scene({
  path: '/scene1'
})
class MyFirstScene extends Component {
  updateSceneStatus(status) {
    switch(status) {
      case Status.Active:
        break
      case Status.InActive:
        break
      case Status.MightActive:
        break
      case Status.MightInActive:
        break
    }
  }

  render() {
    ...
  }
}

here's a little bit of description:

value Description
Active when the animation is done and scene is visible
InActive when a scene is already covered or gone
MightInActive during dragging a scene. the current scene will get this value
MightActive the previous and covered scene by current during dragging with get this value

Router component

the second thing to learn is Router. This is your entry point of your app. It has only 3 props, area, action and config.

  • area is a string which defines an area with a name. if you plan to use tabs, each individual tab must have a unique name, that name can be passed to area
  • action is a string which accepts either goto or goback. if you pass goback, the 3rd prop, config, will be ignored.
  • config is defining which path you want to go and if you want to override any scene configuration.

here's an example of Router

import React, { Component } from 'react'
import { View, Text } from 'react-native'
import { scene, Router } from 'scene-router'

@scene({
  path: '/scenes/:id'
})
class Scenes extends Component {
  render() {
    const { route: { params } } = this.props

    return (
      <View style={{ flex: 1}}>
        <Text>{params.id}</Text>
      </View>
    )
  }
}

class App extends Component {
  constructor(props: any, context: any) {
    super(props, context)

    this.state = {
      area: "default",
      action: 'goto',
      config: {
        path: '/scenes/1'
      }
    }
  }

  render() {
    const { area, action, config } = this.state

    return (
      <Router
        area={area}
        action={action}
        config={config} />
    )
  }
}

NOTE Router component also accepts one Componet as a child, This Component is being displayed and renderd first before the first route is triggered. this is a good place to put your splash screen.

Cheers.

More Repositories

1

goose

A database migration tool. Supports SQL migrations and Go functions.
Go
6,995
star
2

sup

Super simple deployment tool - think of it like 'make' for a network of servers
Go
2,485
star
3

imgry

On-demand image sizing+delivery for responsive applications
Go
157
star
4

chainstore

Lightweight key-value interface to a bunch of storage engines with middleware support, organized as a chain of operations; written in Go
Go
130
star
5

NULevelDB

Objective-C interface to Google's LevelDB key/value embedded database
Objective-C
97
star
6

subexec

Subexec spawns n subprocess with an optional timeout
Ruby
63
star
7

react-native-radio-button-classic

Bring classic radio button to React-Native
Objective-C
48
star
8

uber-s3

Ruby S3 client with synchronous and asynchronous I/O adapters
Ruby
40
star
9

screenshot-nodejs

Screenshot as a service: GoogleChrome/puppeteer Node.js REST API server + Golang client
TypeScript
37
star
10

saml

SAML provides tools for SAML based single sign-on in Go
Go
27
star
11

lg

[DEPRECATED] we switched to github.com/rs/zerolog
Go
22
star
12

react-transact

Simple, effortless way to fetch data and make them available to React components.
JavaScript
19
star
13

react-native-nurse

run react-native on simulators without opening xcode and android avd
Shell
15
star
14

qmd

[DEPRECATED] Async script processing web service
Go
11
star
15

screenshot

Screenshot: Take screenshots with ease from any language
Go
10
star
16

logspout-s3

[NOT MAINTAINED] Logspout Adapter for AWS S3 to send docker logs to S3 - ready for Athena
Go
7
star
17

warpdrive

In-App upgrade service for React-Native! Supporting iOS and Android apps.
Go
7
star
18

docker-ledisdb

Dockerfile for Ledisdb with Rocksdb support
6
star
19

goico

Go ICO image decoder
Go
5
star
20

kube-deploy

Dockerfile
1
star
21

metrixjs

Pressly Metrix JS tracker
JavaScript
1
star