How to use the navigation.StateNavigator function in navigation

export default () => {
  const stateNavigator = new StateNavigator([
    {key: 'scene', trackCrumbTrail: true},
  ]);

  const { scene } = stateNavigator.states;
  scene.renderScene = (data, moveScene) => ;
  
  return stateNavigator;
}

import React, {useState} from 'react';
import {StateNavigator} from 'navigation';
import {NavigationHandler} from 'navigation-react';
import {NavigationStack, TabBar, TabBarItem} from 'navigation-react-native';
import Home from './Home';
import Notifications from './Notifications';
import Tweet from './Tweet';
import Timeline from './Timeline';
import {getHome, getFollows, getTweet, getTimeline} from './data';

const stateNavigator = new StateNavigator([
  {key: 'home'},
  {key: 'notifications'},
  {key: 'tweet', trackCrumbTrail: true},
  {key: 'timeline', trackCrumbTrail: true}
]);
const {home, notifications, tweet, timeline} = stateNavigator.states;
home.renderScene = () => ;
notifications.renderScene = () => ;
tweet.renderScene = ({id}) => ;
timeline.renderScene = ({id}) => ;

const notificationsNavigator = new StateNavigator(stateNavigator);
stateNavigator.navigate('home');
notificationsNavigator.navigate('notifications');

