From 08e84c51f5787045372dd6061b60f52b0da38b24 Mon Sep 17 00:00:00 2001 From: Volodymyr Kozieiev Date: Wed, 5 Jun 2019 12:52:29 +0300 Subject: [PATCH] Initial commit --- index.js | 83 +++++++++++++++++++++++++++++++++++++++++++++++ package-lock.json | 5 +++ package.json | 17 ++++++++++ 3 files changed, 105 insertions(+) create mode 100644 index.js create mode 100644 package-lock.json create mode 100644 package.json diff --git a/index.js b/index.js new file mode 100644 index 0000000..a2c2b3d --- /dev/null +++ b/index.js @@ -0,0 +1,83 @@ +import React from 'react'; +import {View} from 'react-native'; +import { + StackActions, + NavigationActions, + StackRouter, + createNavigator +} from 'react-navigation'; // Version can be specified in package.json +import {StackView} from 'react-navigation-stack'; + + +class TwoPaneNavigator extends React.Component { + + LeftPaneComponent: null; + RightPaneEmptyComponent: null; + + constructor(props) { + super(props); + + const config = this.props.navigationConfig; + const router = config.router; + + this.LeftPaneComponent = router.getComponentForRouteName(config.initialRouteName); + this.RightPaneEmptyComponent = router.getComponentForRouteName(config.emptyRightPaneName); + } + + + render() { + const {navigation, screenProps, navigationConfig, descriptors} = this.props; + const state = navigation.state; + + let isStartScreen = state.routes[state.index].routeName == navigationConfig.initialRouteName; + let rightPane; + if (isStartScreen) { + rightPane = ; + } + else { + rightPane = + } + + return ( + + + + + {rightPane} + + ); + } +}; + +function createTwoPaneNavigator(routeConfigMap, navigationConfig) { + + const router = StackRouter(routeConfigMap, navigationConfig); + const configWithRouter = {...navigationConfig, router: router} + + let twoPaneNavigator = createNavigator(TwoPaneNavigator, router, configWithRouter); + + const defaultGetStateForAction = router.getStateForAction; + router.getStateForAction = (action: any, state: any) => { + + if (action.type === NavigationActions.NAVIGATE && + state.routes[state.index].routeName == navigationConfig.initialRouteName && + action.routeName in routeConfigMap) { + + const resetAction = StackActions.reset({ + index: 0, + actions: [NavigationActions.navigate({routeName: action.routeName, params: action.params})], + + }); + + return defaultGetStateForAction(resetAction, state); + } + return defaultGetStateForAction(action, state); + }; + + return twoPaneNavigator; +} + +export {createTwoPaneNavigator}; diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..3447e3d --- /dev/null +++ b/package-lock.json @@ -0,0 +1,5 @@ +{ + "name": "react-native-navigation-twopane", + "version": "0.0.1", + "lockfileVersion": 1 +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..70f9cd0 --- /dev/null +++ b/package.json @@ -0,0 +1,17 @@ +{ + "name": "react-native-navigation-twopane", + "version": "0.0.1", + "description": "Two pane UI navigator for react-navigation", + "main": "./index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "peerDependencies": { + "@react-navigation/core": "^3.0.0", + "@react-navigation/native": "^3.0.0", + "react": "*", + "react-native": "*", + "react-navigation-stack": "~1.4.0" + } +}