nastech-app 1.0.0

package/sources/components/SettingsView.tsx

@@ -0,0 +1,470 @@
+import { View, ScrollView, Pressable, Platform } from 'react-native';
+import { openExternalUrl } from '@/utils/openExternalUrl';
+import { Image } from 'expo-image';
+import * as React from 'react';
+import { Text } from '@/components/StyledText';
+import { useRouter } from 'expo-router';
+import { Ionicons } from '@expo/vector-icons';
+import Constants from 'expo-constants';
+import { useAuth } from '@/auth/AuthContext';
+import { Typography } from "@/constants/Typography";
+import { Item } from '@/components/Item';
+import { ItemGroup } from '@/components/ItemGroup';
+import { ItemList } from '@/components/ItemList';
+import { useConnectTerminal } from '@/hooks/useConnectTerminal';
+import { useEntitlement, useLocalSettingMutable, useSetting } from '@/sync/storage';
+import { sync } from '@/sync/sync';
+import { isUsingCustomServer } from '@/sync/serverConfig';
+import { trackPaywallButtonClicked, trackWhatsNewClicked } from '@/track';
+import { Modal } from '@/modal';
+import { useMultiClick } from '@/hooks/useMultiClick';
+import { useAllMachines } from '@/sync/storage';
+import { isMachineOnline } from '@/utils/machineUtils';
+import { useUnistyles } from 'react-native-unistyles';
+import { layout } from '@/components/layout';
+import { useNasTechAction } from '@/hooks/useNasTechAction';
+import { getGitHubOAuthParams, disconnectGitHub } from '@/sync/apiGithub';
+import { disconnectService } from '@/sync/apiServices';
+import { useProfile } from '@/sync/storage';
+import { getDisplayName, getAvatarUrl, getBio } from '@/sync/profile';
+import { Avatar } from '@/components/Avatar';
+import { t } from '@/text';
+
+type BuildConfig = {
+    buildCommitSha?: unknown;
+    buildCommitTimestamp?: unknown;
+};
+
+function getBuildConfig(): BuildConfig {
+    const appConfig = Constants.expoConfig?.extra?.app;
+    return appConfig && typeof appConfig === 'object' ? appConfig as BuildConfig : {};
+}
+
+function formatUtcTimestamp(value: string): string {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) {
+        return value;
+    }
+
+    return date.toISOString()
+        .replace(/\.\d{3}Z$/, 'Z')
+        .replace(/:\d{2}Z$/, 'Z')
+        .replace('T', ' ')
+        .replace('Z', ' UTC');
+}
+
+function formatBuildSubtitle(buildConfig: BuildConfig): string | undefined {
+    const commitTimestamp = typeof buildConfig.buildCommitTimestamp === 'string'
+        ? formatUtcTimestamp(buildConfig.buildCommitTimestamp)
+        : undefined;
+    const commitSha = typeof buildConfig.buildCommitSha === 'string'
+        ? buildConfig.buildCommitSha.slice(0, 7)
+        : undefined;
+
+    if (!commitTimestamp && !commitSha) {
+        return undefined;
+    }
+
+    return [
+        commitTimestamp ? `Commit ${commitTimestamp}` : 'Commit',
+        commitSha,
+    ].filter(Boolean).join(' / ');
+}
+
+export const SettingsView = React.memo(function SettingsView() {
+    const { theme } = useUnistyles();
+    const router = useRouter();
+    const appVersion = Constants.expoConfig?.version || '1.0.0';
+    const runtimeVersion = typeof Constants.expoConfig?.runtimeVersion === 'string'
+        ? Constants.expoConfig.runtimeVersion
+        : undefined;
+    const versionDetail = [
+        appVersion,
+        runtimeVersion ? `runtime ${runtimeVersion}` : undefined,
+    ].filter(Boolean).join(' / ');
+    const versionSubtitle = formatBuildSubtitle(getBuildConfig());
+    const auth = useAuth();
+    const [devModeEnabled, setDevModeEnabled] = useLocalSettingMutable('devModeEnabled');
+    const isPro = __DEV__ || useEntitlement('pro');
+    const experiments = useSetting('experiments');
+    const isCustomServer = isUsingCustomServer();
+    const [showOfflineMachines, setShowOfflineMachines] = React.useState(false);
+    const allMachinesWithOffline = useAllMachines({ includeOffline: true });
+    const offlineMachineCount = React.useMemo(
+        () => allMachinesWithOffline.filter(m => !isMachineOnline(m)).length,
+        [allMachinesWithOffline]
+    );
+    const visibleMachines = React.useMemo(
+        () => showOfflineMachines
+            ? allMachinesWithOffline
+            : allMachinesWithOffline.filter(isMachineOnline),
+        [allMachinesWithOffline, showOfflineMachines]
+    );
+    const profile = useProfile();
+    const displayName = getDisplayName(profile);
+    const avatarUrl = getAvatarUrl(profile);
+    const bio = getBio(profile);
+
+    const { connectTerminal, connectWithUrl, isLoading } = useConnectTerminal();
+
+    const handleGitHub = async () => {
+        await openExternalUrl('https://github.com/nastech-ai/nastech');
+    };
+
+    const handleReportIssue = async () => {
+        await openExternalUrl('https://github.com/nastech-ai/nastech/issues');
+    };
+
+    const handleSubscribe = async () => {
+        trackPaywallButtonClicked('voluntary_support');
+        const result = await sync.presentPaywall('voluntary_support');
+        if (!result.success) {
+            console.error('Failed to present paywall:', result.error);
+        } else if (result.purchased) {
+            console.log('Purchase successful!');
+        }
+    };
+
+    // Use the multi-click hook for version clicks
+    const handleVersionClick = useMultiClick(() => {
+        // Toggle dev mode
+        const newDevMode = !devModeEnabled;
+        setDevModeEnabled(newDevMode);
+        Modal.alert(
+            t('modals.developerMode'),
+            newDevMode ? t('modals.developerModeEnabled') : t('modals.developerModeDisabled')
+        );
+    }, {
+        requiredClicks: 10,
+        resetTimeout: 2000
+    });
+
+    // Connection status
+    const isGitHubConnected = !!profile.github;
+    const isAnthropicConnected = profile.connectedServices?.includes('anthropic') || false;
+
+    // GitHub connection
+    const [connectingGitHub, connectGitHub] = useNasTechAction(async () => {
+        const params = await getGitHubOAuthParams(auth.credentials!);
+        await openExternalUrl(params.url);
+    });
+
+    // GitHub disconnection
+    const [disconnectingGitHub, handleDisconnectGitHub] = useNasTechAction(async () => {
+        const confirmed = await Modal.confirm(
+            t('modals.disconnectGithub'),
+            t('modals.disconnectGithubConfirm'),
+            { confirmText: t('modals.disconnect'), destructive: true }
+        );
+        if (confirmed) {
+            await disconnectGitHub(auth.credentials!);
+        }
+    });
+
+    // Anthropic connection
+    const [connectingAnthropic, connectAnthropic] = useNasTechAction(async () => {
+        router.push('/settings/connect/claude');
+    });
+
+    // Anthropic disconnection
+    const [disconnectingAnthropic, handleDisconnectAnthropic] = useNasTechAction(async () => {
+        const confirmed = await Modal.confirm(
+            t('modals.disconnectService', { service: 'Claude' }),
+            t('modals.disconnectServiceConfirm', { service: 'Claude' }),
+            { confirmText: t('modals.disconnect'), destructive: true }
+        );
+        if (confirmed) {
+            await disconnectService(auth.credentials!, 'anthropic');
+            await sync.refreshProfile();
+        }
+    });
+
+
+    return (
+
+        <ItemList style={{ paddingTop: 0 }}>
+            {/* App Info Header */}
+            <View style={{ maxWidth: layout.maxWidth, alignSelf: 'center', width: '100%' }}>
+                <View style={{ alignItems: 'center', paddingVertical: 24, backgroundColor: theme.colors.surface, marginTop: 16, borderRadius: 12, marginHorizontal: 16 }}>
+                    {profile.firstName ? (
+                        // Profile view: Avatar + name + version
+                        <>
+                            <View style={{ marginBottom: 12 }}>
+                                <Avatar
+                                    id={profile.id}
+                                    size={90}
+                                    imageUrl={avatarUrl}
+                                    thumbhash={profile.avatar?.thumbhash}
+                                />
+                            </View>
+                            <Text style={{ fontSize: 20, fontWeight: '600', color: theme.colors.text, marginBottom: bio ? 4 : 8 }}>
+                                {displayName}
+                            </Text>
+                            {bio && (
+                                <Text style={{ fontSize: 14, color: theme.colors.textSecondary, textAlign: 'center', marginBottom: 8, paddingHorizontal: 16 }}>
+                                    {bio}
+                                </Text>
+                            )}
+                        </>
+                    ) : (
+                        // Logo view: Original logo + version
+                        <>
+                            <Image
+                                source={theme.dark ? require('@/assets/images/logotype-light.png') : require('@/assets/images/logotype-dark.png')}
+                                contentFit="contain"
+                                style={{ width: 300, height: 90, marginBottom: 12 }}
+                            />
+                        </>
+                    )}
+                </View>
+            </View>
+
+            {/* Connect Terminal - Only show on native platforms */}
+            {Platform.OS !== 'web' && (
+                <ItemGroup>
+                    <Item
+                        title={t('settings.scanQrCodeToAuthenticate')}
+                        icon={<Ionicons name="qr-code-outline" size={29} color="#007AFF" />}
+                        onPress={connectTerminal}
+                        loading={isLoading}
+                        showChevron={false}
+                    />
+                    <Item
+                        title={t('connect.enterUrlManually')}
+                        icon={<Ionicons name="link-outline" size={29} color="#007AFF" />}
+                        onPress={async () => {
+                            const url = await Modal.prompt(
+                                t('modals.authenticateTerminal'),
+                                t('modals.pasteUrlFromTerminal'),
+                                {
+                                    placeholder: 'nastech://terminal?...',
+                                    confirmText: t('common.authenticate')
+                                }
+                            );
+                            if (url?.trim()) {
+                                connectWithUrl(url.trim());
+                            }
+                        }}
+                        showChevron={false}
+                    />
+                </ItemGroup>
+            )}
+
+            {/* Support Us */}
+            <ItemGroup>
+                <Item
+                    title={t('settings.supportUs')}
+                    subtitle={isPro ? t('settings.supportUsSubtitlePro') : t('settings.supportUsSubtitle')}
+                    icon={<Ionicons name="heart" size={29} color="#FF3B30" />}
+                    showChevron={false}
+                    onPress={isPro ? undefined : handleSubscribe}
+                />
+            </ItemGroup>
+
+            <ItemGroup title={t('settings.connectedAccounts')}>
+                <Item
+                    title="Claude Code"
+                    subtitle={isAnthropicConnected
+                        ? t('settingsAccount.statusActive')
+                        : t('settings.connectAccount')
+                    }
+                    icon={
+                        <Image
+                            source={require('@/assets/images/icon-claude.png')}
+                            style={{ width: 29, height: 29 }}
+                            contentFit="contain"
+                        />
+                    }
+                    onPress={isAnthropicConnected ? handleDisconnectAnthropic : connectAnthropic}
+                    loading={connectingAnthropic || disconnectingAnthropic}
+                    showChevron={false}
+                />
+                <Item
+                    title={t('settings.github')}
+                    subtitle={isGitHubConnected
+                        ? t('settings.githubConnected', { login: profile.github?.login! })
+                        : t('settings.connectGithubAccount')
+                    }
+                    icon={
+                        <Ionicons
+                            name="logo-github"
+                            size={29}
+                            color={isGitHubConnected ? theme.colors.status.connected : theme.colors.textSecondary}
+                        />
+                    }
+                    onPress={isGitHubConnected ? handleDisconnectGitHub : connectGitHub}
+                    loading={connectingGitHub || disconnectingGitHub}
+                    showChevron={false}
+                />
+            </ItemGroup>
+
+            {/* Social */}
+            {/* <ItemGroup title={t('settings.social')}>
+                <Item
+                    title={t('navigation.friends')}
+                    subtitle={t('friends.manageFriends')}
+                    icon={<Ionicons name="people-outline" size={29} color="#007AFF" />}
+                    onPress={() => router.push('/friends')}
+                />
+            </ItemGroup> */}
+
+            {/* Machines (sorted: online first, then last seen desc) */}
+            {allMachinesWithOffline.length > 0 && (
+                <ItemGroup title={t('settings.machines')}>
+                    {visibleMachines.map((machine) => {
+                        const isOnline = isMachineOnline(machine);
+                        const host = machine.metadata?.host || 'Unknown';
+                        const displayName = machine.metadata?.displayName;
+                        const platform = machine.metadata?.platform || '';
+
+                        // Use displayName if available, otherwise use host
+                        const title = displayName || host;
+
+                        // Build subtitle: show hostname if different from title, plus platform and status
+                        let subtitle = '';
+                        if (displayName && displayName !== host) {
+                            subtitle = host;
+                        }
+                        if (platform) {
+                            subtitle = subtitle ? `${subtitle} • ${platform}` : platform;
+                        }
+                        subtitle = subtitle ? `${subtitle} • ${isOnline ? t('status.online') : t('status.offline')}` : (isOnline ? t('status.online') : t('status.offline'));
+
+                        return (
+                            <Item
+                                key={machine.id}
+                                title={title}
+                                subtitle={subtitle}
+                                icon={
+                                    <Ionicons
+                                        name="desktop-outline"
+                                        size={29}
+                                        color={isOnline ? theme.colors.status.connected : theme.colors.status.disconnected}
+                                    />
+                                }
+                                onPress={() => router.push(`/machine/${machine.id}`)}
+                            />
+                        );
+                    })}
+                    {offlineMachineCount > 0 && (
+                        <Item
+                            title={showOfflineMachines
+                                ? t('settings.hideOfflineMachines')
+                                : t('settings.showOfflineMachines', { count: offlineMachineCount })}
+                            onPress={() => setShowOfflineMachines(v => !v)}
+                            showChevron={false}
+                            titleStyle={{
+                                textAlign: 'center',
+                                color: theme.colors.textLink,
+                            }}
+                        />
+                    )}
+                </ItemGroup>
+            )}
+
+            {/* Features */}
+            <ItemGroup title={t('settings.features')}>
+                <Item
+                    title={t('settings.account')}
+                    subtitle={t('settings.accountSubtitle')}
+                    icon={<Ionicons name="person-circle-outline" size={29} color="#007AFF" />}
+                    onPress={() => router.push('/settings/account')}
+                />
+                <Item
+                    title={t('settings.appearance')}
+                    subtitle={t('settings.appearanceSubtitle')}
+                    icon={<Ionicons name="color-palette-outline" size={29} color="#5856D6" />}
+                    onPress={() => router.push('/settings/appearance')}
+                />
+                <Item
+                    title={t('settings.voiceAssistant')}
+                    subtitle={t('settings.voiceAssistantSubtitle')}
+                    icon={<Ionicons name="mic-outline" size={29} color="#34C759" />}
+                    onPress={() => router.push('/settings/voice')}
+                />
+                <Item
+                    title="Agent Defaults"
+                    subtitle="Default model, effort, and permissions"
+                    icon={<Ionicons name="options-outline" size={29} color="#5AC8FA" />}
+                    onPress={() => router.push('/settings/agents' as any)}
+                />
+                <Item
+                    title={t('settings.featuresTitle')}
+                    subtitle={t('settings.featuresSubtitle')}
+                    icon={<Ionicons name="flask-outline" size={29} color="#FF9500" />}
+                    onPress={() => router.push('/settings/features')}
+                />
+                {experiments && (
+                    <Item
+                        title={t('settings.usage')}
+                        subtitle={t('settings.usageSubtitle')}
+                        icon={<Ionicons name="analytics-outline" size={29} color="#007AFF" />}
+                        onPress={() => router.push('/settings/usage')}
+                    />
+                )}
+            </ItemGroup>
+
+            {/* Developer */}
+            {(__DEV__ || devModeEnabled) && (
+                <ItemGroup title={t('settings.developer')}>
+                    <Item
+                        title={t('settings.developerTools')}
+                        icon={<Ionicons name="construct-outline" size={29} color="#5856D6" />}
+                        onPress={() => router.push('/dev')}
+                    />
+                </ItemGroup>
+            )}
+
+            {/* About */}
+            <ItemGroup title={t('settings.about')} footer={t('settings.aboutFooter')}>
+                <Item
+                    title={t('settings.whatsNew')}
+                    subtitle={t('settings.whatsNewSubtitle')}
+                    icon={<Ionicons name="sparkles-outline" size={29} color="#FF9500" />}
+                    onPress={() => {
+                        trackWhatsNewClicked();
+                        router.push('/changelog');
+                    }}
+                />
+                <Item
+                    title={t('settings.github')}
+                    icon={<Ionicons name="logo-github" size={29} color={theme.colors.text} />}
+                    detail="nastech-ai/nastech"
+                    onPress={handleGitHub}
+                />
+                <Item
+                    title={t('settings.reportIssue')}
+                    icon={<Ionicons name="bug-outline" size={29} color="#FF3B30" />}
+                    onPress={handleReportIssue}
+                />
+                <Item
+                    title={t('settings.privacyPolicy')}
+                    icon={<Ionicons name="shield-checkmark-outline" size={29} color="#007AFF" />}
+                    onPress={() => openExternalUrl('https://nastech.ai/privacy/')}
+                />
+                <Item
+                    title={t('settings.termsOfService')}
+                    icon={<Ionicons name="document-text-outline" size={29} color="#007AFF" />}
+                    onPress={() => openExternalUrl('https://github.com/nastech-ai/nastech/blob/main/TERMS.md')}
+                />
+                {Platform.OS === 'ios' && (
+                    <Item
+                        title={t('settings.eula')}
+                        icon={<Ionicons name="document-text-outline" size={29} color="#007AFF" />}
+                        onPress={() => openExternalUrl('https://www.apple.com/legal/internet-services/itunes/dev/stdeula/')}
+                    />
+                )}
+                <Item
+                    title={t('common.version')}
+                    subtitle={versionSubtitle}
+                    subtitleLines={2}
+                    detail={versionDetail}
+                    icon={<Ionicons name="information-circle-outline" size={29} color={theme.colors.textSecondary} />}
+                    onPress={handleVersionClick}
+                    showChevron={false}
+                />
+            </ItemGroup>
+
+        </ItemList>
+    );
+});

