Merge pull request #45 from kanzitelli/v6.3.0

`v6.3.0`

package.json

@@ -40,13 +40,13 @@
     "@shopify/flash-list": "1.4.0",
     "date-fns": "^2.29.3",
     "expo": "^48.0.7",
-    "expo-dev-client": "~2.1.5",
+    "expo-dev-client": "~2.2.1",
     "expo-image": "~1.0.0",
     "expo-linking": "~4.0.1",
     "expo-localization": "~14.1.1",
-    "expo-splash-screen": "~0.18.1",
+    "expo-splash-screen": "~0.18.2",
     "expo-status-bar": "~1.4.4",
-    "expo-updates": "~0.16.3",
+    "expo-updates": "~0.16.4",
     "formik": "^2.2.9",
     "i18n-js": "^4.2.3",
     "lodash": "^4.17.21",
@@ -55,7 +55,7 @@
     "mobx-react": "^7.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.3",
+    "react-native": "0.71.7",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-mmkv": "^2.7.0",
     "react-native-reanimated": "~2.14.4",

src/components/action.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import {View, Text, Colors} from 'react-native-ui-lib';
 import {Bounceable} from 'rn-bounceable';
-import {Icon} from './icon';
+import {Icon, IconName} from './icon';
 
 type ActionProps = {
   title: string;
-  icon?: string;
-  rightIcon?: string;
+  icon?: IconName;
+  rightIcon?: IconName;
   info?: string;
   disabled?: boolean;
   onPress?: () => void;

src/components/icon.tsx

@@ -3,8 +3,10 @@ import {View, Colors, ViewProps} from 'react-native-ui-lib';
 import {Ionicons} from '@expo/vector-icons';
 import {Bounceable} from 'rn-bounceable';
 
+export type IconName = keyof typeof Ionicons.glyphMap;
+
 type IconProps = {
-  name: string;
+  name: IconName;
   size?: number;
   color?: string;
   viewProps?: ViewProps;
@@ -26,7 +28,7 @@ export const Icon: React.FC<IconProps> = ({
   const Icon = useMemo(
     () => (
       <View {...viewProps}>
-        <IconComponent name={name as any} size={size} color={color} />
+        <IconComponent name={name} size={size} color={color} />
       </View>
     ),
     [viewProps, name, size, color],

src/components/sections/NavioSection.tsx

@@ -17,6 +17,11 @@ export const NavioSection: React.FC<Props> = ({}) => {
   const globalSetRoot = () => navio.setRoot('tabs', 'AppTabs');
   const stacksPush = () => navio.stacks.push('ProductPageStack');
   const stacksSetRoot = () => navio.stacks.setRoot('MainStack');
+  const stacksPushWithParams = () =>
+    navio.N.navigate('ProductPageStack', {
+      screen: 'ProductPage',
+      params: {productId: 'product_jf289h'},
+    }); // in order to pass params to a stack you will need to use react-navigation instance `navio.N` and using `.navigate()` as you would do using react-navigation.
   const tabsJumpTo = () => navio.tabs.jumpTo('PlaygroundTab');
   const tabsUpdateOptionsBadge = () =>
     navio.tabs.updateOptions('SettingsTab', {tabBarBadge: randomNum()});
@@ -80,6 +85,14 @@ export const NavioSection: React.FC<Props> = ({}) => {
           onPress={stacksSetRoot}
         />
       </Row>
+      <BButton
+        flex
+        marginV-s1
+        marginR-s1
+        size="small"
+        label={t.do('section.navio.button.stacks.push_with_params')}
+        onPress={stacksPushWithParams}
+      />
 
       <Text marginT-s2 text60R textColor>
         Tabs

src/screens/_screen-sample.tsx

@@ -1,21 +1,24 @@
 import React, {useEffect} from 'react';
 import {ScrollView} from 'react-native';
-import {View} from 'react-native-ui-lib';
+import {Text, View} from 'react-native-ui-lib';
 import {observer} from 'mobx-react';
-import {useNavigation} from '@react-navigation/native';
+import {useNavigation, useRoute} from '@react-navigation/native';
 import {NavioScreen} from 'rn-navio';
 
 import {services, useServices} from '@app/services';
 import {useAppearance} from '@app/utils/hooks';
 import {NavioSection} from '@app/components/sections/NavioSection';
 
-export type Props = {
-  type?: 'push';
+export type Params = {
+  type?: 'push' | 'show';
+  productId?: string;
 };
 
-export const Example: NavioScreen<Props> = observer(({type = 'push'}) => {
+export const Example: NavioScreen = observer(() => {
   useAppearance(); // for Dark Mode
   const navigation = useNavigation();
+  const {params: _p} = useRoute(); // this is how to get passed params with navio.push('Screen', params)
+  const params = _p as Params; // use as params?.type
   const {t, navio} = useServices();
   // const {ui} = useStores();
 
@@ -38,6 +41,13 @@ export const Example: NavioScreen<Props> = observer(({type = 'push'}) => {
   return (
     <View flex bg-bgColor>
       <ScrollView contentInsetAdjustmentBehavior="always">
+        {/* Product Page example related */}
+        {!!params?.productId ? (
+          <View margin-s2 marginV-s2 paddingH-s3>
+            <Text>ProductId: {params.productId}</Text>
+          </View>
+        ) : null}
+
         <NavioSection />
       </ScrollView>
     </View>
@@ -46,5 +56,5 @@ export const Example: NavioScreen<Props> = observer(({type = 'push'}) => {
 
 Example.options = props => ({
   headerBackTitleStyle: false,
-  title: `${services.t.do('example.title')} ${(props?.route?.params as Props)?.type ?? ''}`,
+  title: `${services.t.do('example.title')} ${(props?.route?.params as Params)?.type ?? ''}`,
 });

src/screens/playground/index.tsx

@@ -9,15 +9,15 @@ import {useStores} from '@app/stores';
 import {useServices} from '@app/services';
 import {useAppearance} from '@app/utils/hooks';
 import {Row} from '@app/components/row';
-import {Icon} from '@app/components/icon';
+import {Icon, IconName} from '@app/components/icon';
 import {Section} from '@app/components/section';
 import {Alert} from 'react-native';
 
 type SectionData = {
   content: {
     title: string;
     subtitle?: string;
-    icon: string;
+    icon: IconName;
     onPress: PureFunc;
   }[];
 };

src/services/translate/translations.ts

@@ -20,6 +20,7 @@ export const en = {
         stacks: {
           push: 'Push →',
           set_root: 'Set root ↺',
+          push_with_params: 'Push with params →',
         },
         tabs: {
           jump_to: 'Jump to ⤵',

src/utils/designSystem.tsx

@@ -7,7 +7,7 @@ import {Appearance as RNAppearance, Platform} from 'react-native';
 import {Colors, Typography} from 'react-native-ui-lib';
 
 import {stores} from '@app/stores';
-import {Icon} from '@app/components/icon';
+import {Icon, IconName} from '@app/components/icon';
 import {Appearance} from '@app/utils/types/enums';
 
 // =============
@@ -164,7 +164,7 @@ export const getTabBarIcon =
   ({focused, color, size}: {focused: boolean; color: string; size: number}) =>
     <Icon name={getTabIconName(tabName, focused)} size={size} color={color} />;
 
-const getTabIconName = (tabName: string, focused: boolean): string => {
+const getTabIconName = (tabName: string, focused: boolean): IconName => {
   if (tabName === 'MainTab') {
     return focused ? 'home' : 'home-outline';
   }