fix: row component and toast - remove wrong MainStack

template/.gitignore → template/_gitignore

@@ -1,7 +1,6 @@
 # OSX
 #
 .DS_Store
-*.pem
 
 # Xcode
 #
@@ -21,7 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
-**/.xcode.env.local
+ios/.xcode.env.local
 
 # Android/IntelliJ
 #
@@ -57,19 +56,8 @@ yarn-error.log
 *.jsbundle
 
 # Ruby / CocoaPods
-**/Pods/
+/ios/Pods/
 /vendor/bundle/
 
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
-
-# testing
-/coverage
-
-# Yarn
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions

template/generators/redux/saga.js.hbs

@@ -1,15 +1,15 @@
 import {AnyAction} from 'redux'
 import {takeLatest, call, put} from 'redux-saga/effects'
 import {appActions, {{camelCase name}}Actions} from '../reducers'
-import {Toast} from '../../components'
+import {showToast} from '../../components'
 
 function* {{camelCase name}}Saga(action: any): IterableIterator<AnyAction> {
   try {
     yield put(appActions.setShowGlobalIndicator(true))
     //  TODO:
   } catch (e) {
     if (e instanceof Error) {
-      Toast.error(e.message)
+      showToast({type: 'ERROR', message: e.message})
     }
   } finally {
     yield put(appActions.setShowGlobalIndicator(false))

template/metro.config.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config')
 
 /**

template/scripts/build-app.sh

@@ -19,7 +19,7 @@ function buildApp() {
 function main() {
 
   if [ -z $TYPE ]; then
-    read -p 'Enter your environment (dev,staging,production): ' env
+    read -p 'Enter your environment (development,staging,production): ' env
     TYPE=$env
   fi
 

template/scripts/code-push.sh

@@ -20,7 +20,7 @@ function codePush() {
 function main() {
 
   if [ -z $TYPE ]; then
-    read -p 'Enter your environment: ' env
+    read -p 'Enter your environment (development, staging, production): ' env
     TYPE=$env
   fi
 

template/src/MainLayout.tsx

@@ -37,7 +37,7 @@ function MainLayout() {
   }, [])
 
   useEffect(() => {
-    if (appState === RouteKey.MainStack) {
+    if (appState === RouteKey.HomeStack) {
       handleAppState()
       handleDeepLink()
     }

template/src/components/Row.tsx

@@ -1,8 +1,7 @@
-import React, {ReactElement} from 'react'
+import React, {PropsWithChildren} from 'react'
 import {View, StyleSheet, StyleProp, ViewStyle} from 'react-native'
 
-interface IRowProps {
-  children: ReactElement
+interface IRowProps extends PropsWithChildren {
   style?: StyleProp<ViewStyle>
 }
 

template/src/components/Toast.tsx

@@ -90,12 +90,11 @@ export const Toast: React.FC = () => {
 
   const dismiss = () => {
     animationRef.current?.stop()
-    setState(initState)
     Animated.timing(animation, {
       toValue: 0,
       duration: DEFAULT_DURATION,
       useNativeDriver: true,
-    }).start()
+    }).start(() => setState(initState))
   }
 
   useEffect(() => {

template/src/constants/configs.tsx

@@ -4,15 +4,15 @@ import packageJSON from '../../package.json'
 import {getBundleId} from 'react-native-device-info'
 
 const AppEnv = {
-  DEV: 'dev',
+  DEV: 'development',
   STAGING: 'staging',
   PRODUCTION: 'production',
 }
 
 const configs = {
   appBundleID: getBundleId(),
   appVersion: packageJSON.version,
-  APP_ENV: RNConfig.APP_ENV || 'dev',
+  APP_ENV: RNConfig.APP_ENV || 'development',
   DEBUG_ENABLED: RNConfig.APP_ENV !== AppEnv.PRODUCTION,
   API_URL: RNConfig.API_URL,
   buildEvn: RNConfig.APP_ENV,

template/src/navigation/NavigationService.tsx

@@ -19,7 +19,7 @@ export const getParent = (): NavigationProp<AppStackParamList> | null =>
 
 export const navigate = (
   name: keyof AppStackParamList,
-  params: AppStackParamList[keyof AppStackParamList],
+  params?: AppStackParamList[keyof AppStackParamList],
 ) => {
   if (navigationRef.isReady()) {
     navigationRef.navigate(name as string, params as object | undefined)

template/src/navigation/RouteKey.ts

@@ -7,7 +7,6 @@ export enum RouteKey {
 
   /** Stack */
   AuthStack = 'AuthStack',
-  MainStack = 'MainStack',
   HomeStack = 'HomeStack',
 
   /** Tab */

template/src/navigation/StackNavigation.tsx

@@ -1,7 +1,6 @@
 import {createNativeStackNavigator} from '@react-navigation/native-stack'
 import React from 'react'
-import {LoginScreen, SignUpScreen} from '../screens'
-import HomeScreen from '../screens/HomeComponent/HomeScreen'
+import {HomeScreen, LoginScreen, SignUpScreen} from '../screens'
 import RouteKey from './RouteKey'
 import {optionsMatch} from './ScreenService'
 import {AppStackParamList} from './types'

template/src/screens/AuthComponent/LoginScreen.tsx

@@ -1,9 +1,9 @@
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
-import React, {PropsWithChildren} from 'react'
+import React from 'react'
 import {ScreenContainer} from '../../components'
 import RouteKey from '../../navigation/RouteKey'
 import {AppStackParamList} from '../../navigation/types'
 
-type Props = NativeStackScreenProps<AppStackParamList, RouteKey.LoginScreen> & PropsWithChildren
+type Props = NativeStackScreenProps<AppStackParamList, RouteKey.LoginScreen>
 
-export const LoginScreen: React.FC<Props> = props => <ScreenContainer>{props.children}</ScreenContainer>
+export const LoginScreen: React.FC<Props> = () => <ScreenContainer />

template/src/screens/AuthComponent/SignUpScreen.tsx

@@ -1,9 +1,9 @@
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
-import React, {PropsWithChildren} from 'react'
+import React from 'react'
 import {ScreenContainer} from '../../components'
 import RouteKey from '../../navigation/RouteKey'
 import {AppStackParamList} from '../../navigation/types'
 
-type Props = NativeStackScreenProps<AppStackParamList, RouteKey.SignUpScreen> & PropsWithChildren
+type Props = NativeStackScreenProps<AppStackParamList, RouteKey.SignUpScreen>
 
-export const SignUpScreen: React.FC<Props> = props => <ScreenContainer>{props.children}</ScreenContainer>
+export const SignUpScreen: React.FC<Props> = () => <ScreenContainer />

template/src/screens/HomeComponent/HomeScreen.tsx

@@ -1,11 +1,9 @@
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
-import React, {PropsWithChildren} from 'react'
+import React from 'react'
 import {ScreenContainer} from '../../components'
 import RouteKey from '../../navigation/RouteKey'
 import {AppStackParamList} from '../../navigation/types'
 
-type Props = NativeStackScreenProps<AppStackParamList, RouteKey.HomeScreen> & PropsWithChildren
+type Props = NativeStackScreenProps<AppStackParamList, RouteKey.HomeScreen>
 
-const HomeScreen: React.FC<Props> = props => <ScreenContainer>{props.children}</ScreenContainer>
-
-export default HomeScreen
+export const HomeScreen: React.FC<Props> = () => <ScreenContainer />

template/src/screens/SplashScreen.tsx

@@ -1,21 +1,28 @@
 import React, {useEffect, useState} from 'react'
-import {StyleSheet, View} from 'react-native'
+import {StyleSheet, Text, View} from 'react-native'
 import CodePush from 'react-native-code-push'
-import Progress from 'react-native-progress'
+import * as Progress from 'react-native-progress'
 import {ScreenContainer} from '../components'
 import configs from '../constants/configs'
 import {appActions} from '../store/reducers/app'
-import {useAppDispatch} from '../store/store'
-import {colors, deviceWidth, responsiveHeight} from '../themes'
+import {useDispatch} from 'react-redux'
+import {colors, deviceWidth, metrics, responsiveHeight} from '../themes'
 
 const codePushOptions = {
   installMode: CodePush.InstallMode.IMMEDIATE,
   deploymentKey: configs.codePushKey,
 }
 
+const STATUS = {
+  check: 'Checking for update',
+  download: 'Downloading...',
+  done: 'Done',
+}
+
 const SplashScreen = () => {
-  const dispatch = useAppDispatch()
+  const dispatch = useDispatch()
   const [updatePercent, setUpdatePercent] = useState(0)
+  const [statusText, setStatusText] = useState('')
 
   useEffect(() => {
     CodePush.sync(
@@ -26,11 +33,22 @@ const SplashScreen = () => {
           case CodePush.SyncStatus.UNKNOWN_ERROR:
             dispatch(appActions.getSettings())
             break
+          case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
+          case CodePush.SyncStatus.INSTALLING_UPDATE:
+          case CodePush.SyncStatus.SYNC_IN_PROGRESS:
+            setStatusText(STATUS.download)
+            break
+          default:
+            setStatusText(STATUS.check)
         }
       },
       ({receivedBytes, totalBytes}) => {
+        const percent = receivedBytes / totalBytes
         if (totalBytes > 0) {
-          setUpdatePercent(receivedBytes / totalBytes)
+          setUpdatePercent(percent)
+        }
+        if (percent === 1) {
+          setStatusText(STATUS.done)
         }
       },
     ).catch(() => {
@@ -43,6 +61,7 @@ const SplashScreen = () => {
       {updatePercent > 0 ? (
         <View style={styles.progressBar}>
           <Progress.Bar progress={updatePercent} color={colors.primary} width={deviceWidth() * 0.6} />
+          <Text style={styles.progressText}>{statusText}</Text>
         </View>
       ) : null}
     </ScreenContainer>
@@ -58,6 +77,11 @@ const styles = StyleSheet.create({
     position: 'absolute',
     bottom: responsiveHeight(40),
     alignSelf: 'center',
+    alignItems: 'center',
+  },
+  progressText: {
+    color: colors.primary,
+    paddingTop: metrics.xxs,
   },
 })
 

template/src/store/saga/user.ts

@@ -1,6 +1,6 @@
 import {AnyAction} from 'redux'
 import {delay, put, takeLatest} from 'redux-saga/effects'
-import {Toast} from '../../components'
+import {showToast} from '../../components'
 import RouteKey from '../../navigation/RouteKey'
 import {appActions, userActions} from '../reducers'
 
@@ -9,10 +9,10 @@ function* userLoginSaga(): IterableIterator<AnyAction> {
     yield put(appActions.setShowGlobalIndicator(true))
     // TODO: login login
     yield delay(1000)
-    yield put(appActions.setAppStack(RouteKey.MainStack))
+    yield put(appActions.setAppStack(RouteKey.HomeStack))
   } catch (e) {
     if (e instanceof Error) {
-      Toast.error(e.message)
+      showToast({type: 'ERROR', message: e.message})
     }
     yield put(appActions.setAppStack(RouteKey.AuthStack))
   } finally {
@@ -25,7 +25,7 @@ function* userSignUpSaga(): IterableIterator<AnyAction> {
     yield put(appActions.setShowGlobalIndicator(true))
   } catch (e) {
     if (e instanceof Error) {
-      Toast.error(e.message)
+      showToast({type: 'ERROR', message: e.message})
     }
   } finally {
     yield put(appActions.setShowGlobalIndicator(false))

template/src/store/store.ts

@@ -1,5 +1,5 @@
-import {applyMiddleware, configureStore, Reducer} from '@reduxjs/toolkit'
-import {useDispatch, useSelector as useReduxSelector} from 'react-redux'
+import {applyMiddleware, configureStore} from '@reduxjs/toolkit'
+import {useSelector as useReduxSelector} from 'react-redux'
 import type {TypedUseSelectorHook} from 'react-redux'
 import {persistReducer, persistStore} from 'redux-persist'
 import reducers, {persistConfig} from './reducers'
@@ -15,9 +15,7 @@ const persistedReducer = persistReducer(persistConfig, reducers)
 const store = configureStore({
   reducer: persistedReducer,
   middleware: getDefaultMiddleware => getDefaultMiddleware({serializableCheck: false, thunk: false}),
-  enhancers: (getDefaultEnhancers) => {
-    return getDefaultEnhancers().concat(middlewareEnhancer)
-  },
+  enhancers: getDefaultEnhancers => getDefaultEnhancers().concat(middlewareEnhancer),
 })
 
 sagaMiddleware.run(rootSaga)
@@ -27,7 +25,6 @@ const persistor = persistStore(store)
 export type AppDispatch = typeof store.dispatch
 export type AppState = typeof store.getState
 export type RootState = ReturnType<AppState>
-export const useAppDispatch: () => AppDispatch = useDispatch
 
 export const useSelector: TypedUseSelectorHook<RootState> = useReduxSelector
 export {store, persistor}

template/src/utilities/Emitter.ts

@@ -7,7 +7,7 @@ class EventRegister {
     refs: {key: {eventName: '', callback: () => {}}},
   }
 
-  static addEventListener(eventName: string, callback: (param: any) => void): string {
+  static addEventListener(eventName: string, callback: (param?: any) => void): string {
     EventRegister._Listeners.count += 1
     const eventId = `l${EventRegister._Listeners.count}`
     EventRegister._Listeners.refs[eventId] = {
@@ -30,7 +30,7 @@ class EventRegister {
     return !removeError
   }
 
-  static emitEvent(eventName: string, param: any): void {
+  static emitEvent(eventName: string, param?: any): void {
     Object.keys(EventRegister._Listeners.refs).forEach(_id => {
       if (EventRegister._Listeners.refs[_id] && eventName === EventRegister._Listeners.refs[_id].eventName) {
         EventRegister._Listeners.refs[_id].callback(param)
@@ -41,7 +41,7 @@ class EventRegister {
   /*
    * Shorten
    */
-  static on(eventName: string, callback: (param: any) => void): string {
+  static on(eventName: string, callback: (param?: any) => void): string {
     return EventRegister.addEventListener(eventName, callback)
   }
 
@@ -53,7 +53,7 @@ class EventRegister {
     return EventRegister.removeAllListeners()
   }
 
-  static emit(eventName: string, param: any): void {
+  static emit(eventName: string, param?: any): void {
     EventRegister.emitEvent(eventName, param)
   }
 }