create-du-app 0.1.2 → 0.1.4

package/templates/mobile/expo/src/core/components/splash/splash-overlay/splash-overlay.tsx

@@ -0,0 +1,93 @@
+import { ImgScreenBgGradian } from '@src/assets/Images';
+import { verticalScale } from '@src/core';
+import React, { useEffect } from 'react';
+import { Image, Platform, StyleSheet } from 'react-native';
+import Animated, {
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated';
+
+const LOGO = require('@src/assets/splash/logo-white.png');
+
+const FADE_OUT_MS = 350;
+
+interface SplashOverlayProps {
+    /**
+     * Flip to `true` once the app is ready (launch route resolved + native
+     * splash hidden). The overlay then fades out and unmounts itself.
+     */
+    hidden: boolean;
+}
+
+/**
+ * Android-only fake splash.
+ *
+ * iOS renders a full-bleed gradient splash via the native storyboard
+ * (with-splash-screen-fix plugin). Android 12+ can only show a centred icon on
+ * a solid colour, so after the native splash hands off we cover the first
+ * frames with this React overlay — the shared `ImgScreenBgGradian` background
+ * + logo — then fade it out, giving Android a gradient launch look. No-op on
+ * iOS, which keeps its full-bleed native storyboard splash.
+ */
+const SplashOverlay = ({ hidden }: SplashOverlayProps) => {
+    const opacity = useSharedValue(1);
+    const gone = useSharedValue(false);
+
+    useEffect(() => {
+        if (hidden) {
+            opacity.value = withTiming(0, { duration: FADE_OUT_MS }, finished => {
+                if (finished) {
+                    gone.value = true;
+                }
+            });
+        }
+    }, [hidden, opacity, gone]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+        // Drop out of the tree (and stop intercepting touches) once faded.
+        display: gone.value ? 'none' : 'flex',
+    }));
+
+    if (Platform.OS !== 'android') {
+        return null;
+    }
+
+    return (
+        <Animated.View
+            style={[styles.container, animatedStyle]}
+            pointerEvents="none">
+            <Image
+                source={ImgScreenBgGradian}
+                style={styles.image}
+            />
+
+            <Image source={LOGO} style={styles.logo} resizeMode="contain" />
+        </Animated.View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 9999,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    image: {
+        position: 'absolute',
+        height: '100%',
+        width: '100%'
+    },
+    logo: {
+        height: verticalScale(160),
+        width: verticalScale(110)
+    },
+});
+
+export default SplashOverlay;

package/templates/mobile/expo/src/core/components/ui/animated-list-item/animated-list-item.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import Animated, { FadeInRight, FadeOutRight, Layout } from 'react-native-reanimated';
+import { AnimatedListItemProps } from './animated-list-item.type';
+
+const ANIMATION_DELAY_STAGGER = 50;
+const ANIMATION_DURATION = 200;
+const ENTERING_BASE = FadeInRight.duration(ANIMATION_DURATION).springify();
+const EXITING = FadeOutRight.duration(ANIMATION_DURATION);
+const LAYOUT = Layout.springify();
+const PressableAnimated = Animated.createAnimatedComponent(Pressable);
+
+const AnimatedListItem: React.FC<AnimatedListItemProps> = ({
+    children,
+    index,
+    style,
+    delayStagger = ANIMATION_DELAY_STAGGER,
+    onPress,
+}) => {
+    const entering = ENTERING_BASE.delay(index * delayStagger);
+
+    if (onPress) {
+        return (
+            <PressableAnimated
+                entering={entering}
+                exiting={EXITING}
+                layout={LAYOUT}
+                style={style}
+                onPress={onPress}
+            >
+                {children}
+            </PressableAnimated>
+        );
+    }
+
+    return (
+        <Animated.View
+            entering={entering}
+            exiting={EXITING}
+            layout={LAYOUT}
+            style={style}
+        >
+            {children}
+        </Animated.View>
+    );
+};
+
+export default AnimatedListItem;

