Merge pull request #40 from kanzitelli/improvs-and-playground

Better Playground + Other improvements
kanzitelli · Mar 16, 2023 · bbca302 · bbca302
2 parents e832073 + a937ed7
commit bbca302
Show file tree

Hide file tree

Showing 26 changed files with 703 additions and 230 deletions.
diff --git a/.release-it.json b/.release-it.json
@@ -12,4 +12,4 @@
   "github": {
     "release": true
   }
-}
+}
diff --git a/App.tsx b/App.tsx
@@ -1,12 +1,13 @@
 import 'expo-dev-client';
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {LogBox} from 'react-native';
-import * as SplashScreen from 'expo-splash-screen';
+
 import * as Linking from 'expo-linking';
 import {StatusBar} from 'expo-status-bar';
+import * as SplashScreen from 'expo-splash-screen';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 
-import {App} from '@app/navio';
+import {NavioApp} from '@app/navio';
 import {
   configureDesignSystem,
   getNavigationTheme,
@@ -27,7 +28,9 @@ export default (): JSX.Element => {
   useAppearance();
   const [ready, setReady] = useState(false);
 
-  const start = useCallback(async () => {
+  // `onLaunch` performs actions that have to be done on app launch before displaying app UI.
+  // If you need to make some api requests, load remote config, or some other "heavy" actions, you can use `@app/services/onLaunch.tsx`.
+  const onLaunch = useCallback(async () => {
     await SplashScreen.preventAutoHideAsync();
 
     await hydrateStores();
@@ -39,21 +42,31 @@ export default (): JSX.Element => {
   }, []);
 
   useEffect(() => {
-    start();
-  }, [start]);
+    onLaunch();
+  }, [onLaunch]);
 
-  if (!ready) return <></>;
+  const NotReady = useMemo(() => {
+    // [Tip]
+    // You can show loading state here.
+    return <></>;
+  }, [ready]);
+
+  if (!ready) return NotReady;
   return (
     <GestureHandlerRootView style={{flex: 1}}>
       <AppProvider>
         <StatusBar style={getStatusBarStyle()} backgroundColor={getStatusBarBGColor()} />
-        <App
+        <NavioApp
           navigationContainerProps={{
             theme: getNavigationTheme(),
             linking: {
               prefixes: [Linking.createURL('/')],
             },
           }}
+
+          // [Tip]
+          // You can use `initialRouteName` to change root of the app depending on global state changes.
+          // initialRouteName="AppTabs"
         />
       </AppProvider>
     </GestureHandlerRootView>

diff --git a/README.md b/README.md
@@ -4,6 +4,10 @@
 
 This starter is a collection of libraries and approaches needed for fast start and productive maintainance of Expo (React Native) App.
 
+> `Expo Starter` is a part of [starters.dev](https://github.com/starters-dev) collection.
+
+> If `Expo Starter` helped you in any way, don't hesitate to ⭐️ the repo!
+
 ## Getting Started
 
 #### Quick start with [cli-rn](https://github.com/kanzitelli/cli-rn)
@@ -80,10 +84,10 @@ All setup for your screens, tabs and modals take place in one file `src/screens/
 import {Navio} from 'rn-navio';
 
 // importing screen components
-import {Main} from './main';
-import {Playground} from './playground';
-import {Settings} from './settings';
-import {Example} from './_screen-sample';
+import {Main} from '@app/screens/main';
+import {Playground} from '@app/screens/playground';
+import {Settings} from '@app/screens/settings';
+import {Example} from '@app/screens/_screen-sample';
 
 // building layout
 export const navio = Navio.build({
@@ -97,12 +101,6 @@ export const navio = Navio.build({
         title: 'Playground',
       }),
     },
-    ProductPage: {
-      component: Example,
-      options: {
-        headerShown: false,
-      },
-    },
   },
   stacks: {
     MainStack: ['Main', 'Example'],
@@ -114,13 +112,6 @@ export const navio = Navio.build({
         },
       },
     },
-    ProductPageStack: {
-      screens: ['ProductPage'],
-      containerOptions: {
-        headerShown: true,
-        title: 'Product page',
-      },
-    },
   },
   tabs: {
     AppTabs: {
@@ -187,9 +178,13 @@ export const Screen = () => {
 };
 ```
 
-#### Dark mode support
+#### App flows
+
+You can find different app flows, such as Auth flow, simple 2 screens, 3 tabs, etc., in the [navio.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/navio.tsx).
+
+#### Dark mode
 
-You can define modes in `utils/designSystem.tsx`.
+You can define modes in [designSystem.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/utils/designSystem.tsx).
 
 #### Samples for new screens, services, stores and components.
 

diff --git a/package.json b/package.json
@@ -39,16 +39,16 @@
     "@react-navigation/stack": "^6.3.0",
     "@shopify/flash-list": "1.4.0",
     "date-fns": "^2.29.3",
-    "expo": "~48.0.4",
-    "expo-dev-client": "~2.1.4",
+    "expo": "^48.0.7",
+    "expo-dev-client": "~2.1.5",
     "expo-image": "~1.0.0",
     "expo-linking": "~4.0.1",
     "expo-localization": "~14.1.1",
     "expo-splash-screen": "~0.18.1",
     "expo-status-bar": "~1.4.4",
     "expo-updates": "~0.16.3",
     "formik": "^2.2.9",
-    "i18n-js": "^4.2.2",
+    "i18n-js": "^4.2.3",
     "lodash": "^4.17.21",
     "mobx": "^6.8.0",
     "mobx-persist-store": "^1.1.3",
@@ -61,14 +61,15 @@
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
-    "react-native-ui-lib": "^7.1.1",
+    "react-native-ui-lib": "^7.2.1",
     "react-native-web": "~0.18.10",
     "rn-bounceable": "^1.2.0",
     "rn-navio": "^0.0.6",
     "yup": "^1.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@babel/preset-typescript": "^7.21.0",
     "@expo/config-plugins": "~6.0.0",
     "@expo/webpack-config": "^18.0.1",

diff --git a/src/components/icon.tsx b/src/components/icon.tsx
@@ -21,12 +21,12 @@ export const Icon: React.FC<IconProps> = ({
   color = Colors.textColor,
   viewProps,
   onPress,
-  bounceable = true,
+  bounceable = false,
 }: IconProps) => {
   const Icon = useMemo(
     () => (
       <View {...viewProps}>
-        <IconComponent name={name} size={size} color={color} />
+        <IconComponent name={name as any} size={size} color={color} />
       </View>
     ),
     [viewProps, name, size, color],

diff --git a/src/components/section.tsx b/src/components/section.tsx
@@ -7,7 +7,7 @@ export const Section: React.FC<
   }>
 > = ({children, title}) => {
   return (
-    <View margin-s2 marginV-s3 paddingH-s3>
+    <View margin-s2 marginV-s2 paddingH-s3>
       <Text section textColor>
         {title}
       </Text>

diff --git a/src/components/sections/NavioSection.tsx b/src/components/sections/NavioSection.tsx
@@ -33,28 +33,56 @@ export const NavioSection: React.FC<Props> = ({}) => {
       <Text text60R textColor>
         Common
       </Text>
-      <BButton marginV-s1 label={t.do('section.navio.button.common.push')} onPress={pushScreen} />
-      <BButton marginV-s1 label={t.do('section.navio.button.common.go_back')} onPress={goBack} />
+      <Row>
+        <BButton
+          flex
+          marginV-s1
+          marginR-s1
+          size="small"
+          label={t.do('section.navio.button.common.push')}
+          onPress={pushScreen}
+        />
+        <BButton
+          flex
+          marginV-s1
+          marginL-s1
+          size="small"
+          label={t.do('section.navio.button.common.go_back')}
+          onPress={goBack}
+        />
+      </Row>
       <BButton
         marginV-s1
+        size="small"
         label={t.do('section.navio.button.common.set_root')}
         onPress={globalSetRoot}
       />
 
-      <Text marginT-s4 text60R textColor>
+      <Text marginT-s2 text60R textColor>
         Stacks
       </Text>
-      <BButton marginV-s1 label={t.do('section.navio.button.stacks.push')} onPress={stacksPush} />
-      <BButton
-        marginV-s1
-        label={t.do('section.navio.button.stacks.set_root')}
-        onPress={stacksSetRoot}
-      />
+      <Row>
+        <BButton
+          flex
+          marginV-s1
+          marginR-s1
+          size="small"
+          label={t.do('section.navio.button.stacks.push')}
+          onPress={stacksPush}
+        />
+        <BButton
+          flex
+          marginV-s1
+          marginL-s1
+          size="small"
+          label={t.do('section.navio.button.stacks.set_root')}
+          onPress={stacksSetRoot}
+        />
+      </Row>
 
-      <Text marginT-s4 text60R textColor>
+      <Text marginT-s2 text60R textColor>
         Tabs
       </Text>
-      <BButton marginV-s1 label={t.do('section.navio.button.tabs.jump_to')} onPress={tabsJumpTo} />
       <Row>
         <BButton
           flex
@@ -73,35 +101,62 @@ export const NavioSection: React.FC<Props> = ({}) => {
           onPress={tabsUpdateOptionsTitle}
         />
       </Row>
-      <BButton
-        marginV-s1
-        label={t.do('section.navio.button.tabs.set_root')}
-        onPress={tabsSetRoot}
-      />
+      <Row>
+        <BButton
+          flex
+          marginV-s1
+          marginR-s1
+          size="small"
+          label={t.do('section.navio.button.tabs.jump_to')}
+          onPress={tabsJumpTo}
+        />
+        <BButton
+          flex
+          marginV-s1
+          marginL-s1
+          size="small"
+          label={t.do('section.navio.button.tabs.set_root')}
+          onPress={tabsSetRoot}
+        />
+      </Row>
 
-      <Text marginT-s4 text60R textColor>
+      <Text marginT-s2 text60R textColor>
         Drawers
       </Text>
+      <Row>
+        <BButton
+          flex
+          marginV-s1
+          marginR-s1
+          size="small"
+          label={t.do('section.navio.button.drawers.toggle')}
+          onPress={drawersToggle}
+        />
+        <BButton
+          flex
+          marginV-s1
+          marginL-s1
+          size="small"
+          label={t.do('section.navio.button.drawers.jump_to')}
+          onPress={drawersJumpTo}
+        />
+      </Row>
       <BButton
         marginV-s1
-        label={t.do('section.navio.button.drawers.toggle')}
-        onPress={drawersToggle}
-      />
-      <BButton
-        marginV-s1
-        label={t.do('section.navio.button.drawers.jump_to')}
-        onPress={drawersJumpTo}
-      />
-      <BButton
-        marginV-s1
+        size="small"
         label={t.do('section.navio.button.drawers.set_root')}
         onPress={drawersSetRoot}
       />
 
-      <Text marginT-s4 text60R textColor>
+      <Text marginT-s2 text60R textColor>
         Modals
       </Text>
-      <BButton marginV-s1 label={t.do('section.navio.button.modals.show')} onPress={modalsShow} />
+      <BButton
+        marginV-s1
+        size="small"
+        label={t.do('section.navio.button.modals.show')}
+        onPress={modalsShow}
+      />
     </Section>
   );
 };