[WIP] Onboarding

examples/common_expo/app/(app)/_layout.tsx

@@ -16,7 +16,7 @@ export default function AppLayout() {
  }
 
  if (!session) {
- return <Redirect href="/sign-in" />;
+ return <Redirect href="/onboarding" />;
  }
 
  return (

examples/common_expo/app/onboarding.tsx

@@ -0,0 +1,74 @@
+import Animated, {
+ useAnimatedRef,
+ useAnimatedScrollHandler,
+ useSharedValue,
+} from 'react-native-reanimated';
+import { SafeAreaView, StyleSheet, View } from 'react-native';
+
+import {
+ NextButton,
+ OnboardingListItem,
+ OnboardingItem,
+ OnboardingWrapper,
+ Pagination,
+} from '@/components/Onboarding';
+
+const items: OnboardingItem[] = [
+ { text: 'First' },
+ { text: 'Second' },
+ { text: 'Third' },
+];
+
+export default function Onboarding() {
+ const offsetX = useSharedValue(0);
+ const flatListIndex = useSharedValue(0);
+ const flatListRef = useAnimatedRef<Animated.FlatList<OnboardingItem>>();
+
+ const handleOnScroll = useAnimatedScrollHandler({
+ onScroll: (event) => {
+ offsetX.value = event.contentOffset.x;
+ },
+ });
+
+ return (
+ <OnboardingWrapper>
+ <SafeAreaView style={styles.container}>
+ <Animated.FlatList
+ ref={flatListRef}
+ data={items}
+ keyExtractor={(_, index) => index.toString()}
+ renderItem={({ item, index }) => (
+ <OnboardingListItem item={item} listIndex={index} />
+ )}
+ onViewableItemsChanged={({ viewableItems }) => {
+ flatListIndex.value = viewableItems[0].index ?? 0;
+ }}
+ onScroll={handleOnScroll}
+ bounces={false}
+ showsHorizontalScrollIndicator={false}
+ horizontal
+ pagingEnabled
+ />
+ <View style={styles.bottomPanel}>
+ <Pagination length={items.length} offsetX={offsetX} />
+ <NextButton
+ flatListRef={flatListRef}
+ listIndex={flatListIndex}
+ listLength={items.length}
+ />
+ </View>
+ </SafeAreaView>
+ </OnboardingWrapper>
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ },
+ bottomPanel: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ paddingHorizontal: 24,
+ },
+});

examples/common_expo/app/sign-in.tsx

@@ -73,7 +73,7 @@ export default function SignIn() {
  <Button title="Sign In" onPress={handleSubmit(handleOnSubmit)} />
  <View style={styles.signUpContainer}>
  <Typography.Text>Don&apos;t have an account?</Typography.Text>
- <Button title="Sign Up" onPress={() => router.navigate('/sign-up')} />
+ <Button title="Sign Up" onPress={() => router.push('/sign-up')} />
  </View>
  </CenterView>
  </KeyboardAvoidingContainer>
@@ -86,7 +86,6 @@ const styles = StyleSheet.create({
  },
  signUpContainer: {
  alignItems: 'center',
- display: 'flex',
  marginTop: 24,
  },
 });

examples/common_expo/components/Onboarding/NextButton.tsx

@@ -0,0 +1,79 @@
+import { FC, useCallback } from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+import Animated, {
+ AnimatedRef,
+ SharedValue,
+ useAnimatedStyle,
+ withTiming,
+} from 'react-native-reanimated';
+import { router } from 'expo-router';
+import { setAsyncStorageItem } from '@/utilities/asyncStorage';
+
+import { OnboardingItem } from './OnboardingListItem';
+import { onboardingKey } from './OnboardingWrapper';
+
+type NextButtonProps = {
+ flatListRef: AnimatedRef<Animated.FlatList<OnboardingItem>>;
+ listIndex: SharedValue<number>;
+ listLength: number;
+};
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export const NextButton: FC<NextButtonProps> = ({
+ flatListRef,
+ listIndex,
+ listLength,
+}) => {
+ const animatedButtonStyle = useAnimatedStyle(() => ({
+ width:
+ listIndex.value === listLength - 1 ? withTiming(120) : withTiming(60),
+ }));
+
+ const animatedTextStyle = useAnimatedStyle(() => ({
+ opacity: listIndex.value === listLength - 1 ? withTiming(1) : withTiming(0),
+ transform: [
+ {
+ translateX:
+ listIndex.value === listLength - 1 ? withTiming(0) : withTiming(100),
+ },
+ ],
+ }));
+
+ const handleOnPress = useCallback(() => {
+ if (listIndex.value === listLength - 1) {
+ setAsyncStorageItem(onboardingKey, 'true');
+
+ router.replace('/sign-in');
+ return;
+ }
+
+ flatListRef.current?.scrollToIndex({ index: listIndex.value + 1 });
+ }, [flatListRef, listIndex.value, listLength]);
+
+ return (
+ <AnimatedPressable
+ onPress={handleOnPress}
+ style={[styles.button, animatedButtonStyle]}
+ >
+ <Animated.Text style={[styles.textStyle, animatedTextStyle]}>
+ Start
+ </Animated.Text>
+ </AnimatedPressable>
+ );
+};
+
+const styles = StyleSheet.create({
+ button: {
+ alignItems: 'center',
+ backgroundColor: 'blue',
+ borderRadius: 80,
+ height: 60,
+ justifyContent: 'center',
+ },
+ textStyle: {
+ color: 'white',
+ fontSize: 16,
+ fontWeight: '600',
+ },
+});

