dios.one
373 lines
11 KiB
JavaScript
373 lines
11 KiB
JavaScript
import React, { useRef, useState, useEffect, useCallback } from 'react';
|
|
import {
|
|
View, Text, Image, TextInput, StyleSheet, FlatList,
|
|
Dimensions, TouchableOpacity, Animated,
|
|
KeyboardAvoidingView, Platform, Keyboard,
|
|
} from 'react-native';
|
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
import StarField from '../components/StarField';
|
|
import Button from '../components/Button';
|
|
import useAppStore from '../store/useAppStore';
|
|
import useAuthStore from '../store/useAuthStore';
|
|
import { colors, fonts, spacing, borderRadius } from '../utils/theme';
|
|
|
|
const { width } = Dimensions.get('window');
|
|
const ONBOARDING_KEY = 'onboarding_done';
|
|
|
|
const pages = [
|
|
{
|
|
id: '1',
|
|
title: 'Identity First',
|
|
text: 'Every transformation begins with identity.\nNot goals. Not habits. Identity.',
|
|
iconSize: 90,
|
|
glowIntensity: 0.3,
|
|
showOrbit: false,
|
|
},
|
|
{
|
|
id: '2',
|
|
title: '40 Days',
|
|
text: "In 40 days, you won't just change habits\n— you'll change who you are.",
|
|
iconSize: 110,
|
|
glowIntensity: 0.65,
|
|
showOrbit: false,
|
|
},
|
|
{
|
|
id: '3',
|
|
title: 'Your Nova Awaits',
|
|
text: 'Small actions. Massive transformation.',
|
|
iconSize: 110,
|
|
glowIntensity: 1,
|
|
showOrbit: true,
|
|
isLast: true,
|
|
},
|
|
];
|
|
|
|
function PageContent({ item, isActive }) {
|
|
const fadeAnim = useRef(new Animated.Value(0)).current;
|
|
const slideAnim = useRef(new Animated.Value(30)).current;
|
|
const pulse = useRef(new Animated.Value(1)).current;
|
|
|
|
useEffect(() => {
|
|
if (isActive) {
|
|
fadeAnim.setValue(0);
|
|
slideAnim.setValue(30);
|
|
Animated.parallel([
|
|
Animated.timing(fadeAnim, { toValue: 1, duration: 500, delay: 150, useNativeDriver: true }),
|
|
Animated.timing(slideAnim, { toValue: 0, duration: 500, delay: 150, useNativeDriver: true }),
|
|
]).start();
|
|
}
|
|
}, [isActive]);
|
|
|
|
useEffect(() => {
|
|
const anim = Animated.loop(
|
|
Animated.sequence([
|
|
Animated.timing(pulse, { toValue: 1.12, duration: 2200, useNativeDriver: true }),
|
|
Animated.timing(pulse, { toValue: 1, duration: 2200, useNativeDriver: true }),
|
|
])
|
|
);
|
|
anim.start();
|
|
return () => anim.stop();
|
|
}, []);
|
|
|
|
return (
|
|
<View style={styles.page}>
|
|
{/* Icon area */}
|
|
<View style={styles.iconArea}>
|
|
<Animated.View
|
|
style={[
|
|
styles.glow,
|
|
{
|
|
width: item.iconSize * 2.2,
|
|
height: item.iconSize * 2.2,
|
|
borderRadius: item.iconSize * 1.1,
|
|
opacity: item.glowIntensity * 0.4,
|
|
transform: [{ scale: pulse }],
|
|
},
|
|
]}
|
|
/>
|
|
{item.showOrbit && (
|
|
<View
|
|
style={[
|
|
styles.orbit,
|
|
{
|
|
width: item.iconSize * 2.6,
|
|
height: item.iconSize * 2.6,
|
|
borderRadius: item.iconSize * 1.3,
|
|
},
|
|
]}
|
|
/>
|
|
)}
|
|
<Image
|
|
source={require('../../assets/icon.png')}
|
|
style={{ width: item.iconSize * 1.2, height: item.iconSize * 1.2 }}
|
|
resizeMode="contain"
|
|
/>
|
|
</View>
|
|
|
|
{/* Text */}
|
|
<Animated.View style={{ opacity: fadeAnim, transform: [{ translateY: slideAnim }] }}>
|
|
<Text style={styles.pageTitle}>{item.title}</Text>
|
|
<Text style={styles.pageText}>{item.text}</Text>
|
|
</Animated.View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default function OnboardingScreen({ navigation }) {
|
|
const flatListRef = useRef(null);
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
const [identityInput, setIdentityInput] = useState('');
|
|
const [keyboardVisible, setKeyboardVisible] = useState(false);
|
|
const setInitialIdentity = useAppStore((s) => s.setInitialIdentity);
|
|
const buttonFade = useRef(new Animated.Value(0)).current;
|
|
const inputFade = useRef(new Animated.Value(0)).current;
|
|
|
|
const isLastPage = currentIndex === pages.length - 1;
|
|
|
|
useEffect(() => {
|
|
const showSub = Keyboard.addListener('keyboardWillShow', () => setKeyboardVisible(true));
|
|
const hideSub = Keyboard.addListener('keyboardWillHide', () => setKeyboardVisible(false));
|
|
// Android uses keyboardDidShow/keyboardDidHide
|
|
const showSubAnd = Keyboard.addListener('keyboardDidShow', () => setKeyboardVisible(true));
|
|
const hideSubAnd = Keyboard.addListener('keyboardDidHide', () => setKeyboardVisible(false));
|
|
return () => { showSub.remove(); hideSub.remove(); showSubAnd.remove(); hideSubAnd.remove(); };
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (isLastPage) {
|
|
Animated.stagger(200, [
|
|
Animated.timing(inputFade, { toValue: 1, duration: 400, useNativeDriver: true }),
|
|
Animated.timing(buttonFade, { toValue: 1, duration: 400, useNativeDriver: true }),
|
|
]).start();
|
|
} else {
|
|
buttonFade.setValue(0);
|
|
inputFade.setValue(0);
|
|
}
|
|
}, [isLastPage]);
|
|
|
|
const completeOnboarding = useCallback(async () => {
|
|
await AsyncStorage.setItem(ONBOARDING_KEY, 'true');
|
|
if (identityInput.trim()) {
|
|
setInitialIdentity(identityInput.trim());
|
|
}
|
|
|
|
// If user is already logged in (came from Register), go to story input
|
|
// Otherwise go to Login
|
|
const session = useAuthStore.getState().session;
|
|
if (session) {
|
|
navigation.reset({ index: 0, routes: [{ name: 'IdentityStory' }] });
|
|
} else {
|
|
navigation.reset({ index: 0, routes: [{ name: 'Login' }] });
|
|
}
|
|
}, [identityInput, navigation, setInitialIdentity]);
|
|
|
|
const onViewableItemsChanged = useRef(({ viewableItems }) => {
|
|
if (viewableItems.length > 0) {
|
|
setCurrentIndex(viewableItems[0].index ?? 0);
|
|
}
|
|
}).current;
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<StarField count={60} />
|
|
|
|
{/* Skip button — hidden on last page */}
|
|
{!isLastPage && (
|
|
<TouchableOpacity style={styles.skip} onPress={completeOnboarding}>
|
|
<Text style={styles.skipText}>Skip</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
|
|
{/* Hide pager when keyboard is visible on last page to make room */}
|
|
{!(keyboardVisible && isLastPage) && (
|
|
<FlatList
|
|
ref={flatListRef}
|
|
data={pages}
|
|
horizontal
|
|
pagingEnabled
|
|
showsHorizontalScrollIndicator={false}
|
|
keyExtractor={(item) => item.id}
|
|
onViewableItemsChanged={onViewableItemsChanged}
|
|
viewabilityConfig={{ viewAreaCoveragePercentThreshold: 50 }}
|
|
renderItem={({ item, index }) => (
|
|
<PageContent item={item} isActive={index === currentIndex} />
|
|
)}
|
|
/>
|
|
)}
|
|
|
|
{/* Bottom section: input + button + dots */}
|
|
<KeyboardAvoidingView
|
|
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
|
style={styles.bottomKAV}
|
|
keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
|
|
>
|
|
<View style={styles.bottom}>
|
|
{/* Show title when keyboard hides the pager */}
|
|
{keyboardVisible && isLastPage && (
|
|
<Text style={styles.keyboardTitle}>Who do you want to become?</Text>
|
|
)}
|
|
|
|
{/* Identity input on last page */}
|
|
{isLastPage && (
|
|
<Animated.View style={[styles.inputWrapper, { opacity: inputFade }]}>
|
|
{!keyboardVisible && (
|
|
<Text style={styles.inputLabel}>Who do you want to become?</Text>
|
|
)}
|
|
<TextInput
|
|
style={styles.input}
|
|
value={identityInput}
|
|
onChangeText={setIdentityInput}
|
|
placeholder="e.g., A disciplined, focused person"
|
|
placeholderTextColor={colors.textMuted}
|
|
selectionColor={colors.primary}
|
|
returnKeyType="done"
|
|
onSubmitEditing={() => Keyboard.dismiss()}
|
|
/>
|
|
</Animated.View>
|
|
)}
|
|
|
|
{/* CTA button on last page */}
|
|
{isLastPage && (
|
|
<Animated.View style={[styles.ctaWrapper, { opacity: buttonFade }]}>
|
|
<Button title="Get Started" onPress={completeOnboarding} />
|
|
</Animated.View>
|
|
)}
|
|
|
|
{/* Dots */}
|
|
{!keyboardVisible && (
|
|
<View style={styles.indicators}>
|
|
{pages.map((_, i) => (
|
|
<View
|
|
key={i}
|
|
style={[
|
|
styles.dot,
|
|
currentIndex === i && styles.dotActive,
|
|
]}
|
|
/>
|
|
))}
|
|
</View>
|
|
)}
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.background,
|
|
},
|
|
skip: {
|
|
position: 'absolute',
|
|
top: 58,
|
|
right: 24,
|
|
zIndex: 10,
|
|
paddingVertical: spacing.xs,
|
|
paddingHorizontal: spacing.sm,
|
|
},
|
|
skipText: {
|
|
color: colors.textSecondary,
|
|
fontSize: fonts.sizes.md,
|
|
fontWeight: fonts.weights.medium,
|
|
},
|
|
page: {
|
|
width,
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingHorizontal: spacing.xl,
|
|
},
|
|
iconArea: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: 300,
|
|
height: 300,
|
|
marginBottom: spacing.xl,
|
|
},
|
|
glow: {
|
|
backgroundColor: colors.planetGlow,
|
|
position: 'absolute',
|
|
},
|
|
orbit: {
|
|
borderWidth: 1.5,
|
|
borderColor: colors.orbitLine,
|
|
borderStyle: 'dashed',
|
|
position: 'absolute',
|
|
},
|
|
pageTitle: {
|
|
color: colors.accent,
|
|
fontSize: fonts.sizes.xs,
|
|
fontWeight: fonts.weights.bold,
|
|
letterSpacing: 3,
|
|
textAlign: 'center',
|
|
textTransform: 'uppercase',
|
|
marginBottom: spacing.md,
|
|
},
|
|
pageText: {
|
|
color: colors.text,
|
|
fontSize: fonts.sizes.xl,
|
|
fontWeight: fonts.weights.semibold,
|
|
textAlign: 'center',
|
|
lineHeight: 34,
|
|
},
|
|
bottomKAV: {
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
},
|
|
bottom: {
|
|
paddingHorizontal: spacing.lg,
|
|
paddingBottom: spacing.xl,
|
|
paddingTop: spacing.md,
|
|
},
|
|
keyboardTitle: {
|
|
color: colors.text,
|
|
fontSize: fonts.sizes.lg,
|
|
fontWeight: fonts.weights.semibold,
|
|
textAlign: 'center',
|
|
marginBottom: spacing.md,
|
|
},
|
|
inputWrapper: {
|
|
marginBottom: spacing.lg,
|
|
},
|
|
inputLabel: {
|
|
color: colors.textSecondary,
|
|
fontSize: fonts.sizes.sm,
|
|
fontWeight: fonts.weights.medium,
|
|
marginBottom: spacing.sm,
|
|
textAlign: 'center',
|
|
},
|
|
input: {
|
|
backgroundColor: colors.surface,
|
|
borderRadius: borderRadius.md,
|
|
paddingHorizontal: spacing.md,
|
|
paddingVertical: spacing.md,
|
|
color: colors.text,
|
|
fontSize: fonts.sizes.md,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
textAlign: 'center',
|
|
},
|
|
ctaWrapper: {
|
|
marginBottom: spacing.md,
|
|
},
|
|
indicators: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
gap: spacing.sm,
|
|
paddingBottom: spacing.sm,
|
|
},
|
|
dot: {
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: 4,
|
|
backgroundColor: colors.textMuted,
|
|
},
|
|
dotActive: {
|
|
backgroundColor: colors.primary,
|
|
width: 24,
|
|
},
|
|
});
|