fix blank screen animation

app/init/launch.ts

@@ -135,12 +135,14 @@ const launchApp = async (props: LaunchProps, resetNavigation = true) => {
         }
     }
 
-    const onboardingViewed = LocalConfig.ShowOnboarding ? await getOnboardingViewed() : false;
+    const onboardingViewed = LocalConfig.ShowOnboarding && await getOnboardingViewed();
 
-    if (onboardingViewed) {
-        return launchToServer(props, resetNavigation);
+    // if the config value is set and the onboarding has not been seeing yet, show the onboarding
+    if (LocalConfig.ShowOnboarding && !onboardingViewed) {
+        return resetToOnboarding(props);
     }
-    return resetToOnboarding(props);
+
+    return launchToServer(props, resetNavigation);
 };
 
 const launchToHome = async (props: LaunchProps) => {

app/screens/navigation.ts

@@ -124,6 +124,19 @@ export const bottomSheetModalOptions = (theme: Theme, closeButtonId?: string) =>
 // This locks phones to portrait for all screens while keeps
 // all orientations available for Tablets.
 Navigation.setDefaultOptions({
+    animations: {
+        setRoot: {
+            enter: {
+                waitForRender: true,
+                enabled: true,
+                alpha: {
+                    from: 0,
+                    to: 1,
+                    duration: 300,
+                },
+            },
+        },
+    },
     layout: {
         orientation: Device.IS_TABLET ? undefined : ['portrait'],
     },

app/screens/onboarding/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useEffect} from 'react';
-import {View, ListRenderItemInfo, useWindowDimensions, SafeAreaView, ScrollView, StyleSheet, Platform} from 'react-native';
+import {View, ListRenderItemInfo, useWindowDimensions, SafeAreaView, ScrollView, StyleSheet, Platform, NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
 import {Navigation} from 'react-native-navigation';
 import Animated, {useAnimatedRef, useAnimatedScrollHandler, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
 
@@ -60,7 +60,7 @@ const Onboarding = ({
             x: (slideIndexToMove * width),
             animated: true,
         });
-    }, [currentIndex.value]);
+    }, []);
 
     const nextSlide = useCallback(() => {
         const nextSlideIndex = currentIndex.value + 1;
@@ -91,11 +91,9 @@ const Onboarding = ({
         );
     }, [theme]);
 
-    const scrollHandler = useAnimatedScrollHandler({
-        onScroll: (event) => {
-            scrollX.value = event.contentOffset.x;
-        },
-    });
+    const scrollHandler = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        scrollX.value = event.nativeEvent.contentOffset.x;
+    };
 
     useEffect(() => {
         const listener = {
@@ -128,7 +126,7 @@ const Onboarding = ({
                 style={[styles.scrollContainer, transform]}
                 key={'onboarding_content'}
             >
-                <Animated.ScrollView
+                <ScrollView
                     scrollEventThrottle={16}
                     horizontal={true}
                     showsHorizontalScrollIndicator={false}
@@ -140,7 +138,7 @@ const Onboarding = ({
                     {slidesData.map((item, index) => {
                         return renderSlide({item, index} as ListRenderItemInfo<OnboardingItem>);
                     })}
-                </Animated.ScrollView>
+                </ScrollView>
                 <Paginator
                     dataLength={slidesData.length}
                     theme={theme}

app/screens/server/header.tsx

@@ -27,7 +27,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
         ...typography('Heading', 400, 'SemiBold'),
     },
     connect: {
-        width: 270,
+        width: 320,
         letterSpacing: -1,
         color: theme.centerChannelColor,
         marginVertical: 12,