package/templates/mobile/expo/src/core/components/ui/animated-list-item/animated-list-item.type.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+export interface AnimatedListItemProps {
+    children: React.ReactNode;
+    index: number;
+    style?: StyleProp<ViewStyle>;
+    delayStagger?: number;
+    onPress?: () => void;
+}

package/templates/mobile/expo/src/core/components/ui/animated-list-item/index.ts

@@ -0,0 +1,2 @@
+export { default as AnimatedListItem } from './animated-list-item';
+export * from './animated-list-item.type';

package/templates/mobile/expo/src/core/components/ui/app-image/app-image.tsx

@@ -0,0 +1,104 @@
+import { ThemeColors, useThemedStyles } from '@src/core/theme';
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Image,
+  ImageStyle,
+  StyleProp,
+  StyleSheet,
+  View,
+} from 'react-native';
+import FastImage, { ImageStyle as FastImageStyle } from 'react-native-fast-image';
+import { AppImageProps } from './app-image.type';
+
+const ImageSkeleton: React.FC<{ style?: StyleProp<ImageStyle> }> = ({ style }) => {
+  const styles = useThemedStyles(makeStyles);
+  const shimmer = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(shimmer, { toValue: 1, duration: 900, useNativeDriver: true }),
+        Animated.timing(shimmer, { toValue: 0, duration: 900, useNativeDriver: true }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [shimmer]);
+
+  const opacity = shimmer.interpolate({ inputRange: [0, 1], outputRange: [0.4, 0.9] });
+
+  return <Animated.View style={[styles.skeleton, style, { opacity }]} />;
+};
+
+const AppImage: React.FC<AppImageProps> = ({ style, source, resizeMode, containerStyle, immutable, ...rest }) => {
+  const styles = useThemedStyles(makeStyles);
+  // Start true so the shimmer shows immediately on mount and stays up until the
+  // first load resolves; flipping it false on load-end/error reveals the image.
+  // For an immutable source the bitmap is already cached on remount, so starting
+  // false avoids a shimmer flash before onLoadEnd fires (LIFEMASTER-364).
+  const [loading, setLoading] = useState(!immutable);
+
+  // Handle empty or invalid source. Keep `style` so the slot preserves its
+  // dimensions (e.g. a hero/cover) instead of collapsing to 0px while the real
+  // source is still loading or missing.
+  if (!source || (typeof source === 'object' && 'uri' in source && !source.uri)) {
+    return <View style={style} />;
+  }
+
+  // Local image or non-http/https uri
+  if (
+    typeof source === 'number' ||
+    !(source?.uri?.startsWith('http://') || source?.uri?.startsWith('https://'))
+  ) {
+    return <Image style={style} source={source} resizeMode={resizeMode} {...rest} />;
+  }
+
+  // Remote image with loading indicator
+  // `source` is narrowed to `ImageURISource` here: the `number` case returned above.
+  const uri = source.uri ?? '';
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <FastImage
+        // Default (mutable) path remounts on URL change so a re-uploaded avatar
+        // reloads instead of FastImage keeping the old native view + cached
+        // bitmap; `cache: web` revalidates a stable URL (server fix is a unique
+        // filename per upload, LIFEMASTER-260). An `immutable` source has a
+        // content-addressed URL, so we skip the remount and cache it immutably —
+        // the bitmap is served instantly on remount with no reload/flash
+        // (LIFEMASTER-364).
+        key={immutable ? undefined : uri}
+        style={style as FastImageStyle}
+        source={{
+          uri: uri || '',
+          priority: FastImage.priority.normal,
+          cache: immutable
+            ? FastImage.cacheControl.immutable
+            : FastImage.cacheControl.web,
+        }}
+        // For an immutable (already-cached) source, don't re-raise the shimmer on
+        // load-start: the bitmap is there instantly, so a flash to loading would
+        // be the very reload artifact we're removing (LIFEMASTER-364).
+        onLoadStart={() => !immutable && setLoading(true)}
+        onLoadEnd={() => setLoading(false)}
+        onError={() => setLoading(false)}
+        resizeMode={resizeMode}
+      />
+      {loading && <ImageSkeleton style={style} />}
+    </View>
+  );
+};
+
+export default AppImage;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    container: {
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    skeleton: {
+      position: 'absolute',
+      backgroundColor: c.hE3E3E3,
+    },
+  });

