@ccrf01/react-native-template 0.0.16

package/template/src/navigators/DrawerNav/DrawerItem.tsx

@@ -0,0 +1,261 @@
+import { PlatformPressable } from '@react-navigation/elements'
+import { Link, useTheme } from '@react-navigation/native'
+import * as React from 'react'
+import {
+  Platform,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native'
+import Color from 'tinycolor2'
+
+type Props = {
+  /**
+   * The label text of the item.
+   */
+  label:
+  | string
+  | ((props: { focused: boolean; color: string }) => React.ReactNode)
+  /**
+   * Icon to display for the `DrawerItem`.
+   */
+  icon?: (props: {
+    focused: boolean
+    size: number
+    color: string
+  }) => React.ReactNode
+  /**
+   * URL to use for the link to the tab.
+   */
+  to?: string
+  /**
+   * Whether to highlight the drawer item as active.
+   */
+  focused?: boolean
+  /**
+   * Function to execute on press.
+   */
+  onPress: () => void
+  /**
+   * Color for the icon and label when the item is active.
+   */
+  activeTintColor?: string
+  /**
+   * Color for the icon and label when the item is inactive.
+   */
+  inactiveTintColor?: string
+  /**
+   * Background color for item when its active.
+   */
+  activeBackgroundColor?: string
+  /**
+   * Background color for item when it's inactive.
+   */
+  inactiveBackgroundColor?: string
+  /**
+   * Color of the touchable effect on press.
+   * Only supported on Android.
+   *
+   * @platform android
+   */
+  pressColor?: string
+  /**
+   * Opacity of the touchable effect on press.
+   * Only supported on iOS.
+   *
+   * @platform ios
+   */
+  pressOpacity?: number
+  /**
+   * Style object for the label element.
+   */
+  labelStyle?: StyleProp<TextStyle>
+  /**
+   * Style object for the wrapper element.
+   */
+  style?: StyleProp<ViewStyle>
+  /**
+   * Whether label font should scale to respect Text Size accessibility settings.
+   */
+  allowFontScaling?: boolean
+
+  /**
+   * Accessibility label for drawer item.
+   */
+  accessibilityLabel?: string
+  /**
+   * ID to locate this drawer item in tests.
+   */
+  testID?: string
+  linkParams?: Record<string, any>
+}
+
+const LinkPressable = ({
+  accessibilityRole,
+  children,
+  linkParams,
+  onLongPress,
+  onPress,
+  onPressIn,
+  onPressOut,
+  style,
+  to,
+  ...rest
+}: Omit<React.ComponentProps<typeof PlatformPressable>, 'style' | 'pressRetentionOffset'> & {
+  style: StyleProp<ViewStyle>
+} & {
+  to?: string
+  children: React.ReactNode
+  onPress?: () => void
+  linkParams?: Record<string, any>
+}) => {
+  if (Platform.OS === 'web' && to) {
+    // React Native Web doesn't forward `onClick` if we use `TouchableWithoutFeedback`.
+    // We need to use `onClick` to be able to prevent default browser handling of links.
+    return (
+      <Link
+        {...rest}
+        screen={to}
+        params={linkParams ?? {}}
+        disabled={false}
+        style={[styles.button, style]}
+        onPress={(e: any) => {
+          if (
+            !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys
+            (e.button == null || e.button === 0) // ignore everything but left clicks
+          ) {
+            e.preventDefault()
+            onPress?.(e)
+          }
+        }}
+        // types for PressableProps and TextProps are incompatible with each other by `null` so we
+        // can't use {...rest} for these 3 props
+        onLongPress={onLongPress ?? undefined}
+        onPressIn={onPressIn ?? undefined}
+        onPressOut={onPressOut ?? undefined}
+      >
+        {children}
+      </Link>
+    )
+  } else {
+    return (
+      <PlatformPressable
+        {...rest}
+        accessibilityRole={accessibilityRole}
+        onPress={onPress}
+      >
+        <View style={style}>{children}</View>
+      </PlatformPressable>
+    )
+  }
+}
+
+/**
+ * A component used to show an action item with an icon and a label in a navigation drawer.
+ */
+const DrawerItem = (props: Props) => {
+  const { colors } = useTheme()
+
+  const {
+    icon,
+    label,
+    labelStyle,
+    to,
+    focused = false,
+    allowFontScaling,
+    activeTintColor = colors.primary,
+    inactiveTintColor = Color(colors.text).setAlpha(0.68)
+      .toPercentageRgbString(),
+    activeBackgroundColor = Color(activeTintColor).setAlpha(0.12)
+      .toPercentageRgbString(),
+    inactiveBackgroundColor = 'transparent',
+    style,
+    onPress,
+    pressColor,
+    pressOpacity,
+    testID,
+    accessibilityLabel,
+    ...rest
+  } = props
+
+  const { borderRadius = 4 } = StyleSheet.flatten(style || {})
+  const color = focused ? activeTintColor : inactiveTintColor
+  const backgroundColor = focused
+    ? activeBackgroundColor
+    : inactiveBackgroundColor
+
+  const iconNode = icon ? icon({ size: 24, focused, color }) : null
+
+  return (
+    <View
+      collapsable={false}
+      {...rest}
+      style={[styles.container, { borderRadius, backgroundColor }, style]}
+    >
+      <LinkPressable
+        testID={testID}
+        onPress={onPress}
+        style={[styles.wrapper, { borderRadius }]}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="button"
+        accessibilityState={{ selected: focused }}
+        pressColor={pressColor}
+        pressOpacity={pressOpacity}
+        to={to}
+      >
+        <React.Fragment>
+          {iconNode}
+          <View
+            style={[
+              styles.label,
+              { marginLeft: iconNode ? 12 : 0, marginVertical: 5 },
+            ]}
+          >
+            {typeof label === 'string' ? (
+              <Text
+                numberOfLines={1}
+                allowFontScaling={allowFontScaling}
+                style={[
+                  {
+                    color,
+                    fontWeight: '500',
+                  },
+                  labelStyle,
+                ]}
+              >
+                {label}
+              </Text>
+            ) : (
+              label({ color, focused })
+            )}
+          </View>
+        </React.Fragment>
+      </LinkPressable>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginHorizontal: 10,
+    marginVertical: 4,
+    overflow: 'hidden',
+  },
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+  },
+  label: {
+    marginRight: 24,
+    flex: 1,
+  },
+  button: {
+    display: 'flex',
+  },
+})
+
+export default DrawerItem