examples/common_expo/components/Onboarding/OnboardingListItem.tsx

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { useWindowDimensions } from 'react-native';
+
+import { CenterView } from '@/components/CenterView';
+import { Typography } from '@/components/Typography';
+
+export type OnboardingItem = {
+ text: string;
+};
+
+type ListItemProps = {
+ item: OnboardingItem;
+ listIndex: number;
+};
+
+export const OnboardingListItem: FC<ListItemProps> = ({ item }) => {
+ const { width: SCREEN_WIDTH } = useWindowDimensions();
+
+ return (
+ <CenterView style={{ width: SCREEN_WIDTH }}>
+ <Typography.Header>{item.text}</Typography.Header>
+ </CenterView>
+ );
+};

examples/common_expo/components/Onboarding/OnboardingWrapper.tsx

@@ -0,0 +1,41 @@
+import { Redirect } from 'expo-router';
+import { FC, PropsWithChildren, useEffect, useState } from 'react';
+import { ActivityIndicator } from 'react-native';
+
+import { CenterView } from '@/components/CenterView';
+import { getAsyncStorageItem } from '@/utilities/asyncStorage';
+
+export const onboardingKey = 'onboarding';
+
+export const OnboardingWrapper: FC<PropsWithChildren> = ({ children }) => {
+ const [isLoading, setIsLoading] = useState(true);
+ const [isOnboardingCompleted, setIsOnboardingCompleted] = useState(false);
+
+ useEffect(() => {
+ const onMount = async () => {
+ const onboardingValue = await getAsyncStorageItem(onboardingKey);
+
+ if (onboardingValue) {
+ setIsOnboardingCompleted(true);
+ }
+
+ setIsLoading(false);
+ };
+
+ onMount();
+ }, []);
+
+ if (isLoading) {
+ return (
+ <CenterView>
+ <ActivityIndicator size="large" />
+ </CenterView>
+ );
+ }
+
+ if (isOnboardingCompleted) {
+ return <Redirect href="/sign-in" />;
+ }
+
+ return children;
+};

examples/common_expo/components/Onboarding/Pagination/Pagination.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { SharedValue } from 'react-native-reanimated';
+
+import { PaginationItem } from './PaginationItem';
+
+type PaginationProps = {
+ length: number;
+ offsetX: SharedValue<number>;
+};
+
+export const Pagination: FC<PaginationProps> = ({ length, offsetX }) => (
+ <View style={styles.container}>
+ {[...Array(length).keys()].map((_, index) => (
+ <PaginationItem
+ key={index.toString()}
+ itemIndex={index}
+ offsetX={offsetX}
+ />
+ ))}
+ </View>
+);
+
+const styles = StyleSheet.create({
+ container: {
+ alignItems: 'center',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ },
+});

examples/common_expo/components/Onboarding/Pagination/PaginationItem.tsx

@@ -0,0 +1,60 @@
+import { FC } from 'react';
+import { StyleSheet, useWindowDimensions } from 'react-native';
+import Animated, {
+ Extrapolation,
+ interpolate,
+ interpolateColor,
+ SharedValue,
+ useAnimatedStyle,
+} from 'react-native-reanimated';
+
+type PaginationItemProps = {
+ itemIndex: number;
+ offsetX: SharedValue<number>;
+};
+
+export const PaginationItem: FC<PaginationItemProps> = ({
+ itemIndex,
+ offsetX,
+}) => {
+ const { width: SCREEN_WIDTH } = useWindowDimensions();
+
+ const animatedItemStyle = useAnimatedStyle(() => {
+ const backgroundColor = interpolateColor(
+ offsetX.value,
+ [
+ (itemIndex - 1) * SCREEN_WIDTH,
+ itemIndex * SCREEN_WIDTH,
+ (itemIndex + 1) * SCREEN_WIDTH,
+ ],
+ ['#e2e2e2', 'blue', '#e2e2e2'],
+ );
+
+ const width = interpolate(
+ offsetX.value,
+ [
+ (itemIndex - 1) * SCREEN_WIDTH,
+ itemIndex * SCREEN_WIDTH,
+ (itemIndex + 1) * SCREEN_WIDTH,
+ ],
+ [32, 16, 32],
+ Extrapolation.CLAMP,
+ );
+
+ return {
+ width,
+ backgroundColor,
+ };
+ });
+
+ return <Animated.View style={[styles.item, animatedItemStyle]} />;
+};
+
+const styles = StyleSheet.create({
+ item: {
+ borderRadius: 5,
+ height: 10,
+ marginHorizontal: 4,
+ width: 32,
+ },
+});

examples/common_expo/components/Onboarding/Pagination/index.ts

@@ -0,0 +1 @@
+export * from './Pagination';

examples/common_expo/components/Onboarding/index.ts

@@ -0,0 +1,4 @@
+export * from './NextButton';
+export * from './OnboardingListItem';
+export * from './OnboardingWrapper';
+export * from './Pagination';

examples/common_expo/package.json

@@ -17,6 +17,7 @@
  "dependencies": {
  "@expo/vector-icons": "^14.0.2",
  "@hookform/resolvers": "^3.9.0",
+ "@react-native-async-storage/async-storage": "1.23.1",
  "@react-navigation/native": "^6.0.2",
  "expo": "~51.0.31",
  "expo-font": "~12.0.9",