package/templates/mobile/expo/src/core/components/ui/app-image/app-image.type.ts

@@ -0,0 +1,19 @@
+import { ImagePropsBase, ImageStyle, ImageURISource, StyleProp, ViewStyle } from 'react-native';
+import { ResizeMode } from 'react-native-fast-image';
+
+export interface AppImageProps extends ImagePropsBase {
+  source: ImageURISource | number;
+  style?: StyleProp<ImageStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  resizeMode?: ResizeMode;
+  /**
+   * Treat the remote image as immutable (stable URL → content never changes), so
+   * FastImage serves the cached bitmap instantly on every remount instead of
+   * revalidating over the network. Use for content-addressed images (e.g. player
+   * covers): it stops the artwork from flashing/reloading when the same image
+   * remounts — like expanding the mini-player to full screen on Android
+   * (LIFEMASTER-364). Leave off for images that can change behind a stable URL
+   * (e.g. a re-uploaded avatar), which need the default revalidating `web` cache.
+   */
+  immutable?: boolean;
+}

package/templates/mobile/expo/src/core/components/ui/app-image/index.ts

@@ -0,0 +1,2 @@
+export { default as AppImage } from './app-image';
+export * from './app-image.type';

package/templates/mobile/expo/src/core/components/ui/asset-placeholder/asset-placeholder.tsx

@@ -0,0 +1,76 @@
+import { Colors, Font, fontSize, Radius } from '@src/core/utils'
+import React from 'react'
+import { DimensionValue, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
+
+interface AssetPlaceholderProps {
+    /** Asset name from the FE handoff asset checklist (e.g. 'onboarding-clarity'). */
+    name: string
+    /** Figma node id the asset comes from. */
+    figmaNodeId?: string
+    width?: DimensionValue
+    height?: DimensionValue
+    rounded?: boolean
+    style?: StyleProp<ViewStyle>
+}
+
+/**
+ * Placeholder for an image / illustration / icon that is NOT yet exported from
+ * Figma. Reserves the correct space and labels the missing asset so the layout
+ * stays intact until the real asset is imported.
+ *
+ * Replace every usage with the real asset listed in the FE handoff checklist.
+ *
+ * @example
+ * <AssetPlaceholder name="onboarding-clarity" figmaNodeId="16:6784" width={240} height={240} rounded />
+ */
+const AssetPlaceholder = ({
+    name,
+    figmaNodeId,
+    width = '100%',
+    height = 160,
+    rounded = false,
+    style,
+}: AssetPlaceholderProps) => {
+    return (
+        <View
+            style={[
+                styles.box,
+                { width, height },
+                rounded && styles.rounded,
+                style,
+            ]}
+            accessibilityRole="image"
+            accessibilityLabel={`asset:${name}`}
+        >
+            <Text style={styles.label}>{name}</Text>
+            {figmaNodeId ? <Text style={styles.node}>{figmaNodeId}</Text> : null}
+        </View>
+    )
+}
+
+export default AssetPlaceholder
+
+const styles = StyleSheet.create({
+    box: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderStyle: 'dashed',
+        borderColor: Colors.bd_neutral_faded,
+        backgroundColor: Colors.bg_input,
+        borderRadius: Radius.radius_lg,
+    },
+    rounded: {
+        borderRadius: Radius.radius_full,
+    },
+    label: {
+        fontFamily: Font.dmSansMedium,
+        fontSize: fontSize(12),
+        color: Colors.fg_neutral_faded,
+    },
+    node: {
+        fontFamily: Font.dmSansRegular,
+        fontSize: fontSize(10),
+        color: Colors.fg_neutral_faded,
+    },
+})

