fix: fix height issue on different devices

geeekgod · Oct 4, 2022 · 55b7077 · 55b7077
1 parent 2b53228
commit 55b7077
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 22 deletions.
diff --git a/app/screens/Walkthrough/components/Dots.js b/app/screens/Walkthrough/components/Dots.js
@@ -1,6 +1,6 @@
 import React, { memo } from "react";
 import { Animated, StyleSheet, View, ViewStyle } from "react-native";
-import { heightScreen, widthScreen } from "../../../utils/layout";
+import { widthScreen } from "../../../utils/layout";
 
 const Dots = memo((props) => {
   const { scrollX } = props;
@@ -87,8 +87,7 @@ const styles = StyleSheet.create({
   },
   container: {
     width: widthScreen,
-    position: "absolute",
-    top: heightScreen / 2 + 280,
+    paddingBottom: 30,
     alignItems: "center",
   },
   flexRow: {

diff --git a/app/screens/Walkthrough/components/WalktroughScreen.js b/app/screens/Walkthrough/components/WalktroughScreen.js
@@ -32,12 +32,12 @@ const WalkthroughScreen = memo((props) => {
         bg="#DE2A26"
         rounded="full"
         position="absolute"
-        top="-120"
-        right="-120"
+        top={heightScreen > 800 ? "-120" : "-150"}
+        right={heightScreen > 800 ? "-120" : "-150"}
       ></Box>
       {imageComponent()}
       <Text fontFamily='body' fontWeight="600" mt='6' fontSize='3xl'>{props.title}</Text>
-      <Text fontFamily='body' color='#7A7A7A' mt='4' fontWeight="400" fontSize='md' textAlign='center'>{props.intro}</Text>
+        <Text fontFamily='body' color='#7A7A7A' mt='4' fontWeight="400" fontSize='md' textAlign='center'>{props.intro}</Text>
     </View>
   );
 });
@@ -47,19 +47,11 @@ export default WalkthroughScreen;
 const styles = StyleSheet.create({
   container: {
     width: widthScreen,
-    flex: 1,
+    // flex: 1,
     backgroundColor: "#fff",
-    paddingHorizontal: 32,
+    paddingHorizontal: heightScreen > 800 ? 32 : 26,
     justifyContent: "center",
     alignItems: "center",
     position: "relative",
   },
-  imgBackground: {
-    position: "absolute",
-    bottom: 0,
-    width: widthScreen,
-    height: heightScreen,
-    zIndex: -20,
-    resizeMode: "stretch",
-  },
 });
diff --git a/app/screens/Walkthrough/index.js b/app/screens/Walkthrough/index.js
@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useRef, useState } from "react";
+import React, { memo, useRef, useState } from "react";
 import { Animated, ScrollView, StyleSheet, View } from "react-native";
 import WalkthroughScreen from "./components/WalktroughScreen";
 import Dots from "./components/Dots";
@@ -15,7 +15,7 @@ const data = [
   {
     id: 2,
     title: "Completely Free",
-    intro: "We will never charge you for using this platform.\nIf you are asked for money please contact us.",
+    intro: "We will never charge you for using this platform.",
   },
   {
     id: 3,
@@ -89,7 +89,8 @@ const Walkthrough = memo(() => {
           })}
         </ScrollView>
       </View>
-      <Box position='absolute' bottom='10' alignItems='center' w='full'>
+      <Box alignItems='center' w='full' backgroundColor='#fff' paddingBottom='1/6'>
+        <Dots scrollX={scrollX} />
         <IconButton
           onPress={() => handleNextBtn()}
           variant='solid'
@@ -99,7 +100,6 @@ const Walkthrough = memo(() => {
             size: '2xl'
           }} rounded='full' />
       </Box>
-      <Dots scrollX={scrollX} />
     </View>
   );
 });
@@ -112,8 +112,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   content: {
-    flex: 1,
-    backgroundColor: "red",
+    flex: 1
   },
   accountAsk: {
     padding: 8,