Merge pull request #37 from kanzitelli/v5.2.0

v5.2.0

App.tsx

@@ -2,10 +2,11 @@ import 'expo-dev-client';
 import React, {useCallback, useEffect, 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 {GestureHandlerRootView} from 'react-native-gesture-handler';
 
-import {AppRoot} from './src/navio';
+import {App} from './src/navio';
 import {
   configureDesignSystem,
   getNavigationTheme,
@@ -46,7 +47,14 @@ export default (): JSX.Element => {
     <GestureHandlerRootView style={{flex: 1}}>
       <AppProvider>
         <StatusBar style={getStatusBarStyle()} backgroundColor={getStatusBarBGColor()} />
-        <AppRoot navigationContainerProps={{theme: getNavigationTheme()}} />
+        <App
+          navigationContainerProps={{
+            theme: getNavigationTheme(),
+            linking: {
+              prefixes: [Linking.createURL('/')],
+            },
+          }}
+        />
       </AppProvider>
     </GestureHandlerRootView>
   );

app.json

@@ -6,6 +6,7 @@
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "automatic",
+    "scheme": "myapp",
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",

package.json

@@ -41,49 +41,50 @@
     "date-fns": "^2.29.3",
     "expo": "^47.0.0",
     "expo-dev-client": "~2.0.1",
+    "expo-linking": "~3.3.0",
     "expo-localization": "~14.0.0",
     "expo-splash-screen": "~0.17.5",
     "expo-status-bar": "~1.4.2",
     "expo-updates": "~0.15.6",
     "formik": "^2.2.9",
-    "i18n-js": "^4.1.1",
+    "i18n-js": "^4.2.2",
     "lodash": "^4.17.21",
-    "mobx": "^6.6.2",
-    "mobx-persist-store": "^1.1.2",
-    "mobx-react": "^7.5.3",
+    "mobx": "^6.8.0",
+    "mobx-persist-store": "^1.1.3",
+    "mobx-react": "^7.6.0",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-native": "0.70.5",
-    "react-native-fast-image": "^8.6.1",
+    "react-native-fast-image": "^8.6.3",
     "react-native-gesture-handler": "~2.8.0",
-    "react-native-mmkv": "^2.4.3",
+    "react-native-mmkv": "^2.7.0",
     "react-native-reanimated": "~2.12.0",
     "react-native-safe-area-context": "4.4.1",
     "react-native-screens": "~3.18.0",
-    "react-native-ui-lib": "^6.30.1",
+    "react-native-ui-lib": "^7.1.0",
     "react-native-web": "~0.18.7",
     "rn-bounceable": "^1.2.0",
-    "rn-navio": "^0.0.5",
-    "yup": "^0.32.11"
+    "rn-navio": "^0.0.6",
+    "yup": "^1.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.3",
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/core": "^7.21.0",
+    "@babel/preset-typescript": "^7.21.0",
     "@expo/config-plugins": "^5.0.2",
-    "@expo/webpack-config": "^0.17.2",
+    "@expo/webpack-config": "^18.0.1",
     "@react-native-community/eslint-config": "2.0.0",
-    "@types/i18n-js": "^3.8.3",
-    "@types/lodash": "^4.14.185",
-    "@types/react": "~18.0.24",
-    "@types/react-dom": "~18.0.8",
-    "@types/react-native": "~0.70.6",
-    "@typescript-eslint/eslint-plugin": "^5.37.0",
-    "@typescript-eslint/parser": "^5.37.0",
-    "dotenv-cli": "^6.0.0",
+    "@types/i18n-js": "^3.8.4",
+    "@types/lodash": "^4.14.191",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/react-native": "^0.71.3",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
+    "dotenv-cli": "^7.0.0",
     "eslint": "7.14.0",
-    "prettier": "^2.7.1",
-    "release-it": "^15.4.2",
-    "typescript": "^4.6.3"
+    "prettier": "^2.8.4",
+    "release-it": "^15.6.0",
+    "typescript": "^4.9.5"
   },
   "resolutions": {
     "@types/react": "18.0.0",

src/components/button.tsx

@@ -1,18 +1,22 @@
 import React from 'react';
-import {View, Text, MarginModifiers} from 'react-native-ui-lib';
+import {View, Text, MarginModifiers, Modifiers} from 'react-native-ui-lib';
 import {Bounceable} from 'rn-bounceable';
 
-type Props = MarginModifiers & {
-  label?: string;
-  onPress?: PureFunc;
-};
+type Props = Modifiers.MarginModifiers &
+  Modifiers.FlexModifiers & {
+    label?: string;
+    onPress?: PureFunc;
+    size?: 'medium' | 'small';
+  };
+
+export const BButton: React.FC<Props> = ({label, onPress, size = 'medium', ...modifiers}) => {
+  const textSize = size === 'medium' ? {text65M: true} : {text70: true};
 
-export const BButton: React.FC<Props> = ({label, onPress, ...modifiers}) => {
   return (
     <View {...modifiers}>
       <Bounceable onPress={onPress}>
         <View center bg-primary padding-s4 br40>
-          <Text text65M _white>
+          <Text _white {...textSize}>
             {label}
           </Text>
         </View>

src/components/sections/NavioSection.tsx

@@ -3,6 +3,8 @@ import {Text} from 'react-native-ui-lib';
 import {useServices} from '../../services';
 import {BButton} from '../button';
 import {Section} from '../section';
+import {randomNum} from '../../utils/help';
+import {Row} from '../row';
 
 type Props = {};
 
@@ -16,6 +18,10 @@ export const NavioSection: React.FC<Props> = ({}) => {
   const stacksPush = () => navio.stacks.push('ProductPageStack');
   const stacksSetRoot = () => navio.stacks.setRoot('MainStack');
   const tabsJumpTo = () => navio.tabs.jumpTo('PlaygroundTab');
+  const tabsUpdateOptionsBadge = () =>
+    navio.tabs.updateOptions('SettingsTab', {tabBarBadge: randomNum()});
+  const tabsUpdateOptionsTitle = () =>
+    navio.tabs.updateOptions('SettingsTab', {title: `Random Title ${randomNum()}`});
   const tabsSetRoot = () => navio.tabs.setRoot('AppTabs');
   const drawersToggle = () => navio.drawers.toggle();
   const drawersJumpTo = () => navio.drawers.jumpTo('Playground');
@@ -49,6 +55,24 @@ export const NavioSection: React.FC<Props> = ({}) => {
         Tabs
       </Text>
       <BButton marginV-s1 label={t.do('section.navio.button.tabs.jump_to')} onPress={tabsJumpTo} />
+      <Row>
+        <BButton
+          flex
+          marginV-s1
+          marginR-s1
+          size="small"
+          label={t.do('section.navio.button.tabs.update_badge_options')}
+          onPress={tabsUpdateOptionsBadge}
+        />
+        <BButton
+          flex
+          marginV-s1
+          marginL-s1
+          size="small"
+          label={t.do('section.navio.button.tabs.update_title_options')}
+          onPress={tabsUpdateOptionsTitle}
+        />
+      </Row>
       <BButton
         marginV-s1
         label={t.do('section.navio.button.tabs.set_root')}

src/navio.tsx

@@ -73,6 +73,7 @@ export const navio = Navio.build({
           options: () => ({
             title: services.t.do('settings.title'),
             tabBarIcon: getTabBarIcon('SettingsTab'),
+            tabBarBadge: 23,
           }),
         },
       },
@@ -84,7 +85,12 @@ export const navio = Navio.build({
   drawers: {
     MainDrawer: {
       content: {
-        Main: 'MainStack',
+        Main: {
+          stack: 'MainStack',
+          options: {
+            drawerType: 'front',
+          },
+        },
         Example: 'ExampleStack',
         Playground: ['Playground'],
       },
@@ -106,4 +112,4 @@ export const navio = Navio.build({
 });
 
 export const getNavio = () => navio;
-export const AppRoot = navio.Root;
+export const App = navio.App;

src/services/translate/translations.ts

@@ -23,6 +23,8 @@ export const en = {
         },
         tabs: {
           jump_to: 'Jump to ⤵',
+          update_badge_options: 'Update tab badge',
+          update_title_options: 'Update title',
           set_root: 'Set root ↺',
         },
         drawers: {

src/utils/help.ts

@@ -1,5 +1,3 @@
-export const randomNum = (max = 100): number => Math.floor(Math.random() * max);
-
 export const randomStr = (len: number = 16) => {
   const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
   let result = '';
@@ -10,3 +8,9 @@ export const randomStr = (len: number = 16) => {
 
   return result;
 };
+
+export const randomNum = (min: number = 1, max: number = 99) => {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive
+};