create-react-native-starter-kit 0.0.0-stage → 1.0.1

package/template/src/components/shared/modal/BaseModal.tsx

@@ -0,0 +1,83 @@
+import React, { memo, ReactNode } from 'react';
+import {
+  Modal,
+  ModalProps,
+  Pressable,
+  StyleSheet,
+  ViewProps,
+} from 'react-native';
+import { useAppTheme } from '@/context/ThemeContext';
+import { palette } from '@/theme';
+
+interface Props extends Partial<Omit<ModalProps, 'visible' | 'children'>> {
+  isOpen: boolean;
+  onClose?: () => void;
+  children: ReactNode;
+  overlayStyle?: ViewProps['style'];
+  contentStyle?: ViewProps['style'];
+  disableOverlayPress?: boolean;
+}
+
+const BaseModal = ({
+  isOpen,
+  onClose,
+  children,
+  overlayStyle,
+  contentStyle,
+  disableOverlayPress = false,
+  ...rest
+}: Props) => {
+  const { color } = useAppTheme();
+
+  return (
+    <Modal
+      transparent
+      visible={isOpen}
+      animationType="fade"
+      presentationStyle="overFullScreen"
+      statusBarTranslucent
+      onRequestClose={onClose}
+      {...rest}
+    >
+      <Pressable
+        style={[styles.overlay, overlayStyle]}
+        disabled={disableOverlayPress}
+        onPress={onClose}
+      >
+        <Pressable
+          style={[
+            styles.content,
+            { backgroundColor: color.background_primary },
+            contentStyle,
+          ]}
+        >
+          {children}
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};
+
+export default memo(BaseModal);
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.45)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 28,
+  },
+  content: {
+    width: '100%',
+    borderRadius: 24,
+    paddingHorizontal: 24,
+    paddingTop: 28,
+    paddingBottom: 24,
+    shadowColor: palette.black[900],
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.12,
+    shadowRadius: 24,
+    elevation: 10,
+  },
+});

package/template/src/components/shared/modal/common/AlertModal.tsx

@@ -0,0 +1,173 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { StyleSheet, View, ViewStyle, StyleProp } from 'react-native';
+import CustomText from '../../text/CustomText';
+import CustomButton, { AppButtonProps } from '../../CustomButton';
+import Icon from '../../Icon';
+import BaseModal from '../BaseModal';
+import { useAppTheme } from '@/context/ThemeContext';
+import { IconName } from '@/assets/icons';
+import { spacing } from '@/theme';
+
+interface AlertModalProps {
+  isOpen: boolean;
+  title: string;
+  description?: string;
+  icon?: IconName;
+  iconSize?: number;
+  showPrimaryButton?: boolean;
+  showSecondaryButton?: boolean;
+  primaryButton?: Partial<Omit<AppButtonProps, 'onPress'>>;
+  secondaryButton?: Partial<Omit<AppButtonProps, 'onPress'>>;
+  onClose?: () => void;
+  closeOnOverlayPress?: boolean;
+  contentStyle?: StyleProp<ViewStyle>;
+  onPressPrimaryBtn?: () => void;
+  onPressSecondaryBtn?: () => void;
+}
+
+const AlertModal: React.FC<AlertModalProps> = ({
+  isOpen,
+  title,
+  description,
+  icon,
+  iconSize = 40,
+  showPrimaryButton = true,
+  showSecondaryButton = true,
+  primaryButton,
+  secondaryButton,
+  onClose,
+  closeOnOverlayPress = false,
+  contentStyle,
+  onPressPrimaryBtn,
+  onPressSecondaryBtn,
+}) => {
+  const { color } = useAppTheme();
+
+  const resolvedPrimary = useMemo(
+    () => ({
+      title: 'Yes',
+      variant: 'danger' as const,
+      overrideVariantColor: color.danger_strong,
+      ...primaryButton,
+    }),
+    [color.danger_strong, primaryButton],
+  );
+
+  const resolvedSecondary = useMemo(
+    () => ({
+      title: 'Cancel',
+      variant: 'outline' as const,
+      overrideVariantColor: color.border,
+      overrideVariantTextColor: color.text_secondary,
+      ...secondaryButton,
+    }),
+    [color.border, color.text_secondary, secondaryButton],
+  );
+
+  const handlePrimaryPress = useCallback(() => {
+    onPressPrimaryBtn?.();
+  }, [onPressPrimaryBtn]);
+
+  const handleSecondaryPress = useCallback(() => {
+    onPressSecondaryBtn?.();
+  }, [onPressSecondaryBtn]);
+
+  return (
+    <BaseModal
+      isOpen={isOpen}
+      onClose={onClose ?? onPressSecondaryBtn}
+      disableOverlayPress={!closeOnOverlayPress}
+      contentStyle={[styles.content, contentStyle]}
+    >
+      {icon ? (
+        <View style={styles.iconWrap}>
+          <Icon
+            name={icon}
+            size={iconSize}
+          />
+        </View>
+      ) : null}
+
+      <CustomText
+        variant="titleSm"
+        weight="700"
+        textColor={color.text_heading}
+        textAlign="center"
+        style={styles.title}
+      >
+        {title}
+      </CustomText>
+
+      {description ? (
+        <CustomText
+          variant="label"
+          weight="400"
+          textColor={color.text_secondary}
+          textAlign="center"
+          style={styles.description}
+        >
+          {description}
+        </CustomText>
+      ) : null}
+
+      {(showPrimaryButton || showSecondaryButton) && (
+        <View style={styles.buttonContainer}>
+          {showSecondaryButton ? (
+            <CustomButton
+              {...resolvedSecondary}
+              onPress={handleSecondaryPress}
+              borderRadius={14}
+              textVariant="button"
+              textWeight="600"
+              containerStyle={[styles.button, resolvedSecondary.containerStyle]}
+            />
+          ) : null}
+
+          {showPrimaryButton ? (
+            <CustomButton
+              {...resolvedPrimary}
+              onPress={handlePrimaryPress}
+              borderRadius={14}
+              textVariant="button"
+              textWeight="600"
+              containerStyle={[styles.button, resolvedPrimary.containerStyle]}
+            />
+          ) : null}
+        </View>
+      )}
+    </BaseModal>
+  );
+};
+
+export default memo(AlertModal);
+
+const styles = StyleSheet.create({
+  content: {
+    alignItems: 'center',
+  },
+  iconWrap: {
+    marginBottom: spacing.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    marginBottom: 8,
+    width: '100%',
+  },
+  description: {
+    marginBottom: 24,
+    width: '100%',
+    lineHeight: 20,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    width: '100%',
+    gap: 12,
+    alignItems: 'stretch',
+  },
+  button: {
+    flex: 1,
+    minHeight: 48,
+    paddingVertical: 14,
+  },
+});

