update

Author: markdevocht

playground/src/screens/FirstBottomTabScreen.tsx

@@ -19,19 +19,17 @@ const TABS = [
 
 const launchTest = (mode: 'together' | 'onSwitchToTab') => {
   resetLoadOrder();
-  Navigation.setRoot({
-    root: {
-      bottomTabs: {
-        id: 'TabsTest',
-        options: { bottomTabs: { tabsAttachMode: mode, titleDisplayMode: 'alwaysShow' } },
-        children: TABS.map((item, i) => ({
-          stack: {
-            id: `Tab${i}`,
-            children: [{ component: { name: 'TabsTogetherTest.WebViewTab', passProps: { tabIndex: i, ...item } } }],
-            options: { bottomTab: { text: item.title, icon: require('../../img/layouts.png') } },
-          },
-        })),
-      },
+  Navigation.showModal({
+    bottomTabs: {
+      id: 'TabsTest',
+      options: { bottomTabs: { tabsAttachMode: mode, titleDisplayMode: 'alwaysShow' } },
+      children: TABS.map((item, i) => ({
+        stack: {
+          id: `Tab${i}`,
+          children: [component('TabsTogetherTest.WebViewTab', undefined, { tabIndex: i, ...item })],
+          options: { bottomTab: { text: item.title, icon: require('../../img/layouts.png') } },
+        },
+      })),
     },
   });
 };

playground/src/screens/TabsTogetherTest.tsx

@@ -2,8 +2,6 @@ import React, { useEffect } from 'react';
 import { StyleSheet } from 'react-native';
 import { Navigation, NavigationFunctionComponent } from 'react-native-navigation';
 import { WebView } from 'react-native-webview';
-import testIDs from '../testIDs';
-import Screens from './Screens';
 
 const loadOrder: number[] = [];
 const listeners: Set<() => void> = new Set();
@@ -64,37 +62,14 @@ const WebViewTab: NavigationFunctionComponent<Props> = ({ componentId, tabIndex,
 WebViewTab.options = {
     topBar: {
         title: { text: 'WebView Tab' },
-        leftButtons: [{ id: 'back', text: 'Back' }],
+        leftButtons: [{ id: 'back', icon: require('../../img/clear.png') }],
     },
 };
 
 Navigation.registerComponent('TabsTogetherTest.WebViewTab', () => WebViewTab);
 
 const goBackToPlayground = () => {
-    Navigation.setRoot({
-        root: {
-            bottomTabs: {
-                options: { bottomTabs: { testID: testIDs.MAIN_BOTTOM_TABS } },
-                children: [
-                    { stack: { children: [{ component: { name: 'Layouts' } }], options: { bottomTab: { text: 'Layouts', icon: require('../../img/layouts.png') } } } },
-                    { stack: { children: [{ component: { name: 'Options' } }], options: { bottomTab: { text: 'Options', icon: require('../../img/options.png') } } } },
-                    { stack: { id: 'NavigationTabStack', children: [{ component: { name: 'Navigation' } }] } },
-                ],
-            },
-        },
-    });
-    // Show the BottomTabs modal after restoring root
-    Navigation.showModal({
-        bottomTabs: {
-            children: [
-                { stack: { children: [{ component: { name: Screens.FirstBottomTabsScreen } }] } },
-                { stack: { id: 'SecondTab', children: [{ component: { name: Screens.SecondBottomTabsScreen } }] } },
-            ],
-            options: {
-                bottomTabs: { testID: testIDs.BOTTOM_TABS },
-            },
-        },
-    });
+    Navigation.dismissModal('TabsTest');
 };
 
 export const resetLoadOrder = () => { loadOrder.length = 0; };