package/sources/components/SettingsViewWrapper.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { SettingsView } from './SettingsView';
+
+const stylesheet = StyleSheet.create((theme) => ({
+    container: {
+        flex: 1,
+        backgroundColor: theme.colors.groupped.background,
+    },
+}));
+
+export const SettingsViewWrapper = React.memo(() => {
+    const styles = stylesheet;
+
+    return (
+        <View style={styles.container}>
+            <SettingsView />
+        </View>
+    );
+});

package/sources/components/Shaker.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Animated, View, ViewProps, useAnimatedValue } from 'react-native';
+
+export type ShakeInstance = {
+    shake: () => void;
+}
+
+export const Shaker = React.memo(React.forwardRef<ShakeInstance, ViewProps>((props, ref) => {
+    const { style, ...rest } = props;
+    const baseRef = React.useRef<View>(null);
+    const shakeValue = useAnimatedValue(0, { useNativeDriver: true });
+    React.useImperativeHandle(ref, () => ({
+        shake: () => {
+            let offsets = shakeKeyframes();
+            let duration = 300;
+            let animations: Animated.CompositeAnimation[] = [];
+            for (let i = 0; i < offsets.length; i++) {
+                animations.push(Animated.timing(shakeValue, {
+                    toValue: offsets[i],
+                    duration: duration / offsets.length,
+                    useNativeDriver: true
+                }));
+            }
+            Animated.sequence(animations).start();
+        }
+    }));
+    return (
+        <Animated.View ref={baseRef} style={[{ transform: [{ translateX: shakeValue }] }, style]} {...rest} />
+    );
+}));
+
+function shakeKeyframes(amplitude: number = 3.0, count: number = 4, decay: boolean = false) {
+    let keyframes: number[] = [];
+    keyframes.push(0);
+    for (let i = 0; i < count; i++) {
+        let sign = (i % 2 == 0) ? 1.0 : -1.0;
+        let multiplier = decay ? (1.0 / (i + 1)) : 1.0;
+        keyframes.push(amplitude * sign * multiplier);
+    }
+    keyframes.push(0);
+    return keyframes;
+}

