react-native-direct-router

A simple, None layer router

npm

npm install react-native-direct-router --save

yarn

yarn add react-native-direct-router

Config

• name: string (required)
• scene: React.Component (required)
• header: React.Component (optional)
• footer: React.Component (optional)
• params: Object (optional)

API

Router.go("Route-A")

go to scene which name is Route-A

Router.back()

back to previous route

Example with typescript

import {Router, RouteConfig} from "react-native-direct-router";
import {TestA} from "./src/pages/TestA";
import {TestB} from "./src/pages/TestB";
import {Header} from "./src/pages/Header";
import {Footer} from "./src/pages/Footer";

export class App extends React.Component<any, any> {
    public static config: RouteConfig = {
        defaultSceneName: "Route-A",
        scenes: [
            {
                name: "Route-A",
                scene: TestA,
                header: Header,
                footer: Footer,
            },
            {
                name: "Route-B",
                scene: TestB,
                header: Header,
                footer: Footer,
            },
        ],
    };
    public render() {
        return <Router config={App.config} />;
    }
}

Example with javascript

import {Router, RouteConfig} from "react-native-direct-router";
import {TestA} from "./src/pages/TestA";
import {TestB} from "./src/pages/TestB";
import {Header} from "./src/pages/Header";
import {Footer} from "./src/pages/Footer";

export class App extends React.Component {
    static config: RouteConfig = {
        defaultSceneName: "Route-A",
        scenes: [
            {
                name: "Route-A",
                scene: TestA,
                header: Header,
                footer: Footer,
            },
            {
                name: "Route-B",
                scene: TestB,
                header: Header,
                footer: Footer,
            },
        ],
    };
    render() {
        return <Router config={App.config} />;
    }
}