move tab button test to ButtonTab page

Author: markdevocht

playground/src/screens/FirstBottomTabScreen.tsx

@@ -9,10 +9,11 @@ import Screens from './Screens';
 import { component } from '../commons/Layouts';
 import testIDs from '../testIDs';
 import bottomTabsStruct from './BottomTabsLayoutStructure';
+import { launchTabsTogetherTest, launchTabsOnSwitchTest } from './TabsTogetherTest';
 
 export class MountedBottomTabScreensState {
   static mountedBottomTabScreens: string[] = [];
-  static callback: (mountedBottomTabScreens: string[]) => void = () => {};
+  static callback: (mountedBottomTabScreens: string[]) => void = () => { };
 
   static addScreen(screen: string) {
     this.mountedBottomTabScreens.push(screen);
@@ -108,6 +109,8 @@ export default class FirstBottomTabScreen extends Component<NavigationProps, Nav
         <Button label="Add border and shadow" onPress={this.modifyBottomTabs} />
         <Button label="Stylize" testID={STYLIZE_TABS_BTN} onPress={this.stylizeBottomTabs} />
         <Button label="Set Styled Root" testID={SET_ROOT_BTN} onPress={this.setStylizedRoot} />
+        <Button label="Tabs Together Test" onPress={launchTabsTogetherTest} />
+        <Button label="Tabs OnSwitch Test" onPress={launchTabsOnSwitchTest} />
 
         <Text testID={MOUNTED_SCREENS_TEXT}>
           Mounted screens: {this.state.mountedBottomTabScreens.join(', ')}

playground/src/screens/LayoutsScreen.tsx

@@ -14,7 +14,6 @@ import Screens from './Screens';
 import Navigation from '../services/Navigation';
 import { stack } from '../commons/Layouts';
 import bottomTabsStruct from './BottomTabsLayoutStructure';
-import { launchTabsTogetherTest, launchTabsOnSwitchTest } from './TabsTogetherTest';
 
 const {
   WELCOME_SCREEN_HEADER,
@@ -84,16 +83,6 @@ export default class LayoutsScreen extends NavigationComponent<NavigationProps,
           platform="ios"
           onPress={this.splitView}
         />
-        <Button
-          label="Tabs Together Test"
-          testID="TABS_TOGETHER_TEST_BTN"
-          onPress={launchTabsTogetherTest}
-        />
-        <Button
-          label="Tabs OnSwitch Test"
-          testID="TABS_ONSWITCH_TEST_BTN"
-          onPress={launchTabsOnSwitchTest}
-        />
         <Text>{this.state.componentWillAppear && 'componentWillAppear'}</Text>
         <Text>{this.state.componentDidAppear && 'componentDidAppear'}</Text>
       </Root>

playground/src/screens/TabsTogetherTest.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+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();
@@ -16,9 +17,7 @@ interface Props {
     url: string;
 }
 
-const WebViewTab: NavigationFunctionComponent<Props> = ({ componentId, tabIndex, title, url }) => {
-    const [isLoaded, setIsLoaded] = useState(false);
-    const [progress, setProgress] = useState(0);
+const WebViewTab: NavigationFunctionComponent<Props> = ({ componentId, tabIndex, url }) => {
 
     useEffect(() => {
         const update = () => {
@@ -50,25 +49,15 @@ const WebViewTab: NavigationFunctionComponent<Props> = ({ componentId, tabIndex,
     const onLoadEnd = () => {
         loadOrder.push(tabIndex);
         notifyListeners();
-        setIsLoaded(true);
     };
 
     return (
-        <View style={styles.container}>
-            <View style={styles.header}>
-                <Text style={styles.headerText}>Tab {tabIndex}: {title}</Text>
-                <View style={[styles.status, isLoaded ? styles.loaded : styles.loading]}>
-                    <Text style={styles.statusText}>{isLoaded ? '✓' : `${progress}%`}</Text>
-                </View>
-            </View>
-            <WebView
-                source={{ uri: url }}
-                style={styles.webview}
-                onLoadEnd={onLoadEnd}
-                onLoadProgress={(e) => setProgress(Math.round(e.nativeEvent.progress * 100))}
-                startInLoadingState
-            />
-        </View>
+        <WebView
+            source={{ uri: url }}
+            style={styles.webview}
+            onLoadEnd={onLoadEnd}
+            startInLoadingState
+        />
     );
 };
 
@@ -94,6 +83,18 @@ const goBackToPlayground = () => {
             },
         },
     });
+    // 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 },
+            },
+        },
+    });
 };
 
 const TABS = [
@@ -125,13 +126,6 @@ export const launchTabsTogetherTest = () => launchTest('together');
 export const launchTabsOnSwitchTest = () => launchTest('onSwitchToTab');
 
 const styles = StyleSheet.create({
-    container: { flex: 1, backgroundColor: '#f5f6fa' },
-    header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 12, backgroundColor: '#2c3e50' },
-    headerText: { color: '#fff', fontSize: 16, fontWeight: '700' },
-    status: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: 16, minWidth: 50, alignItems: 'center' },
-    loading: { backgroundColor: '#e67e22' },
-    loaded: { backgroundColor: '#27ae60' },
-    statusText: { color: '#fff', fontSize: 12, fontWeight: '600' },
     webview: { flex: 1 },
 });