package/template/src/navigators/DrawerNav/index.tsx

@@ -0,0 +1,39 @@
+import { createDrawerNavigator } from '@react-navigation/drawer'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import useTheme from '@/hooks/useTheme'
+import DrawerContent from '@/navigators/DrawerNav/DrawerContent'
+import { MainDrawerNavigationParamList } from '@/navigators/DrawerNav/types'
+import MainBottomTabNav from '@/navigators/MainBottomTabNav'
+import { AppRoutes } from '@/navigators/types'
+
+const Drawer = createDrawerNavigator<MainDrawerNavigationParamList>()
+
+const DrawerNav = (): React.ReactElement => {
+  const { Colors } = useTheme()
+  const { t } = useTranslation()
+
+  return (
+    <Drawer.Navigator
+      drawerContent={(props) => <DrawerContent {...props} />}
+      screenOptions={{
+        headerShown: false,
+        drawerPosition: 'right',
+        drawerType: 'front',
+        drawerStyle: {
+          backgroundColor: Colors.background,
+          width: '80%',
+        },
+        swipeEnabled: true,
+      }}
+    >
+      <Drawer.Screen
+        name={AppRoutes.MainBottomTabNav}
+        component={MainBottomTabNav}
+      />
+    </Drawer.Navigator>
+  )
+}
+
+export default DrawerNav

package/template/src/navigators/DrawerNav/props.ts

@@ -0,0 +1,12 @@
+import { DrawerScreenProps } from '@react-navigation/drawer'
+import { CompositeScreenProps } from '@react-navigation/native'
+
+import { MainDrawerNavigationParamList } from '@/navigators/DrawerNav/types'
+import { RootScreenProps } from '@/navigators/props'
+import { AppRoutes } from '@/navigators/types'
+
+export type MainBottomTabNavScreenProps = CompositeScreenProps<
+  DrawerScreenProps<MainDrawerNavigationParamList, AppRoutes.MainBottomTabNav>,
+  RootScreenProps
+>
+

package/template/src/navigators/DrawerNav/types.ts

