@ccrf01/react-native-template 0.0.16

package/template/src/screens/Splash/index.tsx

@@ -0,0 +1,53 @@
+import { Route, useNavigation } from '@react-navigation/native'
+import { StackNavigationProp } from '@react-navigation/stack'
+import React, { useCallback, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import useState from 'react-usestateref'
+
+import useTheme from '@/hooks/useTheme'
+import logger from '@/infrastructures/common/logger'
+import Timeout from '@/infrastructures/common/Timeout'
+import { RootScreenNavigationProp } from '@/navigators/props'
+import { AppRoutes } from '@/navigators/types'
+import { navigateAndSimpleReset } from '@/navigators/utils'
+import { setDefaultTheme } from '@/redux/reducers/themeSlice'
+import { useAppDispatch } from '@/redux/store'
+import { FontScale } from '@/theme/types'
+
+const SplashScreen = () => {
+  const navigation = useNavigation<RootScreenNavigationProp>()
+  const { t } = useTranslation()
+  const dispatch = useAppDispatch()
+  const [timeout, setTimeout] = useState(false)
+
+  useEffect(() => {
+    init()
+  }, [])
+
+  const init = () => {
+    dispatch(setDefaultTheme({
+      theme: 'default',
+      darkMode: null,
+      fontScale: FontScale.MEDIUM,
+    }))
+
+    const to = new Timeout({ ms: 3000 })
+    to.start().catch(() => {
+      setTimeout(true)
+    })
+  }
+
+  useEffect(() => {
+    // init whether completed
+    if (timeout) {
+      // Navigate to Main Drawer
+      navigateAndSimpleReset(AppRoutes.MainDrawerNav)
+    }
+  }, [timeout])
+
+  return (
+    <></>
+  )
+}
+
+export default SplashScreen

package/template/src/services/Dialogs.tsx

@@ -0,0 +1,226 @@
+import React from 'react'
+import { BackHandler, TextStyle, ViewStyle } from 'react-native'
+
+import { Text } from '@/components/basic'
+import DialogManager, { Dialog, DialogButton, DialogContent, DialogFooter, DialogTitle } from '@/components/basic/RootDialog'
+import logger from '@/infrastructures/common/logger'
+import i18n from '@/locales/i18n'
+
+/*
+interface IDialogAction {
+  label: string
+  onPress: () => void
+  buttonStyle?: ViewStyle
+  textStyle?: TextStyle
+  isCancel?: boolean
+}
+interface IDialogShowConfig {
+  title?: string
+  content: string | React.ReactElement
+  actions?: IDialogAction[]
+  clickBackdropDismiss?: boolean
+}
+interface IDialogConfirmConfig extends Omit<IDialogShowConfig, 'actions'> {
+  confirmText?: string
+  onConfirm?: () => void
+  onCancel?: () => void
+}
+interface IDialogInfoConfig extends Omit<IDialogShowConfig, 'actions'> {
+  confirmText?: string
+  onConfirm?: () => void
+}
+
+interface IDialogApiErrorConfig {
+  title?: string
+  message: string
+  onCancel?: () => void
+  allowRetry: boolean
+  onRetry?: () => unknown
+}
+
+export const confirm = ({
+  clickBackdropDismiss,
+  confirmText,
+  content,
+  onCancel,
+  onConfirm,
+  title,
+}: IDialogConfirmConfig) => {
+  const { t } = i18n
+  const e = BackHandler.addEventListener('hardwareBackPress', () => {
+    return true
+  })
+  show({
+    title,
+    content,
+    clickBackdropDismiss,
+    actions: [
+      {
+        label: t('general:button.cancel'),
+        onPress: () => {
+          DialogManager.dismiss()
+          onCancel?.()
+          e?.remove()
+        },
+        isCancel: true,
+      },
+      {
+        label: confirmText || t('general:button.confirm'),
+        onPress: () => {
+          DialogManager.dismiss()
+          onConfirm?.()
+          e?.remove()
+        },
+      },
+    ],
+  })
+}
+
+export const info = ({ clickBackdropDismiss, confirmText, content, onConfirm, title }: IDialogInfoConfig) => {
+  const { t } = i18n
+  const e = BackHandler.addEventListener('hardwareBackPress', () => {
+    return true
+  })
+  show({
+    title,
+    content,
+    clickBackdropDismiss,
+    actions: [
+      {
+        label: confirmText || t('general:button.confirm'),
+        onPress: () => {
+          logger.log('info dialog pressed confirm')
+          DialogManager.dismiss()
+          onConfirm?.()
+          e?.remove()
+        },
+      },
+    ],
+  })
+}
+
+export const apiError = ({ allowRetry, message, onCancel, onRetry, title }: IDialogApiErrorConfig) => {
+  const { t } = i18n
+  const e = BackHandler.addEventListener('hardwareBackPress', () => {
+    return true
+  })
+  const actions: IDialogAction[] = [
+    {
+      label: t('general:button.cancel'),
+      onPress: () => {
+        DialogManager.dismiss()
+        onCancel?.()
+        e?.remove()
+      },
+      isCancel: true,
+    },
+  ]
+  if (allowRetry) {
+    actions.push({
+      label: t('general:button.retry'),
+      onPress: () => {
+        DialogManager.dismiss()
+        onRetry?.()
+        e?.remove()
+      },
+    })
+  }
+  show({
+    title: title,
+    content: message,
+    clickBackdropDismiss: false,
+    actions,
+  })
+}
+
+export const show = ({ actions, clickBackdropDismiss, content, title }: IDialogShowConfig, callback: () => void = () => { }) => {
+  const titleElement = title !== undefined ?
+    <DialogTitle
+      title={title}
+    /> :
+    undefined
+
+  const contentElement = typeof content === 'string' ? (
+    <Text>
+      {content}
+    </Text>
+  ) : content
+
+  const onClickBackdrop = () => {
+    if (clickBackdropDismiss) {
+      DialogManager.dismiss()
+    }
+  }
+
+  let footerElement
+  if (actions !== undefined && actions.length > 0) {
+    footerElement = (
+      <DialogFooter
+        style={{
+          padding: 10,
+          justifyContent: 'flex-end',
+        }}
+      >
+        {actions.map(({ buttonStyle= {}, isCancel, label, onPress, textStyle }, index) => {
+          const _buttonStyle = Object.assign(buttonStyle, index > 0 ? { marginLeft: 10 } : {})
+
+          return (
+            <DialogButton
+              key={`button${index}`}
+              isCancel={isCancel}
+              text={label}
+              onPress={() => {
+                onPress()
+              }}
+              type={'round'}
+              textStyle={textStyle}
+              style={_buttonStyle}
+            />
+          )
+        })}
+      </DialogFooter>
+    )
+  }
+
+  DialogManager.show({
+    width: 0.8,
+    visible: true,
+    modalTitle: titleElement,
+    children: (
+      <DialogContent>
+        {contentElement}
+      </DialogContent>
+    ),
+    footer: footerElement,
+    onTouchOutside: onClickBackdrop,
+  }, () => {
+    // callback on show
+    if (callback) callback()
+  })
+}
+
+export const dismiss = (callback: () => void|Promise<void> = () => { }) => {
+  DialogManager.dismiss(() => {
+    // dismiss callback
+    void callback()
+  })
+}
+
+export const dismissAll = (callback: () => void |Promise<void>= () => { }) => {
+  DialogManager.dismissAll(() => {
+    // dismiss callback
+    void callback()
+  })
+}
+
+const Dialogs = {
+  confirm,
+  info,
+  show,
+  dismiss,
+  dismissAll,
+  apiError,
+}
+*/
+
+export default Dialog

package/template/src/services/PermissionCheck.ts

@@ -0,0 +1,257 @@
+import React from 'react'
+import { Platform, Text } from 'react-native'
+import {
+  check,
+  Permission,
+  PERMISSIONS,
+  PermissionStatus,
+  request,
+  RESULTS,
+} from 'react-native-permissions'
+
+import logger from '@/infrastructures/common/logger'
+import i18n from '@/locales/i18n'
+import Dialogs from '@/services/Dialogs'
+
+export type PermissionResult = PermissionStatus
+
+const LocationPermission = Platform.OS === 'ios' ?
+  PERMISSIONS.IOS.LOCATION_WHEN_IN_USE :
+  PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION
+const CameraPermission = Platform.OS === 'ios' ?
+  PERMISSIONS.IOS.CAMERA :
+  PERMISSIONS.ANDROID.CAMERA
+const PhotoPermission = Platform.OS === 'ios' ?
+  PERMISSIONS.IOS.PHOTO_LIBRARY :
+  Platform.OS === 'android' && Platform.Version >= 33 ?
+    PERMISSIONS.ANDROID.READ_MEDIA_IMAGES : PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE
+
+export interface IPermissionCheckCallbacks {
+  onBlockedPermissionSetting: () => void|Promise<void>
+  onAllowPermissionRequest: (result: PermissionResult) => void|Promise<void>
+  onCancelPermissionRequest: () => void|Promise<void>
+  onUnavailablePermissionSetting: () => void|Promise<void>
+}
+
+export type PermissionType = 'location'|'camera'|'photo'|'push_notification'
+
+
+class PermissionCheck {
+
+  private static _getPermissionName = (type: PermissionType) => {
+    switch (type) {
+      case 'location':
+        return LocationPermission
+      case 'camera':
+        return CameraPermission
+      case 'photo':
+        return PhotoPermission
+    }
+  }
+  static checkPermission = async (type: PermissionType, explain: boolean, callbacks: IPermissionCheckCallbacks) => {
+    return new Promise<PermissionStatus>((resolve) => {
+      const permissions = this._getPermissionName(type)
+      if (permissions === undefined) {
+        void callbacks.onUnavailablePermissionSetting()
+
+        return
+      }
+      void check(permissions).then((result) => {
+        logger.log(`checkForPermission ${type} - ${permissions}`, result)
+        switch (result) {
+          case RESULTS.LIMITED:
+            void callbacks.onAllowPermissionRequest(result)
+            break
+          case RESULTS.GRANTED:
+            void callbacks.onAllowPermissionRequest(result)
+            break
+          case RESULTS.UNAVAILABLE:
+            this._explainToUnavailablePermissionRequest(type, result, callbacks)
+            break
+          case RESULTS.BLOCKED:
+            if (explain) this._explainToBlockedPermissionRequest(type, result, callbacks)
+            break
+          case RESULTS.DENIED:
+            if (explain) {
+              this._explainToShowPermissionRequest(type, callbacks)
+            } else {
+              void this._requestPermissionCb(type, callbacks)
+            }
+            break
+        }
+      })
+    })
+  }
+
+  private static _explainToUnavailablePermissionRequest = (type: PermissionType, result: PermissionStatus, callbacks: IPermissionCheckCallbacks) => {
+    Dialogs.confirm({
+      clickBackdropDismiss: false,
+      title: `${i18n.t('permission:'+type.toString()+'.permission_request_title_'+Platform.OS)}`,
+      content: `${i18n.t('permission:'+type.toString()+'.permission_blocked_'+Platform.OS)}`,
+      confirmText: `${i18n.t('permission:permission_setting')}`,
+      onCancel: () => {
+        void callbacks.onCancelPermissionRequest()
+      },
+      onConfirm: () => {
+        void callbacks.onUnavailablePermissionSetting()
+      },
+    })
+  }
+
+  private static _explainToBlockedPermissionRequest = (type: PermissionType, result: PermissionStatus, callbacks: IPermissionCheckCallbacks) => {
+    Dialogs.confirm({
+      clickBackdropDismiss: false,
+      title: `${i18n.t('permission:'+type.toString()+'.permission_request_title_'+Platform.OS)}`,
+      content: `${i18n.t('permission:'+type.toString()+'.permission_blocked_'+Platform.OS)}`,
+      confirmText: `${i18n.t('permission:permission_setting')}`,
+      onCancel: () => {
+        logger.log('explainToBlockedPermissionRequest onCancel')
+        void callbacks.onCancelPermissionRequest()
+      },
+      onConfirm: () => {
+        logger.log('explainToBlockedPermissionRequest onConfirm')
+        void callbacks.onBlockedPermissionSetting()
+      },
+    })
+  }
+
+  private static _explainToShowPermissionRequest = (type: PermissionType, callbacks: IPermissionCheckCallbacks) => {
+    logger.log('explainToShowPermissionRequest')
+    Dialogs.confirm({
+      clickBackdropDismiss: false,
+      title: `${i18n.t('permission:'+type.toString()+'.permission_request_title_'+Platform.OS)}`,
+      content: `${i18n.t('permission:'+type.toString()+'.permission_request_message_'+Platform.OS)}`,
+      onCancel: () => {
+        logger.log('explainToShowPermissionRequest onCancel')
+        void callbacks.onCancelPermissionRequest()
+      },
+      onConfirm: () => {
+        logger.log('explainToShowPermissionRequest onConfirm')
+        void this._requestPermissionCb(type, callbacks)
+      },
+    })
+  }
+
+  private static _requestPermissionCb = async (type: PermissionType, callbacks: IPermissionCheckCallbacks) => {
+    const result = await this._requestPermission(type)
+    void callbacks.onAllowPermissionRequest(result)
+  }
+
+  private static _requestPermission = async (type: PermissionType) => {
+    const permission = this._getPermissionName(type)
+    if (permission === undefined) {
+
+      return RESULTS.UNAVAILABLE
+    }
+    const result = await request(permission, {
+      title: i18n.t('permission:'+type.toString()+'.permission_request_title_'+Platform.OS),
+      message: i18n.t('permission:'+type.toString()+'.permission_request_message_'+Platform.OS),
+      buttonPositive: i18n.t('general:button.confirm'),
+      buttonNegative: `${i18n.t('general:button.cancel')}`,
+    })
+
+    logger.log(`requestPermission ${type} result ${result}`)
+
+    return result
+  }
+
+
+  /*
+  static checkLocationPermission = async (explain: boolean, callbacks: IPermissionCheckCallbacks) => {
+    return new Promise<PermissionStatus>((resolve) => {
+
+      void check(LocationPermission).then((result) => {
+        logger.log(`checkForLocationPermission ${result}`, explain)
+        switch (result) {
+          case RESULTS.GRANTED:
+            break
+          case RESULTS.UNAVAILABLE:
+            // user disable feature
+            this.explainToUnavailableLocationPermissionRequest(result, callbacks)
+            break
+          case RESULTS.BLOCKED:
+            // ask user to enable on setting
+            if (explain) this.explainToBlockedLocationPermissionRequest(result, callbacks)
+            break
+          case RESULTS.DENIED:
+            // request for permission
+            // result = await requestPermission(permissionToRequest);
+            if (explain) {
+              this.explainToShowLocationPermissionRequest(callbacks)
+            } else {
+              void this.requestLocationPermissionCb(callbacks)
+            }
+            break
+        }
+        resolve(result)
+      })
+    })
+  }
+
+  static explainToUnavailableLocationPermissionRequest = (result: PermissionStatus, callbacks: IPermissionCheckCallbacks) => {
+    logger.log('explainToUnavailableLocationPermissionRequest result', result)
+    Dialogs.confirm({
+      clickBackdropDismiss: false,
+      title: `${i18n.t('permission:location_permission_request_title_'+Platform.OS)}`,
+      content: `${i18n.t('permission:location_permission_blocked_'+Platform.OS)}`,
+      confirmText: `${i18n.t('permission:permission_setting')}`,
+      onCancel: () => {
+        void callbacks.onUnavailablePermissionSetting()
+      },
+      onConfirm: () => {
+        void callbacks.onCancelPermissionRequest()
+      },
+    })
+  }
+
+  static explainToBlockedLocationPermissionRequest = (result: PermissionStatus, callbacks: IPermissionCheckCallbacks) => {
+    logger.log('explainToBlockedLocationPermissionRequest result', result)
+    Dialogs.confirm({
+      clickBackdropDismiss: false,
+      title: `${i18n.t('permission:location_permission_request_title_'+Platform.OS)}`,
+      content: `${i18n.t('permission:location_permission_blocked_'+Platform.OS)}`,
+      confirmText: `${i18n.t('permission:permission_setting')}`,
+      onCancel: () => {
+        void callbacks.onBlockedPermissionSetting()
+      },
+      onConfirm: () => {
+        void callbacks.onCancelPermissionRequest()
+      },
+    })
+  }
+
+  static explainToShowLocationPermissionRequest = (callbacks: IPermissionCheckCallbacks) => {
+    Dialogs.confirm({
+      clickBackdropDismiss: false,
+      title: `${i18n.t('permission:location_permission_request_title_'+Platform.OS)}`,
+      content: `${i18n.t('permission:location_permission_request_message_'+Platform.OS)}`,
+      onCancel: () => {
+        void callbacks.onCancelPermissionRequest()
+      },
+      onConfirm: () => {
+        void this.requestLocationPermissionCb(callbacks)
+      },
+    })
+  }
+
+  static requestLocationPermissionCb = async (callbacks: IPermissionCheckCallbacks) => {
+    const result = await this.requestLocationPermission()
+    void callbacks.onAllowPermissionRequest(result)
+  }
+
+  static requestLocationPermission = async () => {
+    const result = await request(LocationPermission, {
+      title: i18n.t('permission:location_permission_request_title_'+Platform.OS),
+      message: i18n.t('permission:location_permission_request_message_'+Platform.OS),
+      buttonPositive: i18n.t('general:button.confirm'),
+      buttonNegative: `${i18n.t('general:button.cancel')}`,
+    })
+
+    logger.log(`requestPermission result ${result}`)
+
+    return result
+   }
+   */
+}
+
+export default PermissionCheck

package/template/src/theme/Common.ts

@@ -0,0 +1,48 @@
+/**
+ * This file defines the base application styles.
+ *
+ * Use it to define generic component styles (e.g. the default text styles, default button styles...).
+ */
+import { StyleSheet } from 'react-native'
+
+import { IThemeCommonParams, StyleType, ThemeCommon } from '@/theme/types'
+import { normalize } from '@/utils'
+
+import buttonStyles from './components/Buttons'
+/**
+ *
+ * @param Theme can be spread like {Colors, Gutters, Layout, Common, ...args}
+ * @return {*}
+ */
+export default  ({
+  Colors: colors,
+  Fonts: fonts,
+  ...args
+}: IThemeCommonParams): ThemeCommon => {
+
+  return {
+    button: buttonStyles({
+      Colors: colors,
+      Fonts: fonts,
+      ...args,
+    }),
+    ...StyleSheet.create({
+      backgroundPrimary: { backgroundColor: colors.primary },
+      backgroundReset: { backgroundColor: colors.transparent },
+      textInput: {
+        // borderWidth: 1,
+        // borderColor: colors.primary,
+        // backgroundColor: colors.inputBackground,
+        // borderRadius: 4,
+        // color: colors.text,
+        // minHeight: 34,
+        // textAlign: 'left',
+        // padding: 8,
+        // marginTop: 10,
+        // marginBottom: 10,
+        height: normalize(44),
+        fontSize: fonts.textInputMedium.fontSize,
+      },
+    }),
+  }
+}