package/templates/mobile/expo/src/core/components/ui/asset-placeholder/index.ts

@@ -0,0 +1 @@
+export { default as AssetPlaceholder } from './asset-placeholder'

package/templates/mobile/expo/src/core/components/ui/avatar-image/avatar-image.tsx

@@ -0,0 +1,90 @@
+import { AppImage } from '@src/core/components/ui/app-image';
+import React from 'react';
+import {
+    ImageSourcePropType,
+    ImageURISource,
+    StyleProp,
+    StyleSheet,
+    ImageStyle,
+    Text,
+} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+interface AvatarImageProps {
+    source: ImageSourcePropType;
+    /** Used for the empty-URI fallback: the first letter is shown over the
+     *  brand gradient disc. */
+    name?: string;
+    /** @deprecated No longer used (the disc sizes itself from `style`). */
+    size?: number;
+    style?: StyleProp<ImageStyle>;
+}
+
+const hasUri = (src: ImageSourcePropType): boolean => {
+    if (typeof src === 'number') return true;
+    if (Array.isArray(src)) return true;
+    return !!(src as { uri?: string }).uri;
+};
+
+const initialOf = (name?: string): string => {
+    const first = name?.trim().charAt(0);
+    return first ? first.toUpperCase() : '';
+};
+
+/**
+ * Avatar circle. Renders the image when the URI is set; otherwise falls back to
+ * a brand-purple gradient disc showing the first letter of `name`.
+ */
+const AvatarImage = ({ source, name, style }: AvatarImageProps) => {
+    if (hasUri(source)) {
+        return (
+            <AppImage
+                source={source as ImageURISource | number}
+                style={style}
+                resizeMode="cover"
+            />
+        );
+    }
+
+    // No URI → brand gradient disc with the first initial of the name.
+    const flatStyle = StyleSheet.flatten(style) ?? {};
+    const diameter =
+        typeof flatStyle.width === 'number' ? flatStyle.width : undefined;
+    const initial = initialOf(name);
+
+    return (
+        <LinearGradient
+            colors={['#3F1881', '#8B5CF6']}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 1 }}
+            style={[flatStyle, styles.fill]}
+        >
+            {!!initial && (
+                <Text
+                    style={[
+                        styles.initial,
+                        diameter ? { fontSize: diameter * 0.4 } : null,
+                    ]}
+                    numberOfLines={1}
+                    allowFontScaling={false}
+                >
+                    {initial}
+                </Text>
+            )}
+        </LinearGradient>
+    );
+};
+
+export default AvatarImage;
+
+const styles = StyleSheet.create({
+    fill: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+    },
+    initial: {
+        color: '#FFFFFF',
+        fontWeight: '600',
+    },
+});

package/templates/mobile/expo/src/core/components/ui/avatar-image/index.ts

@@ -0,0 +1 @@
+export { default as AvatarImage } from './avatar-image';

package/templates/mobile/expo/src/core/components/ui/bottom-sheet/bottom-sheet.tsx