@@ -0,0 +1,8 @@
+import { NavigatorScreenParams } from '@react-navigation/native'
+
+import { MainBottomTabNavigationParamList } from '@/navigators/MainBottomTabNav/types'
+import { AppRoutes } from '@/navigators/types'
+
+export type MainDrawerNavigationParamList = {
+  [AppRoutes.MainBottomTabNav]: NavigatorScreenParams<MainBottomTabNavigationParamList>
+}

package/template/src/navigators/MainBottomTabNav/index.tsx

@@ -0,0 +1,83 @@
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import LinearGradient from 'react-native-linear-gradient'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import { IconX } from '@/components/basic'
+import useTheme from '@/hooks/useTheme'
+import { MainBottomTabNavigationParamList } from '@/navigators/MainBottomTabNav/types'
+import { AppRoutes } from '@/navigators/types'
+import HomeScreen from '@/screens/Home'
+import SettingsScreen from '@/screens/Settings'
+
+const Tab = createBottomTabNavigator<MainBottomTabNavigationParamList>()
+
+const MainBottomTabNav = () => {
+  const { t } = useTranslation()
+  const insets = useSafeAreaInsets()
+  const { Colors } = useTheme()
+
+  const tabBarHeight = 60 + insets.bottom
+
+  const renderTabIcon = useCallback((iconName: string) => {
+    const renderNamedTabIcon = ({ color, focused }: { color?: string; focused: boolean }) => {
+      return <IconX origin={IconX.ANT_DESIGN} name={iconName} size={26} color={color} />
+    }
+
+    return renderNamedTabIcon
+  }, [])
+
+  return (
+    <Tab.Navigator
+      initialRouteName={AppRoutes.HomeScreen}
+      backBehavior={'initialRoute'}
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: Colors.primary,
+        tabBarBackground: () => {
+          return (
+            <LinearGradient
+              colors={[
+                '#E8E8E8', '#E8E8E8', '#fff', '#fff', '#FAFAFA', '#E8E8E8',
+              ]}
+              start={{ x: 0.0, y: 1.0 }}
+              end={{ x: 0.0, y: 0.0 }}
+              style={{ height: tabBarHeight }}
+            />
+          )
+        },
+        tabBarStyle: {
+          height: tabBarHeight,
+        },
+      }}
+    >
+      <Tab.Screen
+        name={AppRoutes.HomeScreen}
+        component={HomeScreen}
+        options={{
+          tabBarLabel: `${t('screens:home')}`,
+          tabBarIcon: renderTabIcon('home'),
+          tabBarLabelStyle: {
+            fontSize: 12,
+            fontWeight: '500',
+          },
+        }}
+      />
+      <Tab.Screen
+        name={AppRoutes.SettingsScreen}
+        component={SettingsScreen}
+        options={{
+          tabBarLabel: `${t('screens:settings')}`,
+          tabBarIcon: renderTabIcon('setting'),
+          tabBarLabelStyle: {
+            fontSize: 12,
+            fontWeight: '500',
+          },
+        }}
+      />
+    </Tab.Navigator>
+  )
+}
+
+export default MainBottomTabNav

package/template/src/navigators/MainBottomTabNav/props.ts

@@ -0,0 +1,16 @@
+import { BottomTabScreenProps } from '@react-navigation/bottom-tabs'
+import { CompositeScreenProps } from '@react-navigation/native'
+
+import { MainBottomTabNavigationParamList } from '@/navigators/MainBottomTabNav/types'
+import { MainDrawerNavScreenProps } from '@/navigators/props'
+import { AppRoutes } from '@/navigators/types'
+
+export type HomeScreenProps = CompositeScreenProps<
+  BottomTabScreenProps<MainBottomTabNavigationParamList, AppRoutes.HomeScreen>,
+  MainDrawerNavScreenProps
+>
+
+export type SettingsScreenProps = CompositeScreenProps<
+  BottomTabScreenProps<MainBottomTabNavigationParamList, AppRoutes.SettingsScreen>,
+  MainDrawerNavScreenProps
+>

package/template/src/navigators/MainBottomTabNav/types.ts

@@ -0,0 +1,6 @@
+import { AppRoutes } from '@/navigators/types'
+
+export type MainBottomTabNavigationParamList = {
+  [AppRoutes.HomeScreen]: undefined
+  [AppRoutes.SettingsScreen]: undefined
+}

package/template/src/navigators/RootStack.tsx

