chore(main): release 7.1.0 (#1303)

* feat: added tamagui configuration with custom theme, updated entire app UI, added modal example

* chore: version release

* chore: some depepndencies, updated image

Author: IronTony

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit ${1}

babel.config.js

@@ -4,21 +4,13 @@ module.exports = {
     [
       'module-resolver',
       {
-        extensions: [
-          '.js',
-          '.jsx',
-          '.ts',
-          '.tsx',
-          '.android.js',
-          '.android.tsx',
-          '.ios.js',
-          '.ios.tsx',
-        ],
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.android.js', '.android.tsx', '.ios.js', '.ios.tsx'],
         root: ['.'],
         alias: {
           '@api': './src/api',
           '@assets': './src/assets',
           '@components': './src/components',
+          '@constants': './src/constants',
           '@hooks': './src/hooks',
           '@i18n': './src/i18n',
           '@mmkv': './src/mmkv',

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

ios/Podfile.lock

@@ -74,9 +74,9 @@ PODS:
     - hermes-engine/Pre-built (= 0.72.6)
   - hermes-engine/Pre-built (0.72.6)
   - libevent (2.1.12)
-  - MMKV (1.3.1):
-    - MMKVCore (~> 1.3.1)
-  - MMKVCore (1.3.1)
+  - MMKV (1.3.2):
+    - MMKVCore (~> 1.3.2)
+  - MMKVCore (1.3.2)
   - OpenSSL-Universal (1.1.1100)
   - RCT-Folly (2021.07.22.00):
     - boost
@@ -378,7 +378,7 @@ PODS:
   - React-jsinspector (0.72.6)
   - React-logger (0.72.6):
     - glog
-  - react-native-mmkv (2.10.2):
+  - react-native-mmkv (2.11.0):
     - MMKV (>= 1.2.13)
     - React-Core
   - react-native-safe-area-context (4.7.4):
@@ -497,14 +497,15 @@ PODS:
     - React-perflogger (= 0.72.6)
   - RNBootSplash (4.7.5):
     - React-Core
-  - RNLocalize (3.0.2):
+  - RNLocalize (3.0.3):
     - React-Core
   - RNScreens (3.27.0):
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
   - RNSVG (13.14.0):
     - React-Core
-  - RNVectorIcons (10.0.0):
+  - RNVectorIcons (10.0.2):
+    - RCT-Folly (= 2021.07.22.00)
     - React-Core
   - SocketRocket (0.6.1)
   - Yoga (1.14.0)
@@ -718,8 +719,8 @@ SPEC CHECKSUMS:
   glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   hermes-engine: 8057e75cfc1437b178ac86c8654b24e7fead7f60
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
-  MMKV: 5a07930c70c70b86cd87761a42c8f3836fb681d7
-  MMKVCore: e50135dbd33235b6ab390635991bab437ab873c0
+  MMKV: f21593c0af4b3f2a0ceb8f820f28bb639ea22bb7
+  MMKVCore: 31b4cb83f8266467eef20a35b6d78e409a11060d
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
   RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
   RCTRequired: 28469809442eb4eb5528462705f7d852948c8a74
@@ -736,7 +737,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 3bf18ff7cb03cd8dfdce08fbbc0d15058c1d71ae
   React-jsinspector: 194e32c6aab382d88713ad3dd0025c5f5c4ee072
   React-logger: cebf22b6cf43434e471dc561e5911b40ac01d289
-  react-native-mmkv: 9ae7ca3977e8ef48dbf7f066974eb844c20b5fd7
+  react-native-mmkv: e97c0c79403fb94577e5d902ab1ebd42b0715b43
   react-native-safe-area-context: 2cd91d532de12acdb0a9cbc8d43ac72a8e4c897c
   react-native-version-number: b415bbec6a13f2df62bf978e85bc0d699462f37f
   React-NativeModulesApple: 02e35e9a51e10c6422f04f5e4076a7c02243fff2
@@ -757,10 +758,10 @@ SPEC CHECKSUMS:
   React-utils: fa59c9a3375fb6f4aeb66714fd3f7f76b43a9f16
   ReactCommon: dd03c17275c200496f346af93a7b94c53f3093a4
   RNBootSplash: 85f6b879c080e958afdb4c62ee04497b05fd7552
-  RNLocalize: dbea38dcb344bf80ff18a1757b1becf11f70cae4
+  RNLocalize: 7ce27517894956a226aa6d614786802d253a0a0a
   RNScreens: 3c2d122f5e08c192e254c510b212306da97d2581
   RNSVG: d00c8f91c3cbf6d476451313a18f04d220d4f396
-  RNVectorIcons: 8b5bb0fa61d54cd2020af4f24a51841ce365c7e9
+  RNVectorIcons: 23b6e11af4aaf104d169b1b0afa7e5cf96c676ce
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: b76f1acfda8212aa16b7e26bcce3983230c82603
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

ios/ReactNativeStarterApp/Info.plist

@@ -36,7 +36,7 @@
 		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string/>
+	<string></string>
 	<key>UILaunchStoryboardName</key>
 	<string>BootSplash.storyboard</string>
 	<key>UIRequiredDeviceCapabilities</key>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-starter-app",
-  "version": "7.0.1",
+  "version": "7.1.0",
   "private": true,
   "scripts": {
     "test": "jest",
@@ -40,36 +40,41 @@
   },
   "dependencies": {
     "@react-navigation/native": "^6.1.9",
-    "@react-navigation/native-stack": "^6.9.15",
+    "@react-navigation/native-stack": "^6.9.17",
     "@reduxjs/toolkit": "1.9.7",
+    "@tamagui/shorthands": "^1.78.0",
+    "@tamagui/themes": "^1.78.0",
     "axios": "^0.27.2",
     "i18next": "^22.5.0",
     "lodash": "^4.17.21",
-    "native-base": "3.4.28",
     "react": "18.2.0",
     "react-i18next": "^12.3.1",
     "react-native": "0.72.6",
     "react-native-bootsplash": "^4.7.1",
     "react-native-indicators": "^0.17.0",
-    "react-native-localize": "^3.0.0",
-    "react-native-mmkv": "^2.8.0",
-    "react-native-safe-area-context": "^4.5.3",
-    "react-native-screens": "^3.20.0",
+    "react-native-localize": "^3.0.3",
+    "react-native-mmkv": "^2.11.0",
+    "react-native-safe-area-context": "^4.7.4",
+    "react-native-screens": "^3.27.0",
     "react-native-svg": "^13.14.0",
-    "react-native-vector-icons": "^10.0.0",
+    "react-native-toast-message": "^2.1.7",
+    "react-native-vector-icons": "^10.0.2",
     "react-native-version-number": "^0.3.6",
     "react-redux": "8.1.3",
     "redux-persist": "^6.0.0",
-    "redux-saga": "1.2.3"
+    "redux-saga": "1.2.3",
+    "tamagui": "^1.78.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
     "@forward-software/react-native-toolbox": "^3.0.0",
     "@react-native/eslint-config": "^0.72.2",
     "@react-native/metro-config": "^0.72.11",
-    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@tsconfig/react-native": "^3.0.0",
     "@types/lodash": "^4.14.200",
     "@types/metro-config": "^0.76.3",

react-native-starter-kit.png

@@ -1,41 +1,35 @@
-import CToaster from '@components/CToaster';
+import { DARK_THEME, LIGHT_THEME } from '@constants/theme';
 import { messageHandlerReset } from '@redux/messageHandler/actions';
 import { messageHandlerFullInfo } from '@redux/messageHandler/selectors';
 import RootStackScreen from '@routes';
-import { useToast } from 'native-base';
-import React, { useCallback, useEffect, useRef } from 'react';
-import { StatusBar } from 'react-native';
+import React, { useEffect } from 'react';
+import { StatusBar, useColorScheme } from 'react-native';
+import Toast from 'react-native-toast-message';
 import { useDispatch, useSelector } from 'react-redux';
 
 function App() {
+  const colorScheme = useColorScheme() ?? LIGHT_THEME;
+  const isDarkMode = colorScheme === DARK_THEME;
   const dispatch = useDispatch();
-  const toast = useToast();
-  const toastIdRef = useRef(null);
   const hasGeneralMessage = useSelector(messageHandlerFullInfo);
 
-  const onCloseToast = useCallback(() => {
-    if (toastIdRef.current) {
-      toast.close(toastIdRef.current);
-    }
-  }, [toast]);
-
   useEffect(() => {
     if (hasGeneralMessage?.message) {
-      toastIdRef.current = toast.show({
-        render: () => (
-          <CToaster status={hasGeneralMessage?.status} title={hasGeneralMessage?.message} onClose={onCloseToast} />
-        ),
-        placement: 'top',
-        onCloseComplete: () => dispatch(messageHandlerReset()),
-        duration: 3000,
+      Toast.show({
+        position: 'top',
+        onHide: () => dispatch(messageHandlerReset()),
+        visibilityTime: 3000,
+        topOffset: 60,
+        type: hasGeneralMessage?.status,
+        text1: hasGeneralMessage?.message,
+        // text2: description.....
       });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hasGeneralMessage, dispatch]);
 
   return (
     <>
-      <StatusBar barStyle="dark-content" />
+      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
 
       <RootStackScreen />
     </>

src/App.tsx

@@ -1,18 +1,24 @@
+import { DARK_THEME, LIGHT_THEME } from '@constants/theme';
+import toastConfig from '@constants/toast';
 import '@i18n';
-import { NavigationContainer } from '@react-navigation/native';
+import { DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
 import { persistor, store } from '@redux/store';
 import { navigationRef } from '@routes/utils';
-import customTheme from '@theme';
-import { NativeBaseProvider } from 'native-base';
+import appConfig from '@theme';
 import React, { ReactElement, Suspense, useCallback, useEffect } from 'react';
-import { Text } from 'react-native';
+import { Text, useColorScheme } from 'react-native';
 import RNBootSplash from 'react-native-bootsplash';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
+import Toast from 'react-native-toast-message';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import App from 'src/App';
+import { TamaguiProvider } from 'tamagui';
 
 function ContainerApp(): ReactElement {
+  const colorScheme = useColorScheme() ?? LIGHT_THEME;
+  const isDarkMode = colorScheme === DARK_THEME;
+
   const hideBootSplash = useCallback(async () => {
     await RNBootSplash.hide({ fade: true });
   }, []);
@@ -25,12 +31,14 @@ function ContainerApp(): ReactElement {
     <Suspense fallback="Loading...">
       <Provider store={store}>
         <PersistGate loading={<Text>Loading...</Text>} persistor={persistor}>
-          <SafeAreaProvider>
-            <NavigationContainer ref={navigationRef}>
-              <NativeBaseProvider theme={customTheme}>
+          <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+            <TamaguiProvider config={appConfig} defaultTheme={colorScheme}>
+              <NavigationContainer ref={navigationRef} theme={isDarkMode ? DarkTheme : DefaultTheme}>
                 <App />
-              </NativeBaseProvider>
-            </NavigationContainer>
+              </NavigationContainer>
+
+              <Toast config={toastConfig} />
+            </TamaguiProvider>
           </SafeAreaProvider>
         </PersistGate>
       </Provider>

src/ContainerApp.tsx

@@ -1,19 +1,19 @@
 import env from '@env';
-import { Flex, Text } from 'native-base';
 import React, { FC } from 'react';
 import VersionNumber from 'react-native-version-number';
+import { Text, YStack } from 'tamagui';
 
 const EnvInfoView: FC = () => {
   return (
-    <Flex marginTop={5}>
+    <YStack marginTop={5}>
       {/* This is just to show you how to get values from the generated ENV file */}
-      <Text fontSize="2xs" textAlign="center" paddingY="5px" color="ASBESTOS">{`ENV: ${env.ENV}`}</Text>
+      <Text fontSize="$3" textAlign="center" paddingVertical={5} color="$absestos">{`ENV: ${env.ENV}`}</Text>
 
       <Text
-        fontSize="2xs"
+        fontSize="$3"
         textAlign="center"
-        color="ASBESTOS">{`v.${VersionNumber.appVersion}-${VersionNumber.buildVersion}`}</Text>
-    </Flex>
+        color="$absestos">{`v.${VersionNumber.appVersion}-${VersionNumber.buildVersion}`}</Text>
+    </YStack>
   );
 };