From e2393d2abec4dcc57d1bd9e67de29d38bfc055c5 Mon Sep 17 00:00:00 2001
From: Justin Wyne <1986068+wyne@users.noreply.github.com>
Date: Fri, 19 Apr 2024 19:42:05 -0700
Subject: [PATCH] Fix onboarding screen UI and performance

---
 src/Navigation.tsx                            |   2 +-
 src/components/Onboarding/OnboardingPage.tsx  | 144 +++++++++++++++++
 .../Onboarding/OnboardingSwiper.tsx           |   0
 src/screens/OnboardingScreen.tsx              | 146 +++---------------
 4 files changed, 165 insertions(+), 127 deletions(-)
 create mode 100644 src/components/Onboarding/OnboardingPage.tsx
 create mode 100644 src/components/Onboarding/OnboardingSwiper.tsx

diff --git a/src/Navigation.tsx b/src/Navigation.tsx
index 0a77ae58..10b40da9 100644
--- a/src/Navigation.tsx
+++ b/src/Navigation.tsx
@@ -103,7 +103,7 @@ export const Navigation = () => {
                 />
                 <Stack.Screen name="Onboarding" component={OnboardingScreen}
                     options={{
-                        presentation: 'formSheet',
+                        presentation: 'modal',
                         orientation: 'portrait',
                         title: 'Onboarding',
                         headerShown: false,
diff --git a/src/components/Onboarding/OnboardingPage.tsx b/src/components/Onboarding/OnboardingPage.tsx
new file mode 100644
index 00000000..b0d91e22
--- /dev/null
+++ b/src/components/Onboarding/OnboardingPage.tsx
@@ -0,0 +1,144 @@
+import React from 'react';
+
+import {
+    ImageURISource,
+    Animated as RNAnimated,
+    StyleSheet,
+    Text,
+    View
+} from 'react-native';
+import { Button } from 'react-native-elements';
+import Animated from 'react-native-reanimated';
+import Video from 'react-native-video';
+
+import { OnboardingScreenItem } from './Onboarding';
+
+interface Props {
+    active?: boolean;
+    closeOnboarding: () => void;
+    index: number;
+    isLast: boolean;
+    item: OnboardingScreenItem;
+    width: number;
+}
+
+const OnboardingPage: React.FC<Props> = React.memo(({
+    active = false,
+    closeOnboarding,
+    isLast,
+    item,
+    width,
+}) => {
+    let media;
+    switch (item.media.type) {
+        case 'image':
+            media = (
+                <RNAnimated.Image source={item.media.source as ImageURISource}
+                    style={{
+                        width: item.media.width || '100%',
+                        height: item.media.height || '100%',
+                        borderRadius: item.media.borderRadius || 0,
+                        resizeMode: 'contain',
+                    }} />
+            );
+            break;
+        case 'video':
+            media = (
+                <View style={{
+                    backgroundColor: 'black',
+                    padding: 5,
+                    width: item.media.width || '100%',
+                    height: item.media.height || '100%',
+                    borderRadius: 10,
+                }}>
+                    <Video
+                        source={item.media.source as number}
+                        paused={!active}
+                        repeat={true}
+                        resizeMode='contain'
+                        style={{
+                            width: '100%',
+                            height: '100%',
+                        }}
+                    />
+                </View>
+            );
+            break;
+    }
+
+    return (
+        <View style={[styles.itemContainer, { width: width }]} >
+            <Animated.View style={[styles.titleContainer]}>
+                <Text style={[styles.title]}>{item.title}</Text>
+            </Animated.View>
+
+            <Animated.View style={[styles.imageContainer]}>
+                {media}
+            </Animated.View>
+
+            <Animated.View style={[styles.descriptionContainer]}>
+                <Text style={[styles.description, { color: item.color }]}>
+                    {item.description}
+                </Text>
+                <View style={{ alignContent: 'center' }}>
+                    {isLast &&
+                        <Button
+                            title="Get Started"
+                            titleStyle={{ color: 'black' }}
+                            onPress={closeOnboarding}
+                            buttonStyle={[styles.finishButton]}
+                            type='outline'
+                        />
+                    }
+                </View>
+            </Animated.View>
+        </View>
+    );
+});
+
+export default OnboardingPage;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+    },
+    itemContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'space-around',
+    },
+    titleContainer: {
+        height: '15%',
+        justifyContent: 'flex-end',
+    },
+    title: {
+        fontSize: 30,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    imageContainer: {
+        height: '40%',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '80%',
+        padding: 20,
+    },
+    descriptionContainer: {
+        height: '25%',
+        justifyContent: 'flex-start',
+        padding: 20,
+    },
+    description: {
+        fontSize: 25,
+        textAlign: 'center',
+    },
+    finishButton: {
+        borderColor: 'black',
+        borderRadius: 20,
+        padding: 10,
+        margin: 15,
+    },
+});
diff --git a/src/components/Onboarding/OnboardingSwiper.tsx b/src/components/Onboarding/OnboardingSwiper.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/screens/OnboardingScreen.tsx b/src/screens/OnboardingScreen.tsx
index a613354c..ebae95e9 100644
--- a/src/screens/OnboardingScreen.tsx
+++ b/src/screens/OnboardingScreen.tsx
@@ -3,37 +3,28 @@ import React from 'react';
 import { RouteProp } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import {
-    Dimensions,
-    ImageURISource,
     Animated as RNAnimated,
     StyleSheet,
-    Text,
     View,
-    ViewToken,
+    ViewToken
 } from 'react-native';
 import { ExpandingDot } from 'react-native-animated-pagination-dots';