@@ -0,0 +1,43 @@
+import { createStackNavigator } from '@react-navigation/stack'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import Header, { HeaderProps } from '@/components/basic/Header'
+import DrawerNav from '@/navigators/DrawerNav'
+import SplashScreen from '@/screens/Splash'
+
+import { AppRoutes, RootStackNavigationParamList } from './types'
+
+const Stack = createStackNavigator<RootStackNavigationParamList>()
+
+const RootStack = (): React.ReactElement => {
+  const renderHeader = (props: HeaderProps) => {
+    return (
+      <>
+        <Header {...props} />
+      </>
+    )
+  }
+
+  return (
+    <Stack.Navigator
+      // headerMode="none"
+      // headerMode={'float'}
+      id={'Root'}
+      initialRouteName={AppRoutes.SplashScreen}
+    >
+      <Stack.Screen
+        name={AppRoutes.SplashScreen}
+        component={SplashScreen}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name={AppRoutes.MainDrawerNav}
+        component={DrawerNav}
+        options={{ headerShown: false }}
+      />
+    </Stack.Navigator>
+  )
+}
+
+export default RootStack

package/template/src/navigators/index.tsx

@@ -0,0 +1,40 @@
+import { useBackHandler } from '@react-native-community/hooks'
+import { NavigationContainer, Theme as NavigationThemeType } from '@react-navigation/native'
+import React, { FunctionComponent, useCallback } from 'react'
+import { BackHandler, StatusBar } from 'react-native'
+import { useSelector } from 'react-redux'
+
+import useTheme from '@/hooks/useTheme'
+import logger from '@/infrastructures/common/logger'
+import { selectLoading } from '@/redux/selectors/nonPersist'
+import { ThemeNavigationTheme } from '@/theme/types'
+
+import RootStack from './RootStack'
+import { navigationRef } from './utils'
+
+interface IAppContainerProps {
+  theme: NavigationThemeType
+}
+const AppNavigationContainer: FunctionComponent<IAppContainerProps> = ({ theme }: IAppContainerProps) => {
+  const { Colors, darkMode } = useTheme()
+  const { statusBarBackgroundColor } = Colors
+
+
+  const loading = useSelector(selectLoading)
+  const onBackPress = useCallback(() => {
+    logger.log('onBackPress', loading)
+
+    return loading
+  }, [loading])
+  useBackHandler(onBackPress)
+
+
+  return (
+    <NavigationContainer ref={navigationRef} theme={theme}>
+      <StatusBar barStyle={darkMode ? 'light-content' : 'dark-content'} translucent backgroundColor={statusBarBackgroundColor} />
+      <RootStack />
+    </NavigationContainer>
+  )
+}
+
+export default AppNavigationContainer

package/template/src/navigators/props.ts

@@ -0,0 +1,14 @@
+import { BottomTabNavigationProp, BottomTabScreenProps } from '@react-navigation/bottom-tabs'
+import { DrawerScreenProps } from '@react-navigation/drawer'
+import { MaterialTopTabScreenProps } from '@react-navigation/material-top-tabs'
+import { CompositeNavigationProp, CompositeScreenProps, RouteProp } from '@react-navigation/native'
+import { StackNavigationProp, StackScreenProps } from '@react-navigation/stack'
+
+import { AppRoutes, RootStackNavigationParamList } from '@/navigators/types'
+
+export type RootScreenProps = StackScreenProps<RootStackNavigationParamList>
+export type RootScreenNavigationProp = RootScreenProps['navigation']
+
+export type MainDrawerNavScreenProps = StackScreenProps<RootStackNavigationParamList, AppRoutes.MainDrawerNav>
+
+

package/template/src/navigators/types.ts

@@ -0,0 +1,18 @@
+import { NavigatorScreenParams } from '@react-navigation/native'
+
+import { MainDrawerNavigationParamList } from '@/navigators/DrawerNav/types'
+
+export enum AppRoutes {
+  SplashScreen = 'SplashScreen',
+  MainDrawerNav = 'MainDrawerNav',
+  MainBottomTabNav = 'MainBottomTabNav',
+  HomeScreen = 'HomeScreen',
+  SettingsScreen = 'SettingsScreen',
+}
+
+export type RootStackNavigationParamList = {
+  [AppRoutes.SplashScreen]: undefined
+  [AppRoutes.MainDrawerNav]: NavigatorScreenParams<MainDrawerNavigationParamList>|undefined
+}
+
+

