navio changes + more examples

kanzitelli · Mar 19, 2023 · ea6675e · cj · Mar 21, 2023 · kanzitelli
1 parent 2b62af2
commit ea6675e
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 18 deletions.
diff --git a/App.tsx b/App.tsx
@@ -65,8 +65,8 @@ export default (): JSX.Element => {
           }}
 
           // [Tip]
-          // You can use `initialRouteName` to change root of the app depending on global state changes.
-          // initialRouteName="AppTabs"
+          // You can use `root` to change the root of the app depending on global state changes.
+          // root={isLoggedIn ? 'AuthStack' : 'AppTabs'}
         />
       </AppProvider>
     </GestureHandlerRootView>

diff --git a/src/components/sections/NavioSection.tsx b/src/components/sections/NavioSection.tsx
@@ -21,10 +21,11 @@ export const NavioSection: React.FC<Props> = ({}) => {
   const tabsUpdateOptionsBadge = () =>
     navio.tabs.updateOptions('SettingsTab', {tabBarBadge: randomNum()});
   const tabsUpdateOptionsTitle = () =>
-    navio.tabs.updateOptions('SettingsTab', {title: `Random Title ${randomNum()}`});
+    navio.tabs.updateOptions('SettingsTab', {title: `Random ${randomNum()}`});
   const tabsSetRoot = () => navio.tabs.setRoot('AppTabs');
   const drawersToggle = () => navio.drawers.toggle();
   const drawersJumpTo = () => navio.drawers.jumpTo('Playground');
+  const drawerUpdateOptions = () => navio.drawers.updateOptions('Main', {title: 'Main (updated)'});
   const drawersSetRoot = () => navio.drawers.setRoot('MainDrawer');
   const modalsShow = () => navio.modals.show('ExampleModal');
 
@@ -141,12 +142,25 @@ export const NavioSection: React.FC<Props> = ({}) => {
           onPress={drawersJumpTo}
         />
       </Row>
-      <BButton
-        marginV-s1
-        size="small"
-        label={t.do('section.navio.button.drawers.set_root')}
-        onPress={drawersSetRoot}
-      />
+      <Row>
+        <BButton
+          flex
+          marginV-s1
+          marginR-s1
+          size="small"
+          label={t.do('section.navio.button.drawers.update_title_options')}
+          onPress={drawerUpdateOptions}
+        />
+
+        <BButton
+          flex
+          marginV-s1
+          marginL-s1
+          size="small"
+          label={t.do('section.navio.button.drawers.set_root')}
+          onPress={drawersSetRoot}
+        />
+      </Row>
 
       <Text marginT-s2 text60R textColor>
         Modals

diff --git a/src/navio.tsx b/src/navio.tsx
@@ -66,6 +66,7 @@ export const navio = Navio.build({
     AuthFlow: ['AuthLogin', 'Example'],
   },
   tabs: {
+    // main 3 tabs
     AppTabs: {
       content: {
         MainTab: {
@@ -92,11 +93,29 @@ export const navio = Navio.build({
         },
       },
     },
-  },
-  modals: {
-    ExampleModal: 'ExampleStack',
+
+    // tabs with drawer
+    // TabsWithDrawer: {
+    //   content: {
+    //     MainTab: {
+    //       stack: 'MainStack',
+    //       options: () => ({
+    //         title: 'Main',
+    //         tabBarIcon: getTabBarIcon('MainTab'),
+    //       }),
+    //     },
+    //     PlaygroundTab: {
+    //       drawer: 'DrawerForTabs',
+    //       options: () => ({
+    //         title: 'Playground',
+    //         tabBarIcon: getTabBarIcon('PlaygroundTab'),
+    //       }),
+    //     },
+    //   },
+    // },
   },
   drawers: {
+    // main drawer
     MainDrawer: {
       content: {
         Main: {
@@ -105,10 +124,40 @@ export const navio = Navio.build({
             drawerType: 'front',
           },
         },
-        Example: 'ExampleStack',
-        Playground: 'PlaygroundStack',
+        Example: {
+          stack: ['Example'],
+        },
+        Playground: {
+          stack: 'PlaygroundStack',
+        },
+        // Tabs: {
+        //   tabs: 'TabsWithDrawer',
+        // },
       },
     },
+
+    // drawer inside tabs
+    // DrawerForTabs: {
+    //   content: {
+    //     FlashList: {
+    //       stack: ['PlaygroundFlashList'],
+    //       options: {
+    //         title: 'Flash List',
+    //         drawerPosition: 'right',
+    //       },
+    //     },
+    //     ExpoImage: {
+    //       stack: ['PlaygroundExpoImage'],
+    //       options: {
+    //         title: 'Expo Image',
+    //         drawerPosition: 'right',
+    //       },
+    //     },
+    //   },
+    // },
+  },
+  modals: {
+    ExampleModal: 'ExampleStack',
   },
   root: 'AppTabs',
   hooks: [useAppearance],

diff --git a/src/screens/playground/index.tsx b/src/screens/playground/index.tsx
@@ -11,6 +11,7 @@ import {useAppearance} from '@app/utils/hooks';
 import {Row} from '@app/components/row';
 import {Icon} from '@app/components/icon';
 import {Section} from '@app/components/section';
+import {Alert} from 'react-native';
 
 type SectionData = {
   content: {
@@ -27,8 +28,18 @@ export const Playground: React.FC = observer(() => {
   const {auth} = useStores();
 
   // Methods
-  const shopFlashList = () => navio.push('PlaygroundFlashList');
-  const shopExpoImage = () => navio.push('PlaygroundExpoImage');
+  const showFlashList = () => navio.push('PlaygroundFlashList');
+  const showExpoImage = () => navio.push('PlaygroundExpoImage');
+  const showDrawerWithTabs = () => {
+    Alert.alert('Uncomment related code in @app/navio.tsx and @app/screens/playground');
+    // uncomment related code in navio.tsx and below
+    // navio.setRoot('drawers', 'MainDrawer');
+  };
+  const showTabsWithDrawer = () => {
+    Alert.alert('Uncomment related code in @app/navio.tsx and @app/screens/playground');
+    // uncomment related code in navio.tsx and below
+    // navio.setRoot('tabs', 'TabsWithDrawer');
+  };
 
   const showAuthFlow = () => {
     // logging out from previous session
@@ -52,13 +63,13 @@ export const Playground: React.FC = observer(() => {
           title: 'Flash List',
           subtitle: 'by Shopify',
           icon: 'list-outline',
-          onPress: shopFlashList,
+          onPress: showFlashList,
         },
         {
           title: 'Expo Image',
           subtitle: 'by Expo',
           icon: 'image-outline',
-          onPress: shopExpoImage,
+          onPress: showExpoImage,
         },
       ],
     },
@@ -76,6 +87,18 @@ export const Playground: React.FC = observer(() => {
           subtitle: 'Pushes Product Page w/out tabs',
           onPress: showProductPage,
         },
+        {
+          title: 'Drawer with tabs',
+          icon: 'filter-outline',
+          subtitle: 'Opens drawer app w/ tabs inside',
+          onPress: showDrawerWithTabs,
+        },
+        {
+          title: 'Tabs with drawer',
+          icon: 'log-in-outline',
+          subtitle: 'Opens app w/ 2 tabs and drawer inside one',
+          onPress: showTabsWithDrawer,
+        },
       ],
     },
   };

diff --git a/src/services/translate/translations.ts b/src/services/translate/translations.ts
@@ -30,6 +30,7 @@ export const en = {
         drawers: {
           toggle: 'Toggle ↔',
           jump_to: 'Jump to ↩',
+          update_title_options: 'Update opts (title)',
           set_root: 'Set root ↺',
         },
         modals: {