Fix onboarding screen

src/Navigation.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { DarkTheme, NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { SemVer } from 'semver';
 
 import AppInfoHeader from '../src/components/Headers/AppInfoHeader';
 import GameHeader from '../src/components/Headers/GameHeader';
@@ -20,6 +21,7 @@ import ShareScreen from './screens/ShareScreen';
 
 export type OnboardingScreenParamList = {
     onboarding: boolean;
+    version: SemVer;
 };
 
 export type RootStackParamList = {

src/screens/ListScreen.tsx

@@ -7,10 +7,11 @@ import { BlurView } from 'expo-blur';
 import { StyleSheet, Text, View } from 'react-native';
 import Animated, { Easing, LinearTransition } from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { parse, SemVer } from 'semver';
+import { SemVer, parse } from 'semver';
 
 import { selectGameIds } from '../../redux/GamesSlice';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
+import { setOnboardedVersion } from '../../redux/SettingsSlice';
 import GameListItem from '../components/GameListItem';
 import { getPendingOnboardingSemVer } from '../components/Onboarding/Onboarding';
 import logger from '../Logger';
@@ -37,10 +38,10 @@ const ListScreen: React.FunctionComponent<Props> = ({ navigation }) => {
     logger.info(`Onboarded: ${onboarded}`);
 
     useEffect(() => {
-        console.log('ListScreen.tsx: useEffect(() => {', onboarded);
         if (!onboarded) {
-            navigation.navigate('Onboarding', { onboarding: true });
-            // TODO: dispatch(setOnboardedVersion());
+            logger.info('Show onboarding!');
+            navigation.navigate('Onboarding', { onboarding: true, version: onboardedSemVer });
+            dispatch(setOnboardedVersion());
         }
     }, [onboarded, dispatch, navigation]);
 

src/screens/OnboardingScreen.tsx

@@ -15,12 +15,10 @@ 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 { parse, SemVer } from 'semver';
+import { SemVer } from 'semver';
 
-import { useAppSelector } from '../../redux/hooks';
 import { getOnboardingScreens, OnboardingScreenItem } from '../components/Onboarding/Onboarding';
 import SkipButton from '../components/Onboarding/SkipButton';
-import logger from '../Logger';
 import { RootStackParamList } from '../Navigation';
 
 const { width } = Dimensions.get('screen');
@@ -36,14 +34,12 @@ export interface Props {
 }
 
 const OnboardingScreen: React.FunctionComponent<Props> = ({ navigation, route }) => {
-    const { onboarding = false } = route.params;
+    const {
+        onboarding = false,
+        version = new SemVer('0.0.0')
+    } = route.params;
 
-    const onboardedStr = useAppSelector(state => state.settings.onboarded);
-    const onboardedSemVer = parse(onboardedStr);
-
-    logger.info(onboardedSemVer);
-
-    const onboardingScreens: OnboardingScreenItem[] = getOnboardingScreens(onboarding ? onboardedSemVer || new SemVer('0.0.0') : new SemVer('0.0.0'));
+    const onboardingScreens: OnboardingScreenItem[] = getOnboardingScreens(onboarding ? version || new SemVer('0.0.0') : new SemVer('0.0.0'));
 
     const scrollX = React.useRef(new RNAnimated.Value(0)).current;
     const keyExtractor = React.useCallback((_: OnboardingScreenItem, index: number) => index.toString(), []);