package/sources/components/Shaker.web.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { View, ViewProps } from 'react-native';
+
+export type ShakeInstance = {
+    shake: () => void;
+}
+
+export const Shaker = React.memo(React.forwardRef<ShakeInstance, ViewProps>((props, ref) => {
+    const baseRef = React.useRef<View>(null);
+    React.useImperativeHandle(ref, () => ({
+        shake: () => {
+            const shakeElement = baseRef.current as any as HTMLDivElement
+            let offsets = shakeKeyframes();
+            const duration = 300;
+            const animations = [];
+            for (let i = 0; i < offsets.length; i++) {
+                animations.push({
+                    transform: `translateX(${offsets[i]}px)`,
+                    duration: duration / offsets.length,
+                    easing: 'linear'
+                });
+            }
+            shakeElement.animate(animations, {
+                duration: duration,
+                iterations: 1,
+                fill: 'forwards'
+            });
+        }
+    }));
+
+    return (
+        <View ref={baseRef} {...props} />
+    );
+}));
+
+function shakeKeyframes(amplitude: number = 3.0, count: number = 4, decay: boolean = false) {
+    let keyframes: number[] = [];
+    keyframes.push(0);
+    for (let i = 0; i < count; i++) {
+        let sign = (i % 2 == 0) ? 1.0 : -1.0;
+        let multiplier = decay ? (1.0 / (i + 1)) : 1.0;
+        keyframes.push(amplitude * sign * multiplier);
+    }
+    keyframes.push(0);
+    return keyframes;
+}