-import { Button } from 'react-native-elements';
 import Animated, { FadeIn } from 'react-native-reanimated';
-import Video from 'react-native-video';
 import { SemVer } from 'semver';
 
 import { getOnboardingScreens, OnboardingScreenItem } from '../components/Onboarding/Onboarding';
+import OnboardingPage from '../components/Onboarding/OnboardingPage';
 import SkipButton from '../components/Onboarding/SkipButton';
 import { RootStackParamList } from '../Navigation';
 
-const { width } = Dimensions.get('screen');
-
-type OnboardingScreenItemProps = {
-    item: OnboardingScreenItem;
-    index: number;
-};
-
 export interface Props {
     navigation: NativeStackNavigationProp<RootStackParamList, 'Onboarding' | 'Tutorial'>;
     route: RouteProp<RootStackParamList, 'Onboarding' | 'Tutorial'>;
 }
 
 const OnboardingScreen: React.FunctionComponent<Props> = ({ navigation, route }) => {
+    const [width, setWidth] = React.useState(0);
+
     const {
         onboarding = false,
         version = new SemVer('0.0.0')
@@ -64,77 +55,12 @@ const OnboardingScreen: React.FunctionComponent<Props> = ({ navigation, route })
 
     const viewConfigRef = React.useRef({ viewAreaCoveragePercentThreshold: 50 });
 
-    const renderItem = React.useCallback(({ item, index }: OnboardingScreenItemProps) => {
-
-        let media;
-        switch (item.media.type) {
-            case 'image':
-                media = (
-                    <RNAnimated.Image source={item.media.source as ImageURISource}
-                        style={{
-                            width: item.media.width || '100%',
-                            height: item.media.height || '100%',
-                            borderRadius: item.media.borderRadius || 0,
-                            resizeMode: 'contain',
-                        }} />
-                );
-                break;
-            case 'video':
-                media = (
-                    <View style={{
-                        backgroundColor: 'black',
-                        padding: 5,
-                        width: item.media.width || '100%',
-                        height: item.media.height || '100%',
-                        borderRadius: 10,
-                    }}>
-                        <Video
-                            source={item.media.source as number}
-                            paused={index != activeIndex}
-                            repeat={true}
-                            resizeMode='contain'
-                            style={{
-                                width: '100%',
-                                height: '100%',
-                            }}
-                        />
-                    </View>
-                );
-                break;
-        }
-
-        return (
-            <View style={[styles.itemContainer]}>
-                <Animated.View style={[styles.titleContainer]}>
-                    <Text style={[styles.title]}>{item.title}</Text>
-                </Animated.View>
-
-                <Animated.View style={[styles.imageContainer]}>
-                    {media}
-                </Animated.View>
-
-                <Animated.View style={[styles.descriptionContainer]}>
-                    <Text style={[styles.description, { color: item.color }]}>
-                        {item.description}
-                    </Text>
-                    <View style={{ alignContent: 'center' }}>
-                        {index === onboardingScreens.length - 1 &&
-                            <Button
-                                title="Get Started"
-                                titleStyle={{ color: 'black' }}
-                                onPress={closeOnboarding}
-                                buttonStyle={[styles.finishButton]}
-                                type='outline'
-                            />
-                        }
-                    </View>
-                </Animated.View>
-            </View>
-        );
-    }, [activeIndex]);
-
     return (
-        <Animated.View style={[styles.container]} entering={FadeIn}>
+        <Animated.View style={[styles.container]} entering={FadeIn}
+            onLayout={event => {
+                const { width } = event.nativeEvent.layout;
+                setWidth(width);
+            }}>
             <View style={[StyleSheet.absoluteFillObject]}>
                 {onboardingScreens.map((item, index) => {
                     const inputRange = [
@@ -164,7 +90,16 @@ const OnboardingScreen: React.FunctionComponent<Props> = ({ navigation, route })
                 onViewableItemsChanged={onViewRef.current}
                 viewabilityConfig={viewConfigRef.current}
                 data={onboardingScreens}
-                renderItem={renderItem}
+                renderItem={({ item, index }) =>
+                    <OnboardingPage
+                        closeOnboarding={closeOnboarding}
+                        index={index}
+                        item={item}
+                        width={width}
+                        active={index === activeIndex}
+                        isLast={index === onboardingScreens.length - 1}
+                    />
+                }
                 keyExtractor={keyExtractor}
                 showsHorizontalScrollIndicator={false}
                 pagingEnabled
@@ -203,53 +138,12 @@ const OnboardingScreen: React.FunctionComponent<Props> = ({ navigation, route })
     );
 };
 
-const borders = false;
-
 const styles = StyleSheet.create({
     container: {
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-    },
-    itemContainer: {
-        flex: 1,
-        width: width,
-        alignItems: 'center',
-        justifyContent: 'space-around',
-    },
-    titleContainer: {
-        height: '15%',
-        justifyContent: 'flex-end',
-        borderWidth: borders ? 1 : 0,
-    },
-    title: {
-        fontSize: 30,
-        fontWeight: 'bold',
-        textAlign: 'center',
-    },
-    imageContainer: {
-        height: '40%',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '80%',
-        padding: 20,
-        borderWidth: borders ? 1 : 0,
-    },
-    descriptionContainer: {
-        height: '25%',
-        justifyContent: 'flex-start',
-        padding: 20,
-        borderWidth: borders ? 1 : 0,
-    },
-    description: {
-        fontSize: 25,
-        textAlign: 'center',
-    },
-    finishButton: {
-        borderColor: 'black',
-        borderRadius: 20,
-        padding: 10,
-        margin: 15,
+        width: '100%',
     },
 });