Merge pull request #39 from kanzitelli/v6.0.0

v6.0.0

App.tsx

@@ -6,17 +6,17 @@ import * as Linking from 'expo-linking';
 import {StatusBar} from 'expo-status-bar';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 
-import {App} from './src/navio';
+import {App} from '@app/navio';
 import {
   configureDesignSystem,
   getNavigationTheme,
   getStatusBarBGColor,
   getStatusBarStyle,
-} from './src/utils/designSystem';
-import {hydrateStores} from './src/stores';
-import {initServices} from './src/services';
-import {AppProvider} from './src/utils/providers';
-import {useAppearance} from './src/utils/hooks';
+} from '@app/utils/designSystem';
+import {hydrateStores} from '@app/stores';
+import {initServices} from '@app/services';
+import {AppProvider} from '@app/utils/providers';
+import {useAppearance} from '@app/utils/hooks';
 
 LogBox.ignoreLogs([
   'Require',

README.md

@@ -47,17 +47,13 @@ yarn start
 - [MobX](https://github.com/mobxjs/mobx) - simple, scalable state management, with [mobx-persist-store](https://github.com/quarrant/mobx-persist-store) for persisting your stores.
 - [Flash List](https://github.com/Shopify/flash-list) - a better list for React Native (by Shopify).
 - [React Native Gesture Handler](https://github.com/kmagiera/react-native-gesture-handler) - native touches and gesture system for React Native.
+- [Expo Image](https://github.com/expo/expo/tree/main/packages/expo-image) - cross-platform React component that loads and renders images.
 
 #### Native libraries
 
 In order to use them, you will need to run `yarn prebuild` command to generate `ios/` and `android/` folders with native code.
 
 - [MMKV](https://github.com/mrousavy/react-native-mmkv) - efficient, small mobile key-value storage framework developed by WeChat. [~30x faster](https://github.com/mrousavy/react-native-mmkv#benchmark) than _AsyncStorage_! Available only within Expo dev clients. Instructions on installation could be found [here](https://github.com/mrousavy/react-native-mmkv#expo).
-- [Fast Image](https://github.com/DylanVann/react-native-fast-image) - performant React Native image component.
-
-#### Extra helpful libraries
-
-- [Release It](https://github.com/release-it/release-it) - automate versioning and publishing of your app.
 
 #### Useful services/methods
 
@@ -205,7 +201,8 @@ There are still some things I would like to add to the starter:
 
 - [x] Auth flow [example](https://github.com/kanzitelli/expo-starter/issues/14#issuecomment-1020730141)
 - [x] [Navigation library](https://github.com/kanzitelli/rn-navio) to reduce boilerplate code.
-- [ ] Shared transitions
+- [x] [Expo Image](https://github.com/expo/expo/tree/main/packages/expo-image) added.
+- [ ] Shared transitions (w/ Reanimated v3)
 
 Feel free to open an issue for suggestions.
 

app.json

@@ -29,6 +29,7 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "plugins": ["expo-localization"]
   }
 }

babel.config.js

@@ -7,6 +7,17 @@ module.exports = function (api) {
       // https://github.com/software-mansion/react-native-reanimated/issues/1823#issuecomment-1384307084
       '@babel/plugin-proposal-export-namespace-from',
       'react-native-reanimated/plugin',
+
+      // for short paths, must be mirrored with tsconfig
+      [
+        'module-resolver',
+        {
+          extensions: ['.ts', '.tsx', '.js', '.jsx', '.ios.js', '.android.js'],
+          alias: {
+            '@app': './src',
+          },
+        },
+      ],
     ],
   };
 };

package.json

@@ -29,48 +29,48 @@
   },
   "dependencies": {
     "@kanzitelli/if-component": "^0.3.0",
-    "@react-native-async-storage/async-storage": "~1.17.3",
+    "@react-native-async-storage/async-storage": "1.17.11",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-native-picker/picker": "2.4.8",
     "@react-navigation/bottom-tabs": "^6.4.0",
     "@react-navigation/drawer": "^6.5.8",
     "@react-navigation/native": "^6.0.13",
     "@react-navigation/native-stack": "^6.9.0",
     "@react-navigation/stack": "^6.3.0",
-    "@shopify/flash-list": "1.3.1",
+    "@shopify/flash-list": "1.4.0",
     "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",
+    "expo": "~48.0.4",
+    "expo-dev-client": "~2.1.4",
+    "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",
     "lodash": "^4.17.21",
     "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.3",
-    "react-native-gesture-handler": "~2.8.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.71.3",
+    "react-native-gesture-handler": "~2.9.0",
     "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": "^7.1.0",
-    "react-native-web": "~0.18.7",
+    "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-web": "~0.18.10",
     "rn-bounceable": "^1.2.0",
     "rn-navio": "^0.0.6",
-    "yup": "^1.0.0"
+    "yup": "^1.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
     "@babel/preset-typescript": "^7.21.0",
-    "@expo/config-plugins": "^5.0.2",
+    "@expo/config-plugins": "~6.0.0",
     "@expo/webpack-config": "^18.0.1",
     "@react-native-community/eslint-config": "2.0.0",
     "@types/i18n-js": "^3.8.4",
@@ -80,6 +80,7 @@
     "@types/react-native": "^0.71.3",
     "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@typescript-eslint/parser": "^5.53.0",
+    "babel-plugin-module-resolver": "^5.0.0",
     "dotenv-cli": "^7.0.0",
     "eslint": "7.14.0",
     "prettier": "^2.8.4",

src/navio.tsx

@@ -1,18 +1,18 @@
 import {Navio} from 'rn-navio';
 
-import {Main} from './screens/main';
-import {Playground} from './screens/playground';
-import {Settings} from './screens/settings';
-import {Example} from './screens/_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';
 
-import {useAppearance} from './utils/hooks';
+import {useAppearance} from '@app/utils/hooks';
 import {
   screenDefaultOptions,
   tabScreenDefaultOptions,
   getTabBarIcon,
   drawerScreenDefaultOptions,
-} from './utils/designSystem';
-import {services} from './services';
+} from '@app/utils/designSystem';
+import {services} from '@app/services';
 
 // NAVIO
 export const navio = Navio.build({

src/screens/_screen-sample.tsx

@@ -5,9 +5,9 @@ import {observer} from 'mobx-react';
 import {useNavigation} from '@react-navigation/native';
 import {NavioScreen} from 'rn-navio';
 
-import {services, useServices} from '../services';
-import {useAppearance} from '../utils/hooks';
-import {NavioSection} from '../components/sections/NavioSection';
+import {services, useServices} from '@app/services';
+import {useAppearance} from '@app/utils/hooks';
+import {NavioSection} from '@app/components/sections/NavioSection';
 
 export type Props = {
   type?: 'push';

src/screens/main.tsx

@@ -8,14 +8,14 @@ import {observer} from 'mobx-react';
 import {useNavigation} from '@react-navigation/native';
 import {NavioScreen} from 'rn-navio';
 
-import {services, useServices} from '../services';
-import {useStores} from '../stores';
-import {Section} from '../components/section';
-import {BButton, HeaderButton} from '../components/button';
-import {Reanimated2} from '../components/reanimated2';
-import {Row} from '../components/row';
-import {useAppearance} from '../utils/hooks';
-import {NavioSection} from '../components/sections/NavioSection';
+import {services, useServices} from '@app/services';
+import {useStores} from '@app/stores';
+import {Section} from '@app/components/section';
+import {BButton, HeaderButton} from '@app/components/button';
+import {Reanimated2} from '@app/components/reanimated2';
+import {Row} from '@app/components/row';
+import {useAppearance} from '@app/utils/hooks';
+import {NavioSection} from '@app/components/sections/NavioSection';
 
 export const Main: NavioScreen = observer(({}) => {
   useAppearance();

src/screens/playground/detailed-screen.tsx

@@ -0,0 +1,50 @@
+import React, {useEffect} from 'react';
+import {ScrollView} from 'react-native';
+import {View} from 'react-native-ui-lib';
+import {observer} from 'mobx-react';
+import {useNavigation} 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 const Example: NavioScreen<Props> = observer(({type = 'push'}) => {
+  useAppearance(); // for Dark Mode
+  const navigation = useNavigation();
+  const {t, navio} = useServices();
+  // const {ui} = useStores();
+
+  // State
+
+  // Methods
+
+  // Start
+  useEffect(() => {
+    configureUI();
+  }, []);
+
+  // UI Methods
+  const configureUI = () => {
+    navigation.setOptions({});
+  };
+
+  // UI Methods
+
+  return (
+    <View flex bg-bgColor>
+      <ScrollView contentInsetAdjustmentBehavior="always">
+        <NavioSection />
+      </ScrollView>
+    </View>
+  );
+});
+
+Example.options = props => ({
+  headerBackTitleStyle: false,
+  title: `${services.t.do('example.title')} ${(props?.route?.params as Props)?.type ?? ''}`,
+});

src/screens/playground.tsx → src/screens/playground/index.tsx

@@ -1,12 +1,14 @@
 import React, {useMemo} from 'react';
-import {Image} from 'react-native';
-// import FastImage from 'react-native-fast-image';
+import {Image} from 'expo-image';
 import {Text, View} from 'react-native-ui-lib';
 import {FlashList} from '@shopify/flash-list';
 import {observer} from 'mobx-react';
 
-import {useAppearance} from '../utils/hooks';
-import {randomStr} from '../utils/help';
+import {useAppearance} from '@app/utils/hooks';
+import {randomStr} from '@app/utils/help';
+
+const blurhash =
+  '|rF?hV%2WCj[ayj[a|j[az_NaeWBj@ayfRayfQfQM{M|azj[azf6fQfQfQIpWXofj[ayj[j[fQayWCoeoeaya}j[ayfQa{oLj?j[WVj[ayayj[fQoff7azayj[ayj[j[ayofayayayj[fQj[ayayj[ayfjj[j[ayjuayj[';
 
 export const Playground: React.FC = observer(() => {
   useAppearance();
@@ -46,15 +48,13 @@ const ListItem = ({item}: any) => {
 
   return (
     <View padding-s2 bg-bgColor>
-      {/* <FastImage
-    style={{width: 120, height: 120, borderRadius: 20}}
-    source={{uri: item.image}}
-    resizeMode={FastImage.resizeMode.contain}
-    /> */}
       <Image
-        source={{uri: item.image}}
         style={{width: 120, height: 120, borderRadius: 20}}
+        source={item.image}
+        placeholder={blurhash}
+        contentFit="cover"
         resizeMode="contain"
+        transition={100}
       />
 
       <Text textColor text50R>

src/screens/settings.tsx

@@ -5,20 +5,20 @@ import {observer} from 'mobx-react';
 import {useNavigation} from '@react-navigation/native';
 import {NavioScreen} from 'rn-navio';
 
-import {Section} from '../components/section';
-import {Row} from '../components/row';
+import {Section} from '@app/components/section';
+import {Row} from '@app/components/row';
 import {
   appearances,
   appearancesUI,
   appearanceUIToInternal,
   languages,
   languagesUI,
   languageUIToInternal,
-} from '../utils/types/enums';
-import {useAppearance} from '../utils/hooks';
-import {useStores} from '../stores';
-import {HeaderButton} from '../components/button';
-import {services} from '../services';
+} from '@app/utils/types/enums';
+import {useAppearance} from '@app/utils/hooks';
+import {useStores} from '@app/stores';
+import {HeaderButton} from '@app/components/button';
+import {services} from '@app/services';
 
 export const Settings: NavioScreen = observer(({}) => {
   useAppearance();

src/services/api/counter.ts

@@ -1,6 +1,5 @@
-// import {stores} from '../../stores';
-
-import {CounterGetResponse} from '../../utils/types/api';
+// import {stores} from 'stores';
+import {CounterGetResponse} from '@app/utils/types/api';
 
 export class CounterApi {
   get = async (): Promise<CounterGetResponse> => {

src/services/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
+import {getNavio} from '@app/navio';
 import {OnStartService} from './onStart';
 import {TranslateService} from './translate';
 import {ApiService} from './api';
-import {getNavio} from '../navio';
 
 class Services {
   t = new TranslateService();

src/services/onStart.ts

@@ -1,6 +1,6 @@
 import * as Font from 'expo-font';
-import {IconComponent} from '../components/icon';
-import {stores} from '../stores';
+import {IconComponent} from '@app/components/icon';
+import {stores} from '@app/stores';
 
 export class OnStartService implements IService {
   private inited = false;

src/services/translate/index.ts

@@ -1,8 +1,8 @@
 import * as Localization from 'expo-localization';
 import {I18n, Scope, TranslateOptions} from 'i18n-js';
 
+import {stores} from '@app/stores';
 import * as translations from './translations';
-import {stores} from '../../stores';
 
 export class TranslateService implements IService {
   private inited = false;

src/stores/ui.ts

@@ -1,6 +1,6 @@
 import {makeAutoObservable} from 'mobx';
 import {hydrateStore, makePersistable} from 'mobx-persist-store';
-import {Appearance, appearanceToUI, Language, languageToUI} from '../utils/types/enums';
+import {Appearance, appearanceToUI, Language, languageToUI} from '@app/utils/types/enums';
 
 export class UIStore implements IStore {
   appLaunches = 0;