package/sources/components/ShimmerView.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { View, StyleSheet, ViewStyle } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withRepeat,
+    withTiming,
+    interpolate,
+    Easing,
+    useAnimatedRef,
+    measure,
+} from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+import MaskedView from '@react-native-masked-view/masked-view';
+
+const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
+
+interface ShimmerViewProps {
+    children: React.ReactNode;
+    shimmerColors?: readonly [string, string, ...string[]];
+    shimmerWidthPercent?: number;
+    duration?: number;
+    style?: ViewStyle;
+}
+
+export const ShimmerView = React.memo<ShimmerViewProps>(({
+    children,
+    shimmerColors = ['#E0E0E0', '#F0F0F0', '#F8F8F8', '#F0F0F0', '#E0E0E0'],
+    shimmerWidthPercent = 80,
+    duration = 1500,
+    style,
+}) => {
+    const shimmerTranslate = useSharedValue(0);
+    const containerRef = useAnimatedRef<View>();
+
+    React.useEffect(() => {
+        shimmerTranslate.value = withRepeat(
+            withTiming(1, {
+                duration,
+                easing: Easing.linear,
+            }),
+            -1,
+            false
+        );
+    }, [duration]);
+
+    const animatedStyle = useAnimatedStyle(() => {
+        const measured = measure(containerRef);
+        const width = measured ? measured.width : 0;
+        const shimmerWidth = width * (shimmerWidthPercent / 100);
+        const translateX = interpolate(
+            shimmerTranslate.value,
+            [0, 1],
+            [-shimmerWidth, width]
+        );
+        return {
+            transform: [{ translateX }],
+        };
+    });
+
+    return (
+        <Animated.View ref={containerRef} style={style}>
+            {/* Render invisible children first to establish size */}
+            <View style={styles.hiddenChildren}>
+                {children}
+            </View>
+            
+            {/* Shimmer overlay */}
+            <MaskedView
+                style={StyleSheet.absoluteFillObject}
+                maskElement={
+                    <View style={styles.maskContainer}>
+                        {children}
+                    </View>
+                }
+            >
+                {/* Base background */}
+                <View style={[StyleSheet.absoluteFillObject, styles.background]} />
+
+                {/* Animated shimmer */}
+                <AnimatedLinearGradient
+                    colors={shimmerColors}
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 1, y: 0 }}
+                    style={[
+                        StyleSheet.absoluteFillObject,
+                        animatedStyle,
+                    ]}
+                />
+            </MaskedView>
+        </Animated.View>
+    );
+});
+
+const styles = StyleSheet.create({
+    maskContainer: {
+        flex: 1,
+        backgroundColor: 'transparent',
+    },
+    background: {
+        backgroundColor: '#E0E0E0',
+    },
+    hiddenChildren: {
+        opacity: 0,
+    },
+});