@@ -0,0 +1,145 @@
+import React, { FC, useEffect, useRef, useState } from 'react';
+import {
+    Modal,
+    Pressable,
+    StyleSheet,
+    View,
+    Animated,
+    Dimensions,
+} from 'react-native';
+import { verticalScale, Radius } from '../../../utils';
+import { ThemeColors, useThemedStyles } from '@src/core/theme';
+import { BottomSheetProps } from './bottom-sheet.type';
+
+const BottomSheet: FC<BottomSheetProps> = (props) => {
+    const {
+        visible,
+        animationType = 'none',
+        children,
+        styleContent = {},
+        onHideModal = () => {},
+    } = props;
+
+    const styles = useThemedStyles(makeStyles);
+
+    const screenHeight = Dimensions.get('window').height;
+    const slideAnim = useRef(new Animated.Value(screenHeight)).current;
+    const opacityAnim = useRef(new Animated.Value(0)).current;
+    const [modalVisible, setModalVisible] = useState(false);
+
+    useEffect(() => {
+        if (visible) {
+            // Show modal first
+            setModalVisible(true);
+            // Reset to initial position before animating in
+            slideAnim.setValue(screenHeight);
+            opacityAnim.setValue(0);
+            
+            // Small delay to ensure values are set before animation starts
+            requestAnimationFrame(() => {
+                Animated.parallel([
+                    Animated.spring(slideAnim, {
+                        toValue: 0,
+                        tension: 65,
+                        friction: 11,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(opacityAnim, {
+                        toValue: 1,
+                        duration: 200,
+                        useNativeDriver: true,
+                    }),
+                ]).start();
+            });
+        } else {
+            // Animate out first, then hide modal
+            Animated.parallel([
+                Animated.timing(slideAnim, {
+                    toValue: screenHeight,
+                    duration: 250,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(opacityAnim, {
+                    toValue: 0,
+                    duration: 200,
+                    useNativeDriver: true,
+                }),
+            ]).start(() => {
+                // Hide modal after animation completes
+                setModalVisible(false);
+            });
+        }
+    }, [visible, slideAnim, opacityAnim, screenHeight]);
+
+    return (
+        <Modal
+            visible={modalVisible}
+            animationType={animationType}
+            transparent
+            statusBarTranslucent
+            onRequestClose={onHideModal}
+        >
+            <View style={styles.backdrop}>
+                <Pressable 
+                    style={StyleSheet.absoluteFill}
+                    onPress={onHideModal}
+                >
+                    <Animated.View
+                        style={[
+                            StyleSheet.absoluteFill,
+                            styles.backdropOverlay,
+                            {
+                                opacity: opacityAnim,
+                            },
+                        ]}
+                    />
+                </Pressable>
+                <Animated.View
+                    style={[
+                        styles.content,
+                        styleContent,
+                        {
+                            transform: [{ translateY: slideAnim }],
+                        },
+                    ]}
+                >
+                    {/* flexShrink lets the inner content honour the 80% maxHeight
+                        cap so tall sheets (e.g. the audio preview) shrink their
+                        content instead of clipping the bottom (the CTA). */}
+                    <Pressable
+                        style={styles.childrenWrap}
+                        onPress={(e) => e.stopPropagation()}
+                    >
+                        {children}
+                    </Pressable>
+                </Animated.View>
+            </View>
+        </Modal>
+    );
+};
+
+export default BottomSheet;
+
+const makeStyles = (c: ThemeColors) =>
+    StyleSheet.create({
+        backdrop: {
+            flex: 1,
+            justifyContent: 'flex-end',
+        },
+        backdropOverlay: {
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        },
+        content: {
+            width: '100%',
+            backgroundColor: c.hFFFFFF,
+            borderTopLeftRadius: Radius.radius_xl,
+            borderTopRightRadius: Radius.radius_xl,
+            maxHeight: '80%',
+            minHeight: verticalScale(200),
+        },
+        // Shrink to fit within `content`'s maxHeight so tall children co rather
+        // than overflow (and get clipped at the bottom).
+        childrenWrap: {
+            flexShrink: 1,
+        },
+    });

package/templates/mobile/expo/src/core/components/ui/bottom-sheet/bottom-sheet.type.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ModalProps, StyleProp, ViewStyle } from 'react-native';
+
+export type BottomSheetProps = {
+    visible: boolean;
+    animationType?: ModalProps['animationType'];
+    onHideModal?: () => void;
+    styleContent?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+};

package/templates/mobile/expo/src/core/components/ui/bottom-sheet/index.ts

@@ -0,0 +1,2 @@
+export { default as BottomSheet } from './bottom-sheet';
+export * from './bottom-sheet.type';