Launch
This commit is contained in:
@@ -1,60 +1,60 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
import { Video, ResizeMode } from 'expo-av';
|
||||
import * as SplashScreen from 'expo-splash-screen';
|
||||
import Animated, { FadeOut } from 'react-native-reanimated';
|
||||
import { useApp } from '../context/AppContext';
|
||||
import { useColors } from '../constants/Colors';
|
||||
|
||||
interface Props {
|
||||
isAppReady: boolean;
|
||||
onAnimationComplete: () => void;
|
||||
}
|
||||
|
||||
export function AnimatedSplashScreen({ isAppReady, onAnimationComplete }: Props) {
|
||||
const [hasPlayedEnough, setHasPlayedEnough] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Ensure the video plays for at least 2 seconds before we allow it to finish,
|
||||
// so it doesn't flash too fast and provides a premium feel.
|
||||
const timer = setTimeout(() => {
|
||||
setHasPlayedEnough(true);
|
||||
}, 2000);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isAppReady && hasPlayedEnough) {
|
||||
onAnimationComplete();
|
||||
}
|
||||
}, [isAppReady, hasPlayedEnough, onAnimationComplete]);
|
||||
|
||||
// Determine the background color to blend perfectly
|
||||
const { isDarkMode, colorPalette } = useApp();
|
||||
const colors = useColors(isDarkMode, colorPalette);
|
||||
return (
|
||||
<Animated.View exiting={FadeOut.duration(600)} style={[StyleSheet.absoluteFill, { zIndex: 9999, backgroundColor: colors.background, alignItems: 'center', justifyContent: 'center' }]}>
|
||||
<Animated.View style={{ width: 220, height: 220, borderRadius: 45, overflow: 'hidden', backgroundColor: colors.surface, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.15, shadowRadius: 15, elevation: 8, transform: [{ scale: 1 }] }}>
|
||||
<Video
|
||||
source={require('../assets/Make_some_light_leaf_animations_delpmaspu_.mp4')}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
resizeMode={ResizeMode.COVER}
|
||||
shouldPlay
|
||||
isMuted
|
||||
isLooping
|
||||
rate={2.0} // Play at 2x speed to make the 8-second video feel punchier as a loading screen
|
||||
onReadyForDisplay={() => {
|
||||
// Instantly hide the native static splash screen as soon as the video is painted
|
||||
SplashScreen.hideAsync().catch(() => { });
|
||||
}}
|
||||
onError={(err) => {
|
||||
console.error("Video loading error:", err);
|
||||
// Fallback in case the video fails to load for any reason
|
||||
SplashScreen.hideAsync().catch(() => { });
|
||||
onAnimationComplete();
|
||||
}}
|
||||
/>
|
||||
</Animated.View>
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
import { Video, ResizeMode } from 'expo-av';
|
||||
import * as SplashScreen from 'expo-splash-screen';
|
||||
import Animated, { FadeOut } from 'react-native-reanimated';
|
||||
import { useApp } from '../context/AppContext';
|
||||
import { useColors } from '../constants/Colors';
|
||||
|
||||
interface Props {
|
||||
isAppReady: boolean;
|
||||
onAnimationComplete: () => void;
|
||||
}
|
||||
|
||||
export function AnimatedSplashScreen({ isAppReady, onAnimationComplete }: Props) {
|
||||
const [hasPlayedEnough, setHasPlayedEnough] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Ensure the video plays for at least 2 seconds before we allow it to finish,
|
||||
// so it doesn't flash too fast and provides a premium feel.
|
||||
const timer = setTimeout(() => {
|
||||
setHasPlayedEnough(true);
|
||||
}, 2000);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isAppReady && hasPlayedEnough) {
|
||||
onAnimationComplete();
|
||||
}
|
||||
}, [isAppReady, hasPlayedEnough, onAnimationComplete]);
|
||||
|
||||
// Determine the background color to blend perfectly
|
||||
const { isDarkMode, colorPalette } = useApp();
|
||||
const colors = useColors(isDarkMode, colorPalette);
|
||||
return (
|
||||
<Animated.View exiting={FadeOut.duration(600)} style={[StyleSheet.absoluteFill, { zIndex: 9999, backgroundColor: colors.background, alignItems: 'center', justifyContent: 'center' }]}>
|
||||
<Animated.View style={{ width: 220, height: 220, borderRadius: 45, overflow: 'hidden', backgroundColor: colors.surface, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.15, shadowRadius: 15, elevation: 8, transform: [{ scale: 1 }] }}>
|
||||
<Video
|
||||
source={require('../assets/Make_some_light_leaf_animations_delpmaspu_.mp4')}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
resizeMode={ResizeMode.COVER}
|
||||
shouldPlay
|
||||
isMuted
|
||||
isLooping
|
||||
rate={2.0} // Play at 2x speed to make the 8-second video feel punchier as a loading screen
|
||||
onReadyForDisplay={() => {
|
||||
// Instantly hide the native static splash screen as soon as the video is painted
|
||||
SplashScreen.hideAsync().catch(() => { });
|
||||
}}
|
||||
onError={(err) => {
|
||||
console.error("Video loading error:", err);
|
||||
// Fallback in case the video fails to load for any reason
|
||||
SplashScreen.hideAsync().catch(() => { });
|
||||
onAnimationComplete();
|
||||
}}
|
||||
/>
|
||||
</Animated.View>
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,7 +6,6 @@ import {
|
||||
StyleSheet,
|
||||
Dimensions,
|
||||
Animated,
|
||||
Platform,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useCoachMarks } from '../context/CoachMarksContext';
|
||||
@@ -19,14 +18,13 @@ const TOOLTIP_VERTICAL_OFFSET = 32;
|
||||
|
||||
export const CoachMarksOverlay: React.FC = () => {
|
||||
const { isActive, currentStep, steps, layouts, next, skip } = useCoachMarks();
|
||||
const { isDarkMode, colorPalette } = useApp();
|
||||
const { isDarkMode, colorPalette, t } = useApp();
|
||||
const colors = useColors(isDarkMode, colorPalette);
|
||||
|
||||
const fadeAnim = useRef(new Animated.Value(0)).current;
|
||||
const scaleAnim = useRef(new Animated.Value(0.88)).current;
|
||||
const pulseAnim = useRef(new Animated.Value(1)).current;
|
||||
|
||||
// Fade in when tour starts or step changes
|
||||
useEffect(() => {
|
||||
if (isActive) {
|
||||
fadeAnim.setValue(0);
|
||||
@@ -36,24 +34,22 @@ export const CoachMarksOverlay: React.FC = () => {
|
||||
Animated.spring(scaleAnim, { toValue: 1, tension: 80, friction: 9, useNativeDriver: true }),
|
||||
]).start();
|
||||
|
||||
// Pulse animation on highlight
|
||||
Animated.loop(
|
||||
Animated.sequence([
|
||||
Animated.timing(pulseAnim, { toValue: 1.06, duration: 900, useNativeDriver: true }),
|
||||
Animated.timing(pulseAnim, { toValue: 1, duration: 900, useNativeDriver: true }),
|
||||
])
|
||||
]),
|
||||
).start();
|
||||
} else {
|
||||
pulseAnim.stopAnimation();
|
||||
}
|
||||
}, [isActive, currentStep]);
|
||||
}, [currentStep, fadeAnim, isActive, pulseAnim, scaleAnim]);
|
||||
|
||||
if (!isActive || steps.length === 0) return null;
|
||||
|
||||
const step = steps[currentStep];
|
||||
const layout = layouts[step.elementKey];
|
||||
|
||||
// Fallback wenn Element noch nicht gemessen
|
||||
const highlight = layout
|
||||
? {
|
||||
x: layout.x - HIGHLIGHT_PADDING,
|
||||
@@ -64,10 +60,13 @@ export const CoachMarksOverlay: React.FC = () => {
|
||||
}
|
||||
: { x: SCREEN_W / 2 - 40, y: SCREEN_H / 2 - 40, w: 80, h: 80, r: 40 };
|
||||
|
||||
// Tooltip-Position berechnen
|
||||
const tooltipW = 260;
|
||||
const tooltipMaxH = 140;
|
||||
let tooltipX = Math.max(12, Math.min(SCREEN_W - tooltipW - 12, highlight.x + highlight.w / 2 - tooltipW / 2));
|
||||
const tooltipX = Math.max(
|
||||
12,
|
||||
Math.min(SCREEN_W - tooltipW - 12, highlight.x + highlight.w / 2 - tooltipW / 2),
|
||||
);
|
||||
|
||||
let tooltipY: number;
|
||||
const spaceBelow = SCREEN_H - (highlight.y + highlight.h);
|
||||
const spaceAbove = highlight.y;
|
||||
@@ -80,39 +79,43 @@ export const CoachMarksOverlay: React.FC = () => {
|
||||
if (tooltipY + tooltipMaxH > SCREEN_H - 60) tooltipY = highlight.y - tooltipMaxH - 24;
|
||||
}
|
||||
|
||||
// Keep coachmark bubbles slightly higher to avoid overlap with bright focus circles.
|
||||
tooltipY -= TOOLTIP_VERTICAL_OFFSET;
|
||||
const minTooltipY = 24;
|
||||
const maxTooltipY = SCREEN_H - tooltipMaxH - 24;
|
||||
tooltipY = Math.max(minTooltipY, Math.min(maxTooltipY, tooltipY));
|
||||
tooltipY = Math.max(24, Math.min(SCREEN_H - tooltipMaxH - 24, tooltipY));
|
||||
|
||||
const arrowPointsUp = tooltipY > highlight.y;
|
||||
|
||||
return (
|
||||
<Animated.View style={[StyleSheet.absoluteFill, styles.root, { opacity: fadeAnim }]} pointerEvents="box-none">
|
||||
{/* Dark overlay — 4 Rechtecke um die Aussparung */}
|
||||
{/* Oben */}
|
||||
<View style={[styles.overlay, { top: 0, left: 0, right: 0, height: Math.max(0, highlight.y) }]} />
|
||||
{/* Links */}
|
||||
<View style={[styles.overlay, {
|
||||
top: highlight.y, left: 0, width: Math.max(0, highlight.x), height: highlight.h,
|
||||
}]} />
|
||||
{/* Rechts */}
|
||||
<View style={[styles.overlay, {
|
||||
top: highlight.y,
|
||||
left: highlight.x + highlight.w,
|
||||
right: 0,
|
||||
height: highlight.h,
|
||||
}]} />
|
||||
{/* Unten */}
|
||||
<View style={[styles.overlay, {
|
||||
top: highlight.y + highlight.h,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}]} />
|
||||
<View
|
||||
style={[
|
||||
styles.overlay,
|
||||
{ top: highlight.y, left: 0, width: Math.max(0, highlight.x), height: highlight.h },
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
styles.overlay,
|
||||
{
|
||||
top: highlight.y,
|
||||
left: highlight.x + highlight.w,
|
||||
right: 0,
|
||||
height: highlight.h,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
styles.overlay,
|
||||
{
|
||||
top: highlight.y + highlight.h,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Pulsierender Ring um das Highlight */}
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.highlightRing,
|
||||
@@ -129,7 +132,6 @@ export const CoachMarksOverlay: React.FC = () => {
|
||||
pointerEvents="none"
|
||||
/>
|
||||
|
||||
{/* Tooltip-Karte */}
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.tooltip,
|
||||
@@ -144,7 +146,6 @@ export const CoachMarksOverlay: React.FC = () => {
|
||||
},
|
||||
]}
|
||||
>
|
||||
{/* Arrow */}
|
||||
<View
|
||||
style={[
|
||||
styles.arrow,
|
||||
@@ -157,7 +158,6 @@ export const CoachMarksOverlay: React.FC = () => {
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Schritt-Indikator */}
|
||||
<View style={styles.stepRow}>
|
||||
{steps.map((_, i) => (
|
||||
<View
|
||||
@@ -176,7 +176,7 @@ export const CoachMarksOverlay: React.FC = () => {
|
||||
|
||||
<View style={styles.tooltipFooter}>
|
||||
<TouchableOpacity onPress={skip} style={styles.skipBtn}>
|
||||
<Text style={[styles.skipText, { color: colors.textMuted }]}>Überspringen</Text>
|
||||
<Text style={[styles.skipText, { color: colors.textMuted }]}>{t.coachSkip}</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={next}
|
||||
@@ -184,7 +184,7 @@ export const CoachMarksOverlay: React.FC = () => {
|
||||
activeOpacity={0.82}
|
||||
>
|
||||
<Text style={[styles.nextText, { color: colors.onPrimary }]}>
|
||||
{currentStep === steps.length - 1 ? 'Fertig' : 'Weiter'}
|
||||
{currentStep === steps.length - 1 ? t.coachDone : t.coachNext}
|
||||
</Text>
|
||||
<Ionicons
|
||||
name={currentStep === steps.length - 1 ? 'checkmark' : 'arrow-forward'}
|
||||
|
||||
@@ -1,102 +1,102 @@
|
||||
import React from 'react';
|
||||
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { ColorPalette } from '../types';
|
||||
import { useColors } from '../constants/Colors';
|
||||
import { SafeImage } from './SafeImage';
|
||||
|
||||
interface PlantCardProps {
|
||||
plant: {
|
||||
name: string;
|
||||
botanicalName?: string;
|
||||
imageUri: string;
|
||||
careInfo: {
|
||||
waterIntervalDays: number;
|
||||
};
|
||||
};
|
||||
width: number;
|
||||
onPress: () => void;
|
||||
t: any;
|
||||
isDark: boolean;
|
||||
colorPalette: ColorPalette;
|
||||
}
|
||||
|
||||
export const PlantCard: React.FC<PlantCardProps> = ({
|
||||
plant,
|
||||
width,
|
||||
onPress,
|
||||
t,
|
||||
isDark,
|
||||
colorPalette,
|
||||
}) => {
|
||||
const colors = useColors(isDark, colorPalette);
|
||||
const isUrgent = plant.careInfo?.waterIntervalDays <= 1;
|
||||
const wateringText = plant.careInfo?.waterIntervalDays
|
||||
? (isUrgent
|
||||
? t.waterToday
|
||||
: t.inXDays.replace('{0}', plant.careInfo.waterIntervalDays.toString()))
|
||||
: t.showDetails; // Default for lexicon entries
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[styles.container, { width, shadowColor: colors.overlayStrong }]}
|
||||
activeOpacity={0.9}
|
||||
onPress={onPress}
|
||||
>
|
||||
<SafeImage uri={plant.imageUri} style={styles.image} />
|
||||
<View style={[styles.gradient, { backgroundColor: colors.overlay }]} />
|
||||
|
||||
{/* Badge */}
|
||||
<View
|
||||
style={[
|
||||
styles.badge,
|
||||
isUrgent
|
||||
? { backgroundColor: colors.warning }
|
||||
: { backgroundColor: colors.overlayStrong, borderWidth: 1, borderColor: colors.heroButtonBorder },
|
||||
]}
|
||||
>
|
||||
<Ionicons name="water" size={10} color={colors.iconOnImage} />
|
||||
<Text style={[styles.badgeText, { color: colors.iconOnImage }]}>{wateringText}</Text>
|
||||
</View>
|
||||
|
||||
{/* Content */}
|
||||
<View style={styles.content}>
|
||||
<Text style={[styles.name, { color: colors.textOnImage }]} numberOfLines={1}>{plant.name}</Text>
|
||||
<Text style={[styles.botanical, { color: colors.heroButton }]} numberOfLines={1}>{plant.botanicalName}</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
aspectRatio: 0.8,
|
||||
borderRadius: 18,
|
||||
overflow: 'hidden',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 6,
|
||||
elevation: 4,
|
||||
},
|
||||
image: { width: '100%', height: '100%', resizeMode: 'cover' },
|
||||
gradient: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
opacity: 0.8,
|
||||
},
|
||||
badge: {
|
||||
position: 'absolute',
|
||||
top: 10,
|
||||
left: 10,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 12,
|
||||
},
|
||||
badgeText: { fontSize: 9, fontWeight: '700' },
|
||||
content: { position: 'absolute', bottom: 14, left: 10, right: 10 },
|
||||
name: { fontSize: 16, fontWeight: '700' },
|
||||
botanical: { fontSize: 11 },
|
||||
});
|
||||
import React from 'react';
|
||||
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { ColorPalette } from '../types';
|
||||
import { useColors } from '../constants/Colors';
|
||||
import { SafeImage } from './SafeImage';
|
||||
|
||||
interface PlantCardProps {
|
||||
plant: {
|
||||
name: string;
|
||||
botanicalName?: string;
|
||||
imageUri: string;
|
||||
careInfo: {
|
||||
waterIntervalDays: number;
|
||||
};
|
||||
};
|
||||
width: number;
|
||||
onPress: () => void;
|
||||
t: any;
|
||||
isDark: boolean;
|
||||
colorPalette: ColorPalette;
|
||||
}
|
||||
|
||||
export const PlantCard: React.FC<PlantCardProps> = ({
|
||||
plant,
|
||||
width,
|
||||
onPress,
|
||||
t,
|
||||
isDark,
|
||||
colorPalette,
|
||||
}) => {
|
||||
const colors = useColors(isDark, colorPalette);
|
||||
const isUrgent = plant.careInfo?.waterIntervalDays <= 1;
|
||||
const wateringText = plant.careInfo?.waterIntervalDays
|
||||
? (isUrgent
|
||||
? t.waterToday
|
||||
: t.inXDays.replace('{0}', plant.careInfo.waterIntervalDays.toString()))
|
||||
: t.showDetails; // Default for lexicon entries
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[styles.container, { width, shadowColor: colors.overlayStrong }]}
|
||||
activeOpacity={0.9}
|
||||
onPress={onPress}
|
||||
>
|
||||
<SafeImage uri={plant.imageUri} style={styles.image} />
|
||||
<View style={[styles.gradient, { backgroundColor: colors.overlay }]} />
|
||||
|
||||
{/* Badge */}
|
||||
<View
|
||||
style={[
|
||||
styles.badge,
|
||||
isUrgent
|
||||
? { backgroundColor: colors.warning }
|
||||
: { backgroundColor: colors.overlayStrong, borderWidth: 1, borderColor: colors.heroButtonBorder },
|
||||
]}
|
||||
>
|
||||
<Ionicons name="water" size={10} color={colors.iconOnImage} />
|
||||
<Text style={[styles.badgeText, { color: colors.iconOnImage }]}>{wateringText}</Text>
|
||||
</View>
|
||||
|
||||
{/* Content */}
|
||||
<View style={styles.content}>
|
||||
<Text style={[styles.name, { color: colors.textOnImage }]} numberOfLines={1}>{plant.name}</Text>
|
||||
<Text style={[styles.botanical, { color: colors.heroButton }]} numberOfLines={1}>{plant.botanicalName}</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
aspectRatio: 0.8,
|
||||
borderRadius: 18,
|
||||
overflow: 'hidden',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 6,
|
||||
elevation: 4,
|
||||
},
|
||||
image: { width: '100%', height: '100%', resizeMode: 'cover' },
|
||||
gradient: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
opacity: 0.8,
|
||||
},
|
||||
badge: {
|
||||
position: 'absolute',
|
||||
top: 10,
|
||||
left: 10,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 12,
|
||||
},
|
||||
badgeText: { fontSize: 9, fontWeight: '700' },
|
||||
content: { position: 'absolute', bottom: 14, left: 10, right: 10 },
|
||||
name: { fontSize: 16, fontWeight: '700' },
|
||||
botanical: { fontSize: 11 },
|
||||
});
|
||||
|
||||
@@ -1,266 +1,266 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Share, Alert } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { ColorPalette, IdentificationResult } from '../types';
|
||||
import { useColors } from '../constants/Colors';
|
||||
import { SafeImage } from './SafeImage';
|
||||
|
||||
interface ResultCardProps {
|
||||
result: IdentificationResult;
|
||||
imageUri: string;
|
||||
onSave: () => void;
|
||||
onClose: () => void;
|
||||
t: any;
|
||||
isDark: boolean;
|
||||
colorPalette: ColorPalette;
|
||||
isGuest?: boolean;
|
||||
}
|
||||
|
||||
export const ResultCard: React.FC<ResultCardProps> = ({
|
||||
result,
|
||||
imageUri,
|
||||
onSave,
|
||||
onClose,
|
||||
t,
|
||||
isDark,
|
||||
colorPalette,
|
||||
isGuest = false,
|
||||
}) => {
|
||||
const colors = useColors(isDark, colorPalette);
|
||||
const insets = useSafeAreaInsets();
|
||||
const [showDetails, setShowDetails] = useState(false);
|
||||
|
||||
const handleShare = async () => {
|
||||
try {
|
||||
await Share.share({
|
||||
message: `I just identified a ${result.name} (${result.botanicalName}) with ${Math.round(result.confidence * 100)}% confidence using GreenLens!`,
|
||||
});
|
||||
} catch (error: any) {
|
||||
Alert.alert('Error', error.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={[styles.container, { backgroundColor: colors.background }]} edges={['top', 'bottom']}>
|
||||
{/* Header */}
|
||||
<View style={[styles.header, { paddingTop: insets.top + 8 }]}>
|
||||
<TouchableOpacity
|
||||
style={[styles.headerBtn, { backgroundColor: colors.heroButton, borderColor: colors.heroButtonBorder }]}
|
||||
onPress={onClose}
|
||||
>
|
||||
<Ionicons name="arrow-back" size={20} color={colors.text} />
|
||||
</TouchableOpacity>
|
||||
<View style={[styles.headerBadge, { backgroundColor: colors.heroButton, borderColor: colors.heroButtonBorder }]}>
|
||||
<Text style={[styles.headerBadgeText, { color: colors.text }]}>{t.result}</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
style={[styles.headerBtn, { backgroundColor: colors.heroButton, borderColor: colors.heroButtonBorder }]}
|
||||
onPress={handleShare}
|
||||
>
|
||||
<Ionicons name="share-outline" size={20} color={colors.text} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={[
|
||||
styles.scrollContent,
|
||||
{ paddingTop: insets.top + 76, paddingBottom: insets.bottom + 36 },
|
||||
]}
|
||||
>
|
||||
{/* Hero Image */}
|
||||
<View style={[styles.heroContainer, { shadowColor: colors.overlayStrong }]}>
|
||||
<SafeImage uri={imageUri} style={styles.heroImage} />
|
||||
<View style={[styles.confidenceBadge, { backgroundColor: colors.heroButton }]}>
|
||||
<Ionicons name="checkmark-circle" size={14} color={colors.success} />
|
||||
<Text style={[styles.confidenceText, { color: colors.success }]}>
|
||||
{Math.round(result.confidence * 100)}% {t.match}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Info */}
|
||||
<Text style={[styles.plantName, { color: colors.text }]}>{result.name}</Text>
|
||||
<Text style={[styles.botanical, { color: colors.textMuted }]}>{result.botanicalName}</Text>
|
||||
<Text style={[styles.description, { color: colors.textSecondary }]}>
|
||||
{result.description || t.noDescription}
|
||||
</Text>
|
||||
|
||||
{/* Care Check */}
|
||||
<View style={styles.careHeader}>
|
||||
<Text style={[styles.sectionTitle, { color: colors.text }]}>{t.careCheck}</Text>
|
||||
<TouchableOpacity onPress={() => setShowDetails(!showDetails)}>
|
||||
<Text style={[styles.detailsToggle, { color: colors.primaryDark }]}>
|
||||
{showDetails ? t.hideDetails : t.showDetails}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.careGrid}>
|
||||
{[
|
||||
{ icon: 'water' as const, label: t.water, value: result.careInfo.waterIntervalDays <= 7 ? t.waterModerate : t.waterLittle, color: colors.info, bg: colors.infoSoft },
|
||||
{ icon: 'sunny' as const, label: t.light, value: result.careInfo.light, color: colors.warning, bg: colors.warningSoft },
|
||||
{ icon: 'thermometer' as const, label: t.temp, value: result.careInfo.temp, color: colors.danger, bg: colors.dangerSoft },
|
||||
].map((item) => (
|
||||
<View key={item.label} style={[styles.careCard, { backgroundColor: colors.surface, borderColor: colors.border }]}>
|
||||
<View style={[styles.careIcon, { backgroundColor: item.bg }]}>
|
||||
<Ionicons name={item.icon} size={16} color={item.color} />
|
||||
</View>
|
||||
<Text style={[styles.careLabel, { color: colors.textMuted }]}>{item.label}</Text>
|
||||
<Text style={[styles.careValue, { color: colors.text }]}>{item.value}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{showDetails && (
|
||||
<View style={[styles.detailsBox, { backgroundColor: colors.surfaceMuted, borderColor: colors.border }]}>
|
||||
<Text style={[styles.detailsTitle, { color: colors.textSecondary }]}>{t.detailedCare}</Text>
|
||||
{[
|
||||
{ text: t.careTextWater.replace('{0}', result.careInfo.waterIntervalDays.toString()), color: colors.success },
|
||||
{ text: t.careTextLight.replace('{0}', result.careInfo.light), color: colors.warning },
|
||||
{ text: t.careTextTemp.replace('{0}', result.careInfo.temp), color: colors.danger },
|
||||
].map((item, i) => (
|
||||
<View key={i} style={styles.detailRow}>
|
||||
<View style={[styles.detailDot, { backgroundColor: item.color }]} />
|
||||
<Text style={[styles.detailText, { color: colors.textSecondary }]}>{item.text}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Save */}
|
||||
<View style={styles.localInfo}>
|
||||
<View style={[styles.localIcon, { borderColor: colors.borderStrong }]} />
|
||||
<Text style={[styles.localText, { color: colors.textMuted }]}>{t.dataSavedLocally}</Text>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.saveBtn,
|
||||
{ backgroundColor: colors.primary, shadowColor: colors.primary },
|
||||
]}
|
||||
activeOpacity={0.8}
|
||||
onPress={onSave}
|
||||
>
|
||||
<Ionicons name={isGuest ? "person-add" : "checkmark-circle"} size={16} color={colors.onPrimary} />
|
||||
<Text style={[styles.saveBtnText, { color: colors.onPrimary }]}>
|
||||
{isGuest ? t.registerToSave : t.addToPlants}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1 },
|
||||
header: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 10,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
headerBtn: {
|
||||
borderRadius: 20,
|
||||
padding: 8,
|
||||
borderWidth: 1,
|
||||
},
|
||||
headerBadge: {
|
||||
borderRadius: 20,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 4,
|
||||
borderWidth: 1,
|
||||
},
|
||||
headerBadgeText: { fontWeight: '700', fontSize: 13 },
|
||||
scrollContent: { paddingHorizontal: 16 },
|
||||
heroContainer: {
|
||||
width: '100%',
|
||||
aspectRatio: 4 / 3,
|
||||
borderRadius: 24,
|
||||
overflow: 'hidden',
|
||||
marginBottom: 20,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.15,
|
||||
shadowRadius: 8,
|
||||
elevation: 6,
|
||||
},
|
||||
heroImage: { width: '100%', height: '100%', resizeMode: 'cover' },
|
||||
confidenceBadge: {
|
||||
position: 'absolute',
|
||||
bottom: 14,
|
||||
left: 14,
|
||||
borderRadius: 20,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
},
|
||||
confidenceText: { fontSize: 11, fontWeight: '700' },
|
||||
plantName: { fontSize: 28, fontWeight: '700', marginBottom: 2 },
|
||||
botanical: { fontSize: 13, fontStyle: 'italic', marginBottom: 14 },
|
||||
description: { fontSize: 13, lineHeight: 20, marginBottom: 24 },
|
||||
careHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-end',
|
||||
marginBottom: 12,
|
||||
},
|
||||
sectionTitle: { fontSize: 16, fontWeight: '700' },
|
||||
detailsToggle: { fontSize: 10, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 0.5 },
|
||||
careGrid: { flexDirection: 'row', gap: 10, marginBottom: 20 },
|
||||
careCard: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
padding: 12,
|
||||
borderRadius: 18,
|
||||
borderWidth: 1,
|
||||
gap: 6,
|
||||
},
|
||||
careIcon: { width: 32, height: 32, borderRadius: 16, justifyContent: 'center', alignItems: 'center' },
|
||||
careLabel: { fontSize: 10, fontWeight: '500' },
|
||||
careValue: {
|
||||
width: '100%',
|
||||
fontSize: 11,
|
||||
lineHeight: 14,
|
||||
fontWeight: '700',
|
||||
textAlign: 'center',
|
||||
flexShrink: 1,
|
||||
},
|
||||
detailsBox: {
|
||||
borderRadius: 18,
|
||||
borderWidth: 1,
|
||||
padding: 16,
|
||||
marginBottom: 20,
|
||||
gap: 10,
|
||||
},
|
||||
detailsTitle: { fontSize: 11, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 0.5 },
|
||||
detailRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 10 },
|
||||
detailDot: { width: 6, height: 6, borderRadius: 3, marginTop: 6 },
|
||||
detailText: { fontSize: 13, flex: 1 },
|
||||
localInfo: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 6, marginBottom: 12 },
|
||||
localIcon: { width: 12, height: 12, borderRadius: 2, borderWidth: 1, borderColor: '#d6d3d1' },
|
||||
localText: { fontSize: 11 },
|
||||
saveBtn: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
backgroundColor: '#4ade80',
|
||||
paddingVertical: 16,
|
||||
borderRadius: 14,
|
||||
shadowColor: '#4ade80',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 6,
|
||||
},
|
||||
saveBtnText: { fontWeight: '700', fontSize: 14 },
|
||||
});
|
||||
import React, { useState } from 'react';
|
||||
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Share, Alert } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { ColorPalette, IdentificationResult } from '../types';
|
||||
import { useColors } from '../constants/Colors';
|
||||
import { SafeImage } from './SafeImage';
|
||||
|
||||
interface ResultCardProps {
|
||||
result: IdentificationResult;
|
||||
imageUri: string;
|
||||
onSave: () => void;
|
||||
onClose: () => void;
|
||||
t: any;
|
||||
isDark: boolean;
|
||||
colorPalette: ColorPalette;
|
||||
isGuest?: boolean;
|
||||
}
|
||||
|
||||
export const ResultCard: React.FC<ResultCardProps> = ({
|
||||
result,
|
||||
imageUri,
|
||||
onSave,
|
||||
onClose,
|
||||
t,
|
||||
isDark,
|
||||
colorPalette,
|
||||
isGuest = false,
|
||||
}) => {
|
||||
const colors = useColors(isDark, colorPalette);
|
||||
const insets = useSafeAreaInsets();
|
||||
const [showDetails, setShowDetails] = useState(false);
|
||||
|
||||
const handleShare = async () => {
|
||||
try {
|
||||
await Share.share({
|
||||
message: `I just identified a ${result.name} (${result.botanicalName}) with ${Math.round(result.confidence * 100)}% confidence using GreenLens!`,
|
||||
});
|
||||
} catch (error: any) {
|
||||
Alert.alert('Error', error.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={[styles.container, { backgroundColor: colors.background }]} edges={['top', 'bottom']}>
|
||||
{/* Header */}
|
||||
<View style={[styles.header, { paddingTop: insets.top + 8 }]}>
|
||||
<TouchableOpacity
|
||||
style={[styles.headerBtn, { backgroundColor: colors.heroButton, borderColor: colors.heroButtonBorder }]}
|
||||
onPress={onClose}
|
||||
>
|
||||
<Ionicons name="arrow-back" size={20} color={colors.text} />
|
||||
</TouchableOpacity>
|
||||
<View style={[styles.headerBadge, { backgroundColor: colors.heroButton, borderColor: colors.heroButtonBorder }]}>
|
||||
<Text style={[styles.headerBadgeText, { color: colors.text }]}>{t.result}</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
style={[styles.headerBtn, { backgroundColor: colors.heroButton, borderColor: colors.heroButtonBorder }]}
|
||||
onPress={handleShare}
|
||||
>
|
||||
<Ionicons name="share-outline" size={20} color={colors.text} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={[
|
||||
styles.scrollContent,
|
||||
{ paddingTop: insets.top + 76, paddingBottom: insets.bottom + 36 },
|
||||
]}
|
||||
>
|
||||
{/* Hero Image */}
|
||||
<View style={[styles.heroContainer, { shadowColor: colors.overlayStrong }]}>
|
||||
<SafeImage uri={imageUri} style={styles.heroImage} />
|
||||
<View style={[styles.confidenceBadge, { backgroundColor: colors.heroButton }]}>
|
||||
<Ionicons name="checkmark-circle" size={14} color={colors.success} />
|
||||
<Text style={[styles.confidenceText, { color: colors.success }]}>
|
||||
{Math.round(result.confidence * 100)}% {t.match}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Info */}
|
||||
<Text style={[styles.plantName, { color: colors.text }]}>{result.name}</Text>
|
||||
<Text style={[styles.botanical, { color: colors.textMuted }]}>{result.botanicalName}</Text>
|
||||
<Text style={[styles.description, { color: colors.textSecondary }]}>
|
||||
{result.description || t.noDescription}
|
||||
</Text>
|
||||
|
||||
{/* Care Check */}
|
||||
<View style={styles.careHeader}>
|
||||
<Text style={[styles.sectionTitle, { color: colors.text }]}>{t.careCheck}</Text>
|
||||
<TouchableOpacity onPress={() => setShowDetails(!showDetails)}>
|
||||
<Text style={[styles.detailsToggle, { color: colors.primaryDark }]}>
|
||||
{showDetails ? t.hideDetails : t.showDetails}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.careGrid}>
|
||||
{[
|
||||
{ icon: 'water' as const, label: t.water, value: result.careInfo.waterIntervalDays <= 7 ? t.waterModerate : t.waterLittle, color: colors.info, bg: colors.infoSoft },
|
||||
{ icon: 'sunny' as const, label: t.light, value: result.careInfo.light, color: colors.warning, bg: colors.warningSoft },
|
||||
{ icon: 'thermometer' as const, label: t.temp, value: result.careInfo.temp, color: colors.danger, bg: colors.dangerSoft },
|
||||
].map((item) => (
|
||||
<View key={item.label} style={[styles.careCard, { backgroundColor: colors.surface, borderColor: colors.border }]}>
|
||||
<View style={[styles.careIcon, { backgroundColor: item.bg }]}>
|
||||
<Ionicons name={item.icon} size={16} color={item.color} />
|
||||
</View>
|
||||
<Text style={[styles.careLabel, { color: colors.textMuted }]}>{item.label}</Text>
|
||||
<Text style={[styles.careValue, { color: colors.text }]}>{item.value}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{showDetails && (
|
||||
<View style={[styles.detailsBox, { backgroundColor: colors.surfaceMuted, borderColor: colors.border }]}>
|
||||
<Text style={[styles.detailsTitle, { color: colors.textSecondary }]}>{t.detailedCare}</Text>
|
||||
{[
|
||||
{ text: t.careTextWater.replace('{0}', result.careInfo.waterIntervalDays.toString()), color: colors.success },
|
||||
{ text: t.careTextLight.replace('{0}', result.careInfo.light), color: colors.warning },
|
||||
{ text: t.careTextTemp.replace('{0}', result.careInfo.temp), color: colors.danger },
|
||||
].map((item, i) => (
|
||||
<View key={i} style={styles.detailRow}>
|
||||
<View style={[styles.detailDot, { backgroundColor: item.color }]} />
|
||||
<Text style={[styles.detailText, { color: colors.textSecondary }]}>{item.text}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Save */}
|
||||
<View style={styles.localInfo}>
|
||||
<View style={[styles.localIcon, { borderColor: colors.borderStrong }]} />
|
||||
<Text style={[styles.localText, { color: colors.textMuted }]}>{t.dataSavedLocally}</Text>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.saveBtn,
|
||||
{ backgroundColor: colors.primary, shadowColor: colors.primary },
|
||||
]}
|
||||
activeOpacity={0.8}
|
||||
onPress={onSave}
|
||||
>
|
||||
<Ionicons name={isGuest ? "person-add" : "checkmark-circle"} size={16} color={colors.onPrimary} />
|
||||
<Text style={[styles.saveBtnText, { color: colors.onPrimary }]}>
|
||||
{isGuest ? t.registerToSave : t.addToPlants}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1 },
|
||||
header: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 10,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
headerBtn: {
|
||||
borderRadius: 20,
|
||||
padding: 8,
|
||||
borderWidth: 1,
|
||||
},
|
||||
headerBadge: {
|
||||
borderRadius: 20,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 4,
|
||||
borderWidth: 1,
|
||||
},
|
||||
headerBadgeText: { fontWeight: '700', fontSize: 13 },
|
||||
scrollContent: { paddingHorizontal: 16 },
|
||||
heroContainer: {
|
||||
width: '100%',
|
||||
aspectRatio: 4 / 3,
|
||||
borderRadius: 24,
|
||||
overflow: 'hidden',
|
||||
marginBottom: 20,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.15,
|
||||
shadowRadius: 8,
|
||||
elevation: 6,
|
||||
},
|
||||
heroImage: { width: '100%', height: '100%', resizeMode: 'cover' },
|
||||
confidenceBadge: {
|
||||
position: 'absolute',
|
||||
bottom: 14,
|
||||
left: 14,
|
||||
borderRadius: 20,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
},
|
||||
confidenceText: { fontSize: 11, fontWeight: '700' },
|
||||
plantName: { fontSize: 28, fontWeight: '700', marginBottom: 2 },
|
||||
botanical: { fontSize: 13, fontStyle: 'italic', marginBottom: 14 },
|
||||
description: { fontSize: 13, lineHeight: 20, marginBottom: 24 },
|
||||
careHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-end',
|
||||
marginBottom: 12,
|
||||
},
|
||||
sectionTitle: { fontSize: 16, fontWeight: '700' },
|
||||
detailsToggle: { fontSize: 10, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 0.5 },
|
||||
careGrid: { flexDirection: 'row', gap: 10, marginBottom: 20 },
|
||||
careCard: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
padding: 12,
|
||||
borderRadius: 18,
|
||||
borderWidth: 1,
|
||||
gap: 6,
|
||||
},
|
||||
careIcon: { width: 32, height: 32, borderRadius: 16, justifyContent: 'center', alignItems: 'center' },
|
||||
careLabel: { fontSize: 10, fontWeight: '500' },
|
||||
careValue: {
|
||||
width: '100%',
|
||||
fontSize: 11,
|
||||
lineHeight: 14,
|
||||
fontWeight: '700',
|
||||
textAlign: 'center',
|
||||
flexShrink: 1,
|
||||
},
|
||||
detailsBox: {
|
||||
borderRadius: 18,
|
||||
borderWidth: 1,
|
||||
padding: 16,
|
||||
marginBottom: 20,
|
||||
gap: 10,
|
||||
},
|
||||
detailsTitle: { fontSize: 11, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 0.5 },
|
||||
detailRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 10 },
|
||||
detailDot: { width: 6, height: 6, borderRadius: 3, marginTop: 6 },
|
||||
detailText: { fontSize: 13, flex: 1 },
|
||||
localInfo: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 6, marginBottom: 12 },
|
||||
localIcon: { width: 12, height: 12, borderRadius: 2, borderWidth: 1, borderColor: '#d6d3d1' },
|
||||
localText: { fontSize: 11 },
|
||||
saveBtn: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
backgroundColor: '#4ade80',
|
||||
paddingVertical: 16,
|
||||
borderRadius: 14,
|
||||
shadowColor: '#4ade80',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 6,
|
||||
},
|
||||
saveBtnText: { fontWeight: '700', fontSize: 14 },
|
||||
});
|
||||
|
||||
@@ -1,134 +1,134 @@
|
||||
import React from 'react';
|
||||
import { Image, ImageProps, StyleSheet, Text, View } from 'react-native';
|
||||
import {
|
||||
DEFAULT_PLANT_IMAGE_URI,
|
||||
getCategoryFallbackImage,
|
||||
getPlantImageSourceFallbackUri,
|
||||
getWikimediaFilePathFromThumbnailUrl,
|
||||
resolveImageUri,
|
||||
tryResolveImageUri,
|
||||
} from '../utils/imageUri';
|
||||
|
||||
type SafeImageFallbackMode = 'category' | 'default' | 'none';
|
||||
|
||||
interface SafeImageProps extends Omit<ImageProps, 'source'> {
|
||||
uri?: string | null;
|
||||
categories?: string[];
|
||||
fallbackMode?: SafeImageFallbackMode;
|
||||
placeholderLabel?: string;
|
||||
}
|
||||
|
||||
const getPlaceholderInitial = (label?: string): string => {
|
||||
if (!label) return '?';
|
||||
const trimmed = label.trim();
|
||||
if (!trimmed) return '?';
|
||||
return trimmed.charAt(0).toUpperCase();
|
||||
};
|
||||
|
||||
export const SafeImage: React.FC<SafeImageProps> = ({
|
||||
uri,
|
||||
categories,
|
||||
fallbackMode = 'category',
|
||||
placeholderLabel,
|
||||
onError,
|
||||
style,
|
||||
...props
|
||||
}) => {
|
||||
const categoryFallback = categories && categories.length > 0
|
||||
? getCategoryFallbackImage(categories)
|
||||
: DEFAULT_PLANT_IMAGE_URI;
|
||||
const selectedFallback = fallbackMode === 'category'
|
||||
? categoryFallback
|
||||
: DEFAULT_PLANT_IMAGE_URI;
|
||||
|
||||
const [resolvedUri, setResolvedUri] = React.useState<string>(() => {
|
||||
const strictResolved = tryResolveImageUri(uri);
|
||||
if (strictResolved) return strictResolved;
|
||||
return fallbackMode === 'none' ? '' : selectedFallback;
|
||||
});
|
||||
const [showPlaceholder, setShowPlaceholder] = React.useState<boolean>(() => {
|
||||
if (fallbackMode !== 'none') return false;
|
||||
return !tryResolveImageUri(uri);
|
||||
});
|
||||
const [retryCount, setRetryCount] = React.useState(0);
|
||||
const lastAttemptUri = React.useRef<string | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
const strictResolved = tryResolveImageUri(uri);
|
||||
setResolvedUri(strictResolved || (fallbackMode === 'none' ? '' : selectedFallback));
|
||||
setShowPlaceholder(fallbackMode === 'none' && !strictResolved);
|
||||
setRetryCount(0);
|
||||
lastAttemptUri.current = strictResolved;
|
||||
}, [uri, fallbackMode, selectedFallback]);
|
||||
|
||||
if (fallbackMode === 'none' && showPlaceholder) {
|
||||
return (
|
||||
<View style={[styles.placeholder, style]}>
|
||||
<Text style={styles.placeholderText}>{getPlaceholderInitial(placeholderLabel)}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Image
|
||||
{...props}
|
||||
style={style}
|
||||
source={{
|
||||
uri: resolvedUri || selectedFallback
|
||||
}}
|
||||
onError={(event) => {
|
||||
onError?.(event);
|
||||
|
||||
const currentUri = resolvedUri || selectedFallback;
|
||||
|
||||
// Smart Retry Logic for Wikimedia (first failure only)
|
||||
if (retryCount === 0 && currentUri.includes('upload.wikimedia.org')) {
|
||||
const fileName = getWikimediaFilePathFromThumbnailUrl(currentUri);
|
||||
if (fileName) {
|
||||
const redirectUrl = `https://commons.wikimedia.org/wiki/Special:FilePath/${encodeURIComponent(fileName)}`;
|
||||
setRetryCount(1);
|
||||
setResolvedUri(redirectUrl);
|
||||
lastAttemptUri.current = redirectUrl;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const sourceFallbackUri = getPlantImageSourceFallbackUri(uri);
|
||||
if (sourceFallbackUri && sourceFallbackUri !== currentUri && lastAttemptUri.current !== sourceFallbackUri) {
|
||||
setResolvedUri(sourceFallbackUri);
|
||||
lastAttemptUri.current = sourceFallbackUri;
|
||||
return;
|
||||
}
|
||||
|
||||
// If we get here, either it wasn't a Wikimedia URL, or filename extraction failed,
|
||||
// or the retry itself failed.
|
||||
if (fallbackMode === 'none') {
|
||||
setShowPlaceholder(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setResolvedUri((current) => {
|
||||
if (current === DEFAULT_PLANT_IMAGE_URI) return current;
|
||||
if (current === selectedFallback) return DEFAULT_PLANT_IMAGE_URI;
|
||||
return selectedFallback;
|
||||
});
|
||||
|
||||
// Prevent infinite loops if fallbacks also fail
|
||||
setRetryCount(current => current + 1);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
placeholder: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#e7ece8',
|
||||
},
|
||||
placeholderText: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: '#5f6f63',
|
||||
},
|
||||
});
|
||||
import React from 'react';
|
||||
import { Image, ImageProps, StyleSheet, Text, View } from 'react-native';
|
||||
import {
|
||||
DEFAULT_PLANT_IMAGE_URI,
|
||||
getCategoryFallbackImage,
|
||||
getPlantImageSourceFallbackUri,
|
||||
getWikimediaFilePathFromThumbnailUrl,
|
||||
resolveImageUri,
|
||||
tryResolveImageUri,
|
||||
} from '../utils/imageUri';
|
||||
|
||||
type SafeImageFallbackMode = 'category' | 'default' | 'none';
|
||||
|
||||
interface SafeImageProps extends Omit<ImageProps, 'source'> {
|
||||
uri?: string | null;
|
||||
categories?: string[];
|
||||
fallbackMode?: SafeImageFallbackMode;
|
||||
placeholderLabel?: string;
|
||||
}
|
||||
|
||||
const getPlaceholderInitial = (label?: string): string => {
|
||||
if (!label) return '?';
|
||||
const trimmed = label.trim();
|
||||
if (!trimmed) return '?';
|
||||
return trimmed.charAt(0).toUpperCase();
|
||||
};
|
||||
|
||||
export const SafeImage: React.FC<SafeImageProps> = ({
|
||||
uri,
|
||||
categories,
|
||||
fallbackMode = 'category',
|
||||
placeholderLabel,
|
||||
onError,
|
||||
style,
|
||||
...props
|
||||
}) => {
|
||||
const categoryFallback = categories && categories.length > 0
|
||||
? getCategoryFallbackImage(categories)
|
||||
: DEFAULT_PLANT_IMAGE_URI;
|
||||
const selectedFallback = fallbackMode === 'category'
|
||||
? categoryFallback
|
||||
: DEFAULT_PLANT_IMAGE_URI;
|
||||
|
||||
const [resolvedUri, setResolvedUri] = React.useState<string>(() => {
|
||||
const strictResolved = tryResolveImageUri(uri);
|
||||
if (strictResolved) return strictResolved;
|
||||
return fallbackMode === 'none' ? '' : selectedFallback;
|
||||
});
|
||||
const [showPlaceholder, setShowPlaceholder] = React.useState<boolean>(() => {
|
||||
if (fallbackMode !== 'none') return false;
|
||||
return !tryResolveImageUri(uri);
|
||||
});
|
||||
const [retryCount, setRetryCount] = React.useState(0);
|
||||
const lastAttemptUri = React.useRef<string | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
const strictResolved = tryResolveImageUri(uri);
|
||||
setResolvedUri(strictResolved || (fallbackMode === 'none' ? '' : selectedFallback));
|
||||
setShowPlaceholder(fallbackMode === 'none' && !strictResolved);
|
||||
setRetryCount(0);
|
||||
lastAttemptUri.current = strictResolved;
|
||||
}, [uri, fallbackMode, selectedFallback]);
|
||||
|
||||
if (fallbackMode === 'none' && showPlaceholder) {
|
||||
return (
|
||||
<View style={[styles.placeholder, style]}>
|
||||
<Text style={styles.placeholderText}>{getPlaceholderInitial(placeholderLabel)}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Image
|
||||
{...props}
|
||||
style={style}
|
||||
source={{
|
||||
uri: resolvedUri || selectedFallback
|
||||
}}
|
||||
onError={(event) => {
|
||||
onError?.(event);
|
||||
|
||||
const currentUri = resolvedUri || selectedFallback;
|
||||
|
||||
// Smart Retry Logic for Wikimedia (first failure only)
|
||||
if (retryCount === 0 && currentUri.includes('upload.wikimedia.org')) {
|
||||
const fileName = getWikimediaFilePathFromThumbnailUrl(currentUri);
|
||||
if (fileName) {
|
||||
const redirectUrl = `https://commons.wikimedia.org/wiki/Special:FilePath/${encodeURIComponent(fileName)}`;
|
||||
setRetryCount(1);
|
||||
setResolvedUri(redirectUrl);
|
||||
lastAttemptUri.current = redirectUrl;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const sourceFallbackUri = getPlantImageSourceFallbackUri(uri);
|
||||
if (sourceFallbackUri && sourceFallbackUri !== currentUri && lastAttemptUri.current !== sourceFallbackUri) {
|
||||
setResolvedUri(sourceFallbackUri);
|
||||
lastAttemptUri.current = sourceFallbackUri;
|
||||
return;
|
||||
}
|
||||
|
||||
// If we get here, either it wasn't a Wikimedia URL, or filename extraction failed,
|
||||
// or the retry itself failed.
|
||||
if (fallbackMode === 'none') {
|
||||
setShowPlaceholder(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setResolvedUri((current) => {
|
||||
if (current === DEFAULT_PLANT_IMAGE_URI) return current;
|
||||
if (current === selectedFallback) return DEFAULT_PLANT_IMAGE_URI;
|
||||
return selectedFallback;
|
||||
});
|
||||
|
||||
// Prevent infinite loops if fallbacks also fail
|
||||
setRetryCount(current => current + 1);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
placeholder: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#e7ece8',
|
||||
},
|
||||
placeholderText: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: '#5f6f63',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,70 +1,70 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { View, Text, Animated, StyleSheet, Image } from 'react-native';
|
||||
|
||||
export default function SplashScreen() {
|
||||
const fadeAnim = useRef(new Animated.Value(0)).current;
|
||||
|
||||
useEffect(() => {
|
||||
Animated.timing(fadeAnim, {
|
||||
toValue: 1,
|
||||
duration: 800,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Animated.View style={[styles.content, { opacity: fadeAnim }]}>
|
||||
<View style={styles.iconContainer}>
|
||||
<Image
|
||||
source={require('../assets/icon.png')}
|
||||
style={styles.icon}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
</View>
|
||||
<Text style={styles.title}>GreenLens</Text>
|
||||
<Text style={styles.subtitle}>Identify any plant</Text>
|
||||
</Animated.View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#1c1917',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
content: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
iconContainer: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: 24,
|
||||
backgroundColor: '#ffffff',
|
||||
elevation: 8,
|
||||
shadowColor: '#4ade80',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 12,
|
||||
marginBottom: 8,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
icon: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
title: {
|
||||
fontSize: 36,
|
||||
fontWeight: '700',
|
||||
color: '#fafaf9',
|
||||
marginTop: 16,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 16,
|
||||
color: '#a8a29e',
|
||||
marginTop: 8,
|
||||
},
|
||||
});
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { View, Text, Animated, StyleSheet, Image } from 'react-native';
|
||||
|
||||
export default function SplashScreen() {
|
||||
const fadeAnim = useRef(new Animated.Value(0)).current;
|
||||
|
||||
useEffect(() => {
|
||||
Animated.timing(fadeAnim, {
|
||||
toValue: 1,
|
||||
duration: 800,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Animated.View style={[styles.content, { opacity: fadeAnim }]}>
|
||||
<View style={styles.iconContainer}>
|
||||
<Image
|
||||
source={require('../assets/icon.png')}
|
||||
style={styles.icon}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
</View>
|
||||
<Text style={styles.title}>GreenLens</Text>
|
||||
<Text style={styles.subtitle}>Identify any plant</Text>
|
||||
</Animated.View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#1c1917',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
content: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
iconContainer: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: 24,
|
||||
backgroundColor: '#ffffff',
|
||||
elevation: 8,
|
||||
shadowColor: '#4ade80',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 12,
|
||||
marginBottom: 8,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
icon: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
title: {
|
||||
fontSize: 36,
|
||||
fontWeight: '700',
|
||||
color: '#fafaf9',
|
||||
marginTop: 16,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 16,
|
||||
color: '#a8a29e',
|
||||
marginTop: 8,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,108 +1,108 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { StyleSheet, View } from 'react-native';
|
||||
import { AppColors } from '../constants/Colors';
|
||||
|
||||
interface ThemeBackdropProps {
|
||||
colors: AppColors;
|
||||
}
|
||||
|
||||
const texturePoints = [
|
||||
[4, 6, 2], [12, 14, 1], [20, 9, 2], [26, 19, 1], [34, 8, 2], [42, 16, 1],
|
||||
[50, 10, 1], [58, 18, 2], [66, 7, 1], [74, 15, 2], [82, 11, 1], [90, 17, 2],
|
||||
[8, 30, 1], [16, 25, 2], [24, 33, 1], [32, 27, 2], [40, 35, 1], [48, 28, 2],
|
||||
[56, 36, 1], [64, 26, 2], [72, 34, 1], [80, 29, 2], [88, 37, 1], [94, 31, 2],
|
||||
[6, 48, 2], [14, 44, 1], [22, 52, 2], [30, 46, 1], [38, 54, 2], [46, 49, 1],
|
||||
[54, 56, 2], [62, 45, 1], [70, 53, 2], [78, 47, 1], [86, 55, 2], [92, 50, 1],
|
||||
[10, 70, 1], [18, 64, 2], [26, 72, 1], [34, 67, 2], [42, 74, 1], [50, 68, 2],
|
||||
[58, 76, 1], [66, 65, 2], [74, 73, 1], [82, 69, 2], [90, 77, 1], [96, 71, 2],
|
||||
];
|
||||
|
||||
const parseColor = (value: string) => {
|
||||
if (value.startsWith('#')) {
|
||||
const cleaned = value.replace('#', '');
|
||||
const normalized = cleaned.length === 3
|
||||
? cleaned.split('').map((c) => `${c}${c}`).join('')
|
||||
: cleaned;
|
||||
const int = Number.parseInt(normalized, 16);
|
||||
return {
|
||||
r: (int >> 16) & 255,
|
||||
g: (int >> 8) & 255,
|
||||
b: int & 255,
|
||||
a: 1,
|
||||
};
|
||||
}
|
||||
|
||||
const match = value.match(/rgba?\(([^)]+)\)/i);
|
||||
if (!match) return { r: 0, g: 0, b: 0, a: 0 };
|
||||
const parts = match[1].split(',').map((part) => part.trim());
|
||||
return {
|
||||
r: Number.parseFloat(parts[0]) || 0,
|
||||
g: Number.parseFloat(parts[1]) || 0,
|
||||
b: Number.parseFloat(parts[2]) || 0,
|
||||
a: parts.length > 3 ? Number.parseFloat(parts[3]) || 0 : 1,
|
||||
};
|
||||
};
|
||||
|
||||
const mixColor = (start: string, end: string, ratio: number) => {
|
||||
const a = parseColor(start);
|
||||
const b = parseColor(end);
|
||||
const t = Math.max(0, Math.min(1, ratio));
|
||||
const r = Math.round(a.r + (b.r - a.r) * t);
|
||||
const g = Math.round(a.g + (b.g - a.g) * t);
|
||||
const bl = Math.round(a.b + (b.b - a.b) * t);
|
||||
const alpha = a.a + (b.a - a.a) * t;
|
||||
return `rgba(${r}, ${g}, ${bl}, ${alpha})`;
|
||||
};
|
||||
|
||||
const ThemeBackdropInner: React.FC<ThemeBackdropProps> = ({ colors }) => {
|
||||
const gradientStrips = useMemo(() =>
|
||||
Array.from({ length: 18 }).map((_, index, arr) => {
|
||||
const ratio = index / (arr.length - 1);
|
||||
return mixColor(colors.pageGradientStart, colors.pageGradientEnd, ratio);
|
||||
}),
|
||||
[colors.pageGradientStart, colors.pageGradientEnd]);
|
||||
|
||||
return (
|
||||
<View pointerEvents="none" style={[StyleSheet.absoluteFill, { backgroundColor: colors.pageBase }]}>
|
||||
<View style={styles.gradientLayer}>
|
||||
{gradientStrips.map((stripColor, index) => (
|
||||
<View
|
||||
key={`strip-${index}`}
|
||||
style={[styles.gradientStrip, { backgroundColor: stripColor }]}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
<View style={styles.textureLayer}>
|
||||
{texturePoints.map(([x, y, size], index) => (
|
||||
<View
|
||||
key={index}
|
||||
style={[
|
||||
styles.noiseDot,
|
||||
{
|
||||
left: `${x}%`,
|
||||
top: `${y}%`,
|
||||
width: size,
|
||||
height: size,
|
||||
borderRadius: size / 2,
|
||||
backgroundColor: colors.pageTexture,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export const ThemeBackdrop = React.memo(ThemeBackdropInner);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
gradientLayer: { ...StyleSheet.absoluteFillObject },
|
||||
gradientStrip: { flex: 1 },
|
||||
textureLayer: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
},
|
||||
noiseDot: {
|
||||
position: 'absolute',
|
||||
},
|
||||
});
|
||||
import React, { useMemo } from 'react';
|
||||
import { StyleSheet, View } from 'react-native';
|
||||
import { AppColors } from '../constants/Colors';
|
||||
|
||||
interface ThemeBackdropProps {
|
||||
colors: AppColors;
|
||||
}
|
||||
|
||||
const texturePoints = [
|
||||
[4, 6, 2], [12, 14, 1], [20, 9, 2], [26, 19, 1], [34, 8, 2], [42, 16, 1],
|
||||
[50, 10, 1], [58, 18, 2], [66, 7, 1], [74, 15, 2], [82, 11, 1], [90, 17, 2],
|
||||
[8, 30, 1], [16, 25, 2], [24, 33, 1], [32, 27, 2], [40, 35, 1], [48, 28, 2],
|
||||
[56, 36, 1], [64, 26, 2], [72, 34, 1], [80, 29, 2], [88, 37, 1], [94, 31, 2],
|
||||
[6, 48, 2], [14, 44, 1], [22, 52, 2], [30, 46, 1], [38, 54, 2], [46, 49, 1],
|
||||
[54, 56, 2], [62, 45, 1], [70, 53, 2], [78, 47, 1], [86, 55, 2], [92, 50, 1],
|
||||
[10, 70, 1], [18, 64, 2], [26, 72, 1], [34, 67, 2], [42, 74, 1], [50, 68, 2],
|
||||
[58, 76, 1], [66, 65, 2], [74, 73, 1], [82, 69, 2], [90, 77, 1], [96, 71, 2],
|
||||
];
|
||||
|
||||
const parseColor = (value: string) => {
|
||||
if (value.startsWith('#')) {
|
||||
const cleaned = value.replace('#', '');
|
||||
const normalized = cleaned.length === 3
|
||||
? cleaned.split('').map((c) => `${c}${c}`).join('')
|
||||
: cleaned;
|
||||
const int = Number.parseInt(normalized, 16);
|
||||
return {
|
||||
r: (int >> 16) & 255,
|
||||
g: (int >> 8) & 255,
|
||||
b: int & 255,
|
||||
a: 1,
|
||||
};
|
||||
}
|
||||
|
||||
const match = value.match(/rgba?\(([^)]+)\)/i);
|
||||
if (!match) return { r: 0, g: 0, b: 0, a: 0 };
|
||||
const parts = match[1].split(',').map((part) => part.trim());
|
||||
return {
|
||||
r: Number.parseFloat(parts[0]) || 0,
|
||||
g: Number.parseFloat(parts[1]) || 0,
|
||||
b: Number.parseFloat(parts[2]) || 0,
|
||||
a: parts.length > 3 ? Number.parseFloat(parts[3]) || 0 : 1,
|
||||
};
|
||||
};
|
||||
|
||||
const mixColor = (start: string, end: string, ratio: number) => {
|
||||
const a = parseColor(start);
|
||||
const b = parseColor(end);
|
||||
const t = Math.max(0, Math.min(1, ratio));
|
||||
const r = Math.round(a.r + (b.r - a.r) * t);
|
||||
const g = Math.round(a.g + (b.g - a.g) * t);
|
||||
const bl = Math.round(a.b + (b.b - a.b) * t);
|
||||
const alpha = a.a + (b.a - a.a) * t;
|
||||
return `rgba(${r}, ${g}, ${bl}, ${alpha})`;
|
||||
};
|
||||
|
||||
const ThemeBackdropInner: React.FC<ThemeBackdropProps> = ({ colors }) => {
|
||||
const gradientStrips = useMemo(() =>
|
||||
Array.from({ length: 18 }).map((_, index, arr) => {
|
||||
const ratio = index / (arr.length - 1);
|
||||
return mixColor(colors.pageGradientStart, colors.pageGradientEnd, ratio);
|
||||
}),
|
||||
[colors.pageGradientStart, colors.pageGradientEnd]);
|
||||
|
||||
return (
|
||||
<View pointerEvents="none" style={[StyleSheet.absoluteFill, { backgroundColor: colors.pageBase }]}>
|
||||
<View style={styles.gradientLayer}>
|
||||
{gradientStrips.map((stripColor, index) => (
|
||||
<View
|
||||
key={`strip-${index}`}
|
||||
style={[styles.gradientStrip, { backgroundColor: stripColor }]}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
<View style={styles.textureLayer}>
|
||||
{texturePoints.map(([x, y, size], index) => (
|
||||
<View
|
||||
key={index}
|
||||
style={[
|
||||
styles.noiseDot,
|
||||
{
|
||||
left: `${x}%`,
|
||||
top: `${y}%`,
|
||||
width: size,
|
||||
height: size,
|
||||
borderRadius: size / 2,
|
||||
backgroundColor: colors.pageTexture,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export const ThemeBackdrop = React.memo(ThemeBackdropInner);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
gradientLayer: { ...StyleSheet.absoluteFillObject },
|
||||
gradientStrip: { flex: 1 },
|
||||
textureLayer: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
},
|
||||
noiseDot: {
|
||||
position: 'absolute',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,79 +1,79 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Animated, Text, StyleSheet, View } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useColors } from '../constants/Colors';
|
||||
import { ColorPalette } from '../types';
|
||||
|
||||
interface ToastProps {
|
||||
message: string;
|
||||
isVisible: boolean;
|
||||
onClose: () => void;
|
||||
isDark?: boolean;
|
||||
colorPalette?: ColorPalette;
|
||||
}
|
||||
|
||||
export const Toast: React.FC<ToastProps> = ({
|
||||
message,
|
||||
isVisible,
|
||||
onClose,
|
||||
isDark = false,
|
||||
colorPalette = 'forest',
|
||||
}) => {
|
||||
const colors = useColors(isDark, colorPalette);
|
||||
const opacity = useRef(new Animated.Value(0)).current;
|
||||
const translateY = useRef(new Animated.Value(20)).current;
|
||||
|
||||
useEffect(() => {
|
||||
if (isVisible) {
|
||||
Animated.parallel([
|
||||
Animated.timing(opacity, { toValue: 1, duration: 300, useNativeDriver: true }),
|
||||
Animated.timing(translateY, { toValue: 0, duration: 300, useNativeDriver: true }),
|
||||
]).start();
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
Animated.parallel([
|
||||
Animated.timing(opacity, { toValue: 0, duration: 300, useNativeDriver: true }),
|
||||
Animated.timing(translateY, { toValue: 20, duration: 300, useNativeDriver: true }),
|
||||
]).start(() => onClose());
|
||||
}, 3000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [isVisible]);
|
||||
|
||||
if (!isVisible) return null;
|
||||
|
||||
return (
|
||||
<Animated.View style={[styles.container, { opacity, transform: [{ translateY }] }]}>
|
||||
<View style={[styles.toast, { backgroundColor: colors.surface, shadowColor: colors.overlayStrong }]}>
|
||||
<Ionicons name="checkmark-circle" size={18} color={colors.success} />
|
||||
<Text style={[styles.text, { color: colors.text }]}>{message}</Text>
|
||||
</View>
|
||||
</Animated.View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
position: 'absolute',
|
||||
bottom: 100,
|
||||
left: 0,
|
||||
right: 0,
|
||||
alignItems: 'center',
|
||||
zIndex: 70,
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
toast: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 24,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 8,
|
||||
elevation: 8,
|
||||
},
|
||||
text: { fontSize: 13, fontWeight: '500' },
|
||||
});
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Animated, Text, StyleSheet, View } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useColors } from '../constants/Colors';
|
||||
import { ColorPalette } from '../types';
|
||||
|
||||
interface ToastProps {
|
||||
message: string;
|
||||
isVisible: boolean;
|
||||
onClose: () => void;
|
||||
isDark?: boolean;
|
||||
colorPalette?: ColorPalette;
|
||||
}
|
||||
|
||||
export const Toast: React.FC<ToastProps> = ({
|
||||
message,
|
||||
isVisible,
|
||||
onClose,
|
||||
isDark = false,
|
||||
colorPalette = 'forest',
|
||||
}) => {
|
||||
const colors = useColors(isDark, colorPalette);
|
||||
const opacity = useRef(new Animated.Value(0)).current;
|
||||
const translateY = useRef(new Animated.Value(20)).current;
|
||||
|
||||
useEffect(() => {
|
||||
if (isVisible) {
|
||||
Animated.parallel([
|
||||
Animated.timing(opacity, { toValue: 1, duration: 300, useNativeDriver: true }),
|
||||
Animated.timing(translateY, { toValue: 0, duration: 300, useNativeDriver: true }),
|
||||
]).start();
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
Animated.parallel([
|
||||
Animated.timing(opacity, { toValue: 0, duration: 300, useNativeDriver: true }),
|
||||
Animated.timing(translateY, { toValue: 20, duration: 300, useNativeDriver: true }),
|
||||
]).start(() => onClose());
|
||||
}, 3000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [isVisible]);
|
||||
|
||||
if (!isVisible) return null;
|
||||
|
||||
return (
|
||||
<Animated.View style={[styles.container, { opacity, transform: [{ translateY }] }]}>
|
||||
<View style={[styles.toast, { backgroundColor: colors.surface, shadowColor: colors.overlayStrong }]}>
|
||||
<Ionicons name="checkmark-circle" size={18} color={colors.success} />
|
||||
<Text style={[styles.text, { color: colors.text }]}>{message}</Text>
|
||||
</View>
|
||||
</Animated.View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
position: 'absolute',
|
||||
bottom: 100,
|
||||
left: 0,
|
||||
right: 0,
|
||||
alignItems: 'center',
|
||||
zIndex: 70,
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
toast: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 24,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 8,
|
||||
elevation: 8,
|
||||
},
|
||||
text: { fontSize: 13, fontWeight: '500' },
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user