From 5e5f7142af77bb23c70840d1539fbc4829d6baa4 Mon Sep 17 00:00:00 2001 From: Brent Vatne Date: Wed, 20 Feb 2019 12:17:53 -0800 Subject: [PATCH] Merge pull request #36 from slorber/backbehavior-examples Add switch backbehavior examples --- packages/core/example/App.js | 13 +++++- packages/core/example/src/SimpleTabs.js | 58 ++++++++++++++----------- 2 files changed, 44 insertions(+), 27 deletions(-) diff --git a/packages/core/example/App.js b/packages/core/example/App.js index 5e1d274c..59aa9f36 100644 --- a/packages/core/example/App.js +++ b/packages/core/example/App.js @@ -10,7 +10,7 @@ import { import { List, Divider } from 'react-native-paper'; import SimpleStack from './src/SimpleStack'; -import SimpleTabs from './src/SimpleTabs'; +import SimpleTabs, { createSimpleTabs } from './src/SimpleTabs'; import EventsStack from './src/EventsStack'; // Comment/uncomment the following two lines to toggle react-native-screens @@ -27,6 +27,17 @@ const data = [ { component: EventsStack, title: 'Events', routeName: 'EventsStack' }, ]; +['initialRoute', 'none', 'order', 'history'].forEach(backBehavior => { + data.push({ + component: createSimpleTabs({ + backBehavior: backBehavior, + initialRouteName: 'C', // more easy to test initialRoute behavior + }), + title: `Tabs backBehavior=${backBehavior}`, + routeName: `Tabs backBehavior=${backBehavior}`, + }); +}); + // Cache images Asset.loadAsync(StackAssets); diff --git a/packages/core/example/src/SimpleTabs.js b/packages/core/example/src/SimpleTabs.js index 8f0f6b0f..de2ecd60 100644 --- a/packages/core/example/src/SimpleTabs.js +++ b/packages/core/example/src/SimpleTabs.js @@ -24,30 +24,36 @@ class Screen extends React.Component { } } -export default createBottomTabNavigator( - { - A: { - screen: Screen, - params: { title: 'First One', icon: 'activity' }, +export const createSimpleTabs = (options = {}) => { + return createBottomTabNavigator( + { + A: { + screen: Screen, + params: { title: 'First One', icon: 'activity' }, + }, + B: { + screen: Screen, + params: { title: 'Second One', icon: 'aperture' }, + }, + C: { + screen: Screen, + params: { title: 'Third One', icon: 'anchor' }, + }, + D: { + screen: Screen, + params: { title: 'Fourth One', icon: 'archive' }, + }, }, - B: { - screen: Screen, - params: { title: 'Second One', icon: 'aperture' }, - }, - C: { - screen: Screen, - params: { title: 'Third One', icon: 'award' }, - }, - D: { - screen: Screen, - params: { title: 'Fourth One', icon: 'bell' }, - }, - }, - { - backBehavior: 'history', - tabBarOptions: { - activeTintColor: '#000', - inactiveTintColor: '#eee', - }, - } -); + { + backBehavior: 'history', + ...options, + tabBarOptions: { + activeTintColor: '#000', + inactiveTintColor: '#eee', + ...options.tabBarOptions, + }, + } + ); +}; + +export default createSimpleTabs();