package/template/src/components/shared/navigation/AnimatedTabIcon.tsx

@@ -0,0 +1,37 @@
+import Animated, {
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated';
+import { TabIconName, TabIcons } from '@/assets/icons/tabs';
+import { useAppTheme } from '@/context/ThemeContext';
+import { useColorScheme } from 'react-native';
+
+interface Props {
+  focused: boolean;
+  size?: number;
+  name: TabIconName;
+}
+
+const AnimatedTabIcon = ({ focused, name, size = 22 }: Props) => {
+  const { mode } = useAppTheme();
+  const systemScheme = useColorScheme();
+  const resolved: 'light' | 'dark' =
+    mode === 'system' ? (systemScheme === 'dark' ? 'dark' : 'light') : mode;
+  const Component = TabIcons[name][focused ? 'active' : 'inactive'][resolved];
+
+  const style = useAnimatedStyle(() => ({
+    transform: [
+      { scale: withSpring(focused ? 1.2 : 1) },
+      { translateY: withSpring(focused ? -2 : 0) },
+    ],
+    opacity: withSpring(focused ? 1 : 0.6),
+  }));
+
+  return (
+    <Animated.View style={style}>
+      <Component width={size} height={size} />
+    </Animated.View>
+  );
+};
+
+export default AnimatedTabIcon;

package/template/src/components/shared/navigation/HeaderActionButton.tsx

@@ -0,0 +1,70 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import PressableIcon from '../PressableIcon';
+import { IconName } from '@/assets/icons';
+import { useAppTheme } from '@/context/ThemeContext';
+import { normalize } from '@/utils/normalize';
+
+type Props = {
+  icon: IconName;
+  onPress?: () => void;
+  /** Round elevated container (e.g. back). When false, icon only. */
+  isIconContainer?: boolean;
+  iconSize?: number;
+  accessibilityLabel?: string;
+};
+
+const HeaderActionButton = ({
+  icon,
+  onPress,
+  isIconContainer = false,
+  iconSize,
+  accessibilityLabel,
+}: Props) => {
+  const { color } = useAppTheme();
+
+  if (!isIconContainer) {
+    return (
+      <PressableIcon
+        name={icon}
+        size={iconSize ?? 32}
+        onPress={onPress}
+        hitSlop={12}
+        containerStyle={styles.plain}
+        accessibilityLabel={accessibilityLabel}
+      />
+    );
+  }
+
+  return (
+    <PressableIcon
+      name={icon}
+      size={iconSize ?? 14}
+      onPress={onPress}
+      hitSlop={8}
+      backgroundColor={color.background_primary}
+      borderRadius={20}
+      containerStyle={[styles.container, { shadowColor: color.shadow_strong }]}
+      accessibilityLabel={accessibilityLabel}
+    />
+  );
+};
+
+export default memo(HeaderActionButton);
+
+const styles = StyleSheet.create({
+  plain: {
+    width: normalize(32),
+    height: normalize(32),
+    backgroundColor: 'transparent',
+  },
+  container: {
+    width: 40,
+    height: 40,
+    overflow: 'visible',
+    shadowOffset: { width: 0, height: 7 },
+    shadowOpacity: 0.12,
+    shadowRadius: 18,
+    elevation: 8,
+  },
+});

package/template/src/components/shared/navigation/HeaderBackButton.tsx

@@ -0,0 +1,38 @@
+import { Pressable, StyleSheet } from 'react-native';
+import { memo } from 'react';
+import AppImage from '../AppImage';
+import { GlobalImage } from '@/assets/images';
+import { useAppTheme } from '@/context/ThemeContext';
+
+const HeaderBackButton = ({ onPress }: { onPress: () => void }) => {
+  const { color } = useAppTheme();
+  return (
+    <Pressable
+      onPress={onPress}
+      hitSlop={20}
+      android_ripple={{ color: 'rgba(0,0,0,0.15)', borderless: true }}
+      style={({ pressed }) => [
+        {
+          opacity: pressed ? 0.6 : 1,
+        },
+        styles.iconCont,
+      ]}
+    >
+      <AppImage
+        source={GlobalImage.back}
+        style={styles.backIcon}
+        tintColor={color.text_primary}
+      />
+    </Pressable>
+  );
+};
+
+export default memo(HeaderBackButton);
+
+const styles = StyleSheet.create({
+  iconCont: {
+    width: 22,
+    height: 22,
+  },
+  backIcon: { width: '100%', height: '100%' },
+});

package/template/src/components/shared/navigation/StackHeader.tsx

@@ -0,0 +1,105 @@
+import React, { memo, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTranslation } from 'react-i18next';
+import HeaderActionButton from './HeaderActionButton';
+import CustomText from '../text/CustomText';
+import { IconName } from '@/assets/icons';
+import { useAppTheme } from '@/context/ThemeContext';
+import { ColorType, spacing } from '@/theme';
+import { normalize } from '@/utils/normalize';
+
+type Props = {
+  title: string;
+  onBack?: () => void;
+  rightIcon?: IconName;
+  onRightPress?: () => void;
+  rightAccessibilityLabel?: string;
+};
+
+/** Full screen header — avoids iOS native bar-button glass wrapping. */
+const StackHeader = ({
+  title,
+  onBack,
+  rightIcon,
+  onRightPress,
+  rightAccessibilityLabel,
+}: Props) => {
+  const { t } = useTranslation();
+  const insets = useSafeAreaInsets();
+  const { color } = useAppTheme();
+  const styles = useMemo(() => makeStyles(color), [color]);
+
+  return (
+    <View style={[styles.wrap, { paddingTop: insets.top }]}>
+      <View style={styles.row}>
+        <View style={styles.side}>
+          {onBack ? (
+            <HeaderActionButton
+              icon="back"
+              isIconContainer
+              onPress={onBack}
+              accessibilityLabel={t('common.back')}
+            />
+          ) : null}
+        </View>
+
+        <View style={styles.titleWrap} pointerEvents="none">
+          <CustomText
+            variant="titleMd"
+            weight="600"
+            textColor={color.text_primary}
+            textAlign="center"
+            numberOfLines={1}
+            style={styles.title}
+          >
+            {title}
+          </CustomText>
+        </View>
+
+        <View style={[styles.side, styles.sideRight]}>
+          {rightIcon ? (
+            <HeaderActionButton
+              icon={rightIcon}
+              onPress={onRightPress}
+              accessibilityLabel={rightAccessibilityLabel}
+            />
+          ) : null}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default memo(StackHeader);
+
+const makeStyles = (color: ColorType) =>
+  StyleSheet.create({
+    wrap: {
+      backgroundColor: color.background_primary,
+      paddingHorizontal: spacing.md,
+      paddingBottom: spacing.sm,
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      minHeight: normalize(44),
+    },
+    side: {
+      width: normalize(40),
+      alignItems: 'flex-start',
+      justifyContent: 'center',
+    },
+    sideRight: {
+      alignItems: 'flex-end',
+    },
+    titleWrap: {
+      flex: 1,
+      paddingHorizontal: spacing.sm,
+    },
+    title: {
+      marginBottom: 0,
+      lineHeight: normalize(22),
+      letterSpacing: -0.4,
+    },
+  });

package/template/src/components/shared/navigation/tabIconRender.tsx

@@ -0,0 +1,14 @@
+import AnimatedTabIcon from './AnimatedTabIcon';
+
+interface RenderTabIconProps {
+  focused: boolean;
+  size: number;
+}
+
+export const renderHomeIcon = (props: RenderTabIconProps) => (
+  <AnimatedTabIcon {...props} name="home" />
+);
+
+export const renderProfileIcon = (props: RenderTabIconProps) => (
+  <AnimatedTabIcon {...props} name="profile" />
+);

package/template/src/components/shared/offline/OfflineQueryBoundary.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useNetwork } from '@/context/NetworkContext';
+import OfflineState from './OfflineState';
+import type { OfflineQueryBoundaryProps } from './types';
+
+/**
+ * - has data (online or offline) → children
+ * - no data + offline → offline UI
+ * - no data + online → loading
+ */
+const OfflineQueryBoundary = ({
+  hasData,
+  loading = null,
+  children,
+}: OfflineQueryBoundaryProps) => {
+  const { isOffline } = useNetwork();
+
+  if (hasData) {
+    return <>{children}</>;
+  }
+
+  return isOffline ? <OfflineState /> : <>{loading}</>;
+};
+
+export default OfflineQueryBoundary;