export default () => {

static getDerivedStateFromProps(props, {navigationEvent: prevNavigationEvent}) {
        var {crumb, navigationEvent} = props;
        var {state, crumbs} = navigationEvent.stateNavigator.stateContext;
        if (state && crumbs.length === crumb)
            return {navigationEvent};
        if (state && !prevNavigationEvent && crumb < crumbs.length) {
            var {stateNavigator} = navigationEvent;
            var caretakerNavigator = new StateNavigator(stateNavigator, stateNavigator.historyManager);
            caretakerNavigator.stateContext = Scene.createStateContext(crumbs, crumb);
            caretakerNavigator.configure = stateNavigator.configure;
            caretakerNavigator.onBeforeNavigate = stateNavigator.onBeforeNavigate;
            caretakerNavigator.offBeforeNavigate = stateNavigator.offBeforeNavigate;
            caretakerNavigator.onNavigate = stateNavigator.onNavigate;
            caretakerNavigator.offNavigate = stateNavigator.offNavigate;
            caretakerNavigator.navigateLink = stateNavigator.navigateLink.bind(stateNavigator);
            var {oldState, state, data, asyncData} = caretakerNavigator.stateContext;
            return {navigationEvent: {oldState, state, data, asyncData, stateNavigator: caretakerNavigator}};
        }
        return null;
    }
    static createStateContext(crumbs, crumb) {

export default () => {
    const stateNavigator = new StateNavigator([
        { key: 'people' },
        { key: 'person', trackCrumbTrail: true }
    ]);

    stateNavigator.states.people.renderScene = () => (
        
    )

    stateNavigator.states.person.renderScene = (data) => {
        const person = PEOPLE.filter((person) => person.id === data.id)[0]; 
        return ;
    }

    const PEOPLE = [
        {id: 1, name: 'Bell Halvorson', dateOfBirth: '01/01/1980', email: 'bell@navigation.com', phone: '555 0001'},
        {id: 2, name: 'Aditya Larson', dateOfBirth: '01/02/1980', email: 'aditya@navigation.com', phone: '555 0002'},

export default function() {
    return new StateNavigator([
        {key: 'people', route: '{pageNumber?}', defaults: {pageNumber: 1}},
        {key: 'person', route: 'person/{id}', defaults: {id: 0}, trackCrumbTrail: true}
    ], new HTML5HistoryManager());
};

export default () => {
  const stateNavigator = new StateNavigator([
    {key: 'home', route: ''},
    {key: 'tweet', trackCrumbTrail: true},
    {key: 'timeline', trackCrumbTrail: true},
    {key: 'photo', trackCrumbTrail: true}
  ], new MobileHistoryManager(url => {
    var {state, data} = stateNavigator.parseLink(url);
    var fluent = stateNavigator.fluent().navigate('home');
    if (state.key === 'photo')
      fluent = fluent.navigate('tweet', {id: data.id})
    return fluent.navigate(state.key, data).url;
  }));

  const {home, tweet, timeline, photo} = stateNavigator.states;
  home.renderScene = () => ;
  tweet.renderScene = ({id}) => ;
  timeline.renderScene = ({id}) => ;

static getDerivedStateFromProps(props, {navigationEvent: prevNavigationEvent}) {
        var {crumb, navigationEvent} = props;
        var {state, crumbs} = navigationEvent.stateNavigator.stateContext;
        if (state && crumbs.length === crumb)
            return {navigationEvent};
        if (state && !prevNavigationEvent && crumb < crumbs.length) {
            var {stateNavigator} = navigationEvent;
            var caretakerNavigator = new StateNavigator(stateNavigator, stateNavigator.historyManager);
            caretakerNavigator.stateContext = Scene.createStateContext(crumbs, crumb);
            caretakerNavigator.configure = stateNavigator.configure;
            caretakerNavigator.onBeforeNavigate = stateNavigator.onBeforeNavigate;
            caretakerNavigator.offBeforeNavigate = stateNavigator.offBeforeNavigate;
            caretakerNavigator.onNavigate = stateNavigator.onNavigate;
            caretakerNavigator.offNavigate = stateNavigator.offNavigate;
            caretakerNavigator.navigateLink = stateNavigator.navigateLink.bind(stateNavigator);
            var {oldState, state, data, asyncData} = caretakerNavigator.stateContext;
            return {navigationEvent: {oldState, state, data, asyncData, stateNavigator: caretakerNavigator}};
        }
        return null;
    }
    static createStateContext(crumbs, crumb) {

import { searchPeople, getPerson } from './Data';
import { StateNavigator } from 'navigation';
import { NavigationContext, NavigationHandler } from 'navigation-react';
import React, { Suspense, lazy } from 'react';
import ReactDOM from 'react-dom';
var Listing = lazy(() => import('./People'));
var Details = lazy(() => import('./Person'));

var stateNavigator = new StateNavigator([
    {key: 'people', route: '{pageNumber?}', defaults: {pageNumber: 1 }},
    {key: 'person', route: 'person/{id}', defaults: {id: 0 }, trackCrumbTrail: true}
]);

var {people, person} = stateNavigator.states;
people.renderView = ({pageNumber}) => ;
person.renderView = ({id}) =&gt; <details>;

stateNavigator.start();

ReactDOM.render(
    
        Loading...}&gt;
            
                {({ state, data }) =&gt; state.renderView(data)}
            </details>

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React from 'react';
import {StateNavigator} from 'navigation';
import {NavigationHandler} from 'navigation-react';
import {addNavigateHandlers, NavigationMotion} from 'navigation-react-native';
import Page from './Page.js';

var stateNavigatorZero = new StateNavigator([
  {key: 'scene', trackCrumbTrail: true, title: 'Scene'},
]);
var {scene} = stateNavigatorZero.states;
scene.renderScene = () => ;
stateNavigatorZero.navigate('scene');

var stateNavigatorOne = new StateNavigator(stateNavigatorZero);
stateNavigatorOne.navigate('scene');

var stateNavigators = [stateNavigatorZero, stateNavigatorOne];
addNavigateHandlers(stateNavigators);

export default ({crumb, tab}) => (

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React from 'react';
import {StateNavigator} from 'navigation';
import {NavigationHandler} from 'navigation-react';
import {addNavigateHandlers, Scene} from 'navigation-react-native';
import Page from './Page.js';

var stateNavigator = new StateNavigator([
  {key: 'scene', trackCrumbTrail: true},
]);
var {scene} = stateNavigator.states;
scene.renderScene = () => ;
stateNavigator.navigate('scene');

addNavigateHandlers(stateNavigator);

export default ({crumb}) => (
  
    
  
);