package/template/src/navigators/utils.ts

@@ -0,0 +1,68 @@
+import {
+  CommonActions,
+  createNavigationContainerRef,
+  NavigationState,
+  PartialRoute,
+  PartialState,
+  Route,
+} from '@react-navigation/native'
+
+// import { NavigationState, PartialState, Route } from '@react-navigation/routers'
+import logger from '@/infrastructures/common/logger'
+
+import { RootStackNavigationParamList } from './types'
+
+export const navigationRef = createNavigationContainerRef<RootStackNavigationParamList>()
+export const navigate = (name: keyof RootStackNavigationParamList, params: any) => {
+  if (navigationRef.isReady()) {
+    logger.log('navigate navigationRef ready')
+    navigationRef.navigate(name, params)
+  } else {
+    logger.log('navigate navigationRef not ready')
+  }
+}
+
+type ResetState =
+  | PartialState<NavigationState<RootStackNavigationParamList>>
+  | NavigationState<RootStackNavigationParamList>
+  | (Omit<NavigationState<RootStackNavigationParamList>, 'routes'> & {
+    routes: Omit<Route<string>, 'key'>[]
+  })
+export type ResetRoutes = ResetState['routes']
+
+export const navigateAndReset = (routes: PartialRoute<Route<NavigationState<RootStackNavigationParamList>['routeNames'][number]>>[] | Omit<Route<string>, 'key'>[], index = 0) => {
+  if (navigationRef.isReady()) {
+
+    navigationRef.dispatch(
+      CommonActions.reset({
+        index,
+        routes,
+      }),
+    )
+  }
+}
+
+export const navigateAndSimpleReset = (name: string, params: any = {}, index = 0) => {
+  if (navigationRef.isReady()) {
+    navigationRef.dispatch(
+      CommonActions.reset({
+        index,
+        routes: [
+          {
+            name,
+            params,
+          },
+        ],
+      }),
+    )
+  }
+}
+
+export const getCurrentRouteName = () => {
+  if (navigationRef.isReady()) {
+    return navigationRef.current?.getCurrentRoute()?.name
+  }
+
+  return undefined
+}
+

package/template/src/redux/api/api.ts

@@ -0,0 +1,41 @@
+import type { BaseQueryFn, FetchArgs, FetchBaseQueryError } from '@reduxjs/toolkit/query'
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+
+import { API_ENDPOINT, API_TIMEOUT } from '@/configs'
+import logger from '@/infrastructures/common/logger'
+import { IBaseResponse } from '@/models/request.model'
+
+export const baseQuery = fetchBaseQuery({
+  baseUrl: API_ENDPOINT,
+  timeout: API_TIMEOUT,
+})
+export const baseQueryWithErrorHandle: BaseQueryFn<
+  string | FetchArgs,
+  unknown,
+  FetchBaseQueryError
+> = async (args, api, extraOptions) => {
+  logger.log('baseQueryWithErrorHandle args', args)
+  const result = await baseQuery(args, api, extraOptions)
+  if (result.data) {
+    const data = result.data as IBaseResponse<unknown>
+    logger.log('baseQueryWithErrorHandle data', data)
+
+    if (!data.success) {
+      return {
+        error: {
+          status: result?.meta?.response?.status || 0,
+          data: {
+            success: false,
+            code: data.code,
+            message: data.message,
+          },
+          message: data.message,
+        },
+      }
+    }
+
+    return result
+  }
+
+  return result
+}

package/template/src/redux/reducers/appSlice.ts

@@ -0,0 +1,26 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+import logger from '@/infrastructures/common/logger'
+
+export type AppState = {
+  selectedMarketId: string|undefined
+}
+
+const initialState = { selectedMarketId: undefined } as AppState
+export const appSlice = createSlice({
+  name: 'app',
+  initialState,
+  reducers: {
+    setSelectedMarket: (state, action: PayloadAction<{ marketId: string}>) => {
+      logger.log('appSlice: setSelectedMarket: action.payload.marketId', action.payload.marketId)
+
+      return {
+        ...state,
+        selectedMarketId: action.payload.marketId,
+      }
+    },
+  },
+})
+
+export const { setSelectedMarket } = appSlice.actions
+export default appSlice.reducer