convert SplashScreen to a Modal

apps/mobile/src/components/SplashScreen/index.js

@@ -24,6 +24,7 @@ import Paragraph from '../Typography/Paragraph';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {DDS} from '../../services/DeviceDetection';
 import {openLinkInBrowser} from '../../utils/functions';
+import {Modal} from 'react-native';
 
 const features = [
   {
@@ -70,11 +71,9 @@ const SplashScreen = () => {
   const [isNext, setIsNext] = useState(true);
 
   const opacity = useValue(0);
-  const translateY = useValue(20);
-  const translateY2 = useValue(0);
 
   useEffect(() => {
-    Storage.read('introCompleted').then(async (r) => {
+    Storage.read('introCompleted').then(async r => {
       requestAnimationFrame(() => {
         if (!r) {
           setVisible(true);
@@ -83,41 +82,23 @@ const SplashScreen = () => {
             duration: 500,
             easing: Easing.in(Easing.ease),
           }).start();
-          timing(translateY, {
-            toValue: 0,
-            duration: 500,
-            easing: Easing.in(Easing.ease),
-          }).start();
         }
       });
     });
   }, []);
 
   const hide = async () => {
-    timing(translateY2, {
-      toValue: dHeight * 2,
-      duration: 500,
-      easing: Easing.in(Easing.ease),
-    }).start();
-    await sleep(500);
     setVisible(false);
   };
 
   return (
     visible && (
+      <Modal animationType="slide" statusBarTranslucent visible>
         <Animated.View
           style={{
-          zIndex: 999,
-          ...getElevation(10),
             width: '100%',
             height: '100%',
-          position: 'absolute',
             backgroundColor: colors.bg,
-          transform: [
-            {
-              translateY: translateY2,
-            },
-          ],
           }}>
           <Animated.View
             style={{
@@ -127,11 +108,6 @@ const SplashScreen = () => {
               alignItems: 'center',
               padding: 12,
               opacity: opacity,
-            transform: [
-              {
-                translateY: translateY,
-              },
-            ],
             }}>
             <View>
               <Carousel
@@ -140,6 +116,10 @@ const SplashScreen = () => {
                 itemWidth={dWidth}
                 sliderWidth={dWidth}
                 loop={false}
+                onSnapToItem={i => {
+                  currentIndex = i;
+                }}
+                activeAnimationType="timing"
                 shouldOptimizeUpdates
                 renderItem={({item, index}) => (
                   <View
@@ -169,7 +149,11 @@ const SplashScreen = () => {
                             }}
                           />
                         ) : item.type === 'icon' ? (
-                        <Icon color={item.color} name={item.icon} size={170} />
+                          <Icon
+                            color={item.color}
+                            name={item.icon}
+                            size={170}
+                          />
                         ) : (
                           <SvgXml
                             xml={
@@ -245,7 +229,11 @@ const SplashScreen = () => {
                 width={isNext ? null : '100%'}
                 onPress={async () => {
                   if (isNext) {
-                  carouselRef.current?.snapToItem(currentIndex + 1,true,true);
+                    carouselRef.current?.snapToItem(
+                      currentIndex + 1,
+                      true,
+                      true,
+                    );
                     currentIndex++;
                     if (currentIndex === 4) {
                       setIsNext(false);
@@ -262,6 +250,7 @@ const SplashScreen = () => {
             </View>
           </Animated.View>
         </Animated.View>
+      </Modal>
     )
   );
 };