Code refactor for web

Signed-off-by: sarthakpranesh <[email protected]>
sarthakpranesh · Feb 24, 2021 · dfc59df · dfc59df
1 parent 22f0370
commit dfc59df
Show file tree

Hide file tree

Showing 12 changed files with 125 additions and 85 deletions.
diff --git a/App.tsx b/App.tsx
@@ -1,36 +1,16 @@
-import React, { useEffect, useState } from 'react'
-import { Dimensions, PermissionsAndroid, Platform } from 'react-native'
+import React, { useEffect } from 'react'
+import { PermissionsAndroid, Platform } from 'react-native'
 import Geolocation from 'react-native-geolocation-service'
-import LinearGradient from 'react-native-linear-gradient'
-import { NavigationContainer } from '@react-navigation/native'
 import { createAppContainer, createSwitchNavigator } from 'react-navigation'
-import { createDrawerNavigator } from '@react-navigation/drawer'
 
-import Animated from 'react-native-reanimated'
-
-import { DrawerContent, Screens } from './src/components/navigation/Drawer'
+// Importing RootNavigator
+import RootNavigator from './src/components/navigation/index'
 
+// Importing Hooks
 import getLocationHook from './src/hooks/getLocationHook'
 
-const Drawer = createDrawerNavigator()
-
-const isLargeScreen = Dimensions.get('window').width > 760;
-
 const MainApp = () => {
   const [getLocation, country] = getLocationHook()
-  const [progress, setProgress] = useState<Animated.Node<number>>(
-    new Animated.Value(0)
-  )
-  const scale = Animated.interpolate(progress, {
-    inputRange: [0, 1],
-    outputRange: [1, 0.8]
-  })
-  const borderRadius = Animated.interpolate(progress, {
-    inputRange: [0, 1],
-    outputRange: [0, 16]
-  })
-
-  const animatedStyle = { borderRadius, transform: [{ scale }] }
 
   useEffect(() => {
     // some bug in react native
@@ -92,32 +72,7 @@ const MainApp = () => {
     }, 100)
   }, [])
 
-  return country !== '' ? (
-    <NavigationContainer>
-      <LinearGradient
-        colors={['#DEF7FF', '#B1ECFF']}
-        style={{ flex: 1, backgroundColor: 'white' }}>
-        <Drawer.Navigator
-          edgeWidth={100}
-          initialRouteName="Screens"
-          drawerType={isLargeScreen ? 'permanent' : 'slide'}
-          overlayColor="transparent"
-          drawerStyle={{
-            width: isLargeScreen ? '20%' : '50%',
-            backgroundColor: 'transparent'
-          }}
-          sceneContainerStyle={{ backgroundColor: 'transparent' }}
-          drawerContent={(p) => {
-            setProgress(p.progress)
-            return <DrawerContent {...p} country={country} />
-          }}>
-          <Drawer.Screen name="Screens">
-            {(p) => <Screens {...p} style={animatedStyle} country={country} />}
-          </Drawer.Screen>
-        </Drawer.Navigator>
-      </LinearGradient>
-    </NavigationContainer>
-  ) : null
+  return <RootNavigator country={country} />
 }
 
 const UserStartingSwitch = createSwitchNavigator(

diff --git a/src/Layout.ts b/src/Layout.ts
@@ -8,7 +8,9 @@ export default {
     width,
     height
   },
-  fontScale: width >= 760 ? 1.2 : width / 320,
+  largeScreenBreak: 720,
+  smallScreenBreak: 375,
+  fontScale: width >= 720 ? width / 720 : width / 375,
   isSmallDevice: width < 375,
   isLargeDevice: width > 720
 }
diff --git a/src/Styles.ts b/src/Styles.ts
@@ -2,11 +2,15 @@ import { StyleSheet, Platform } from 'react-native'
 import Layout from './Layout'
 
 const Styles = StyleSheet.create({
-  safeArea: {
+  scrollView: {
     flex: 1,
-    backgroundColor: '#DEF7FF',
-    paddingVertical: Layout.isLargeDevice ? 0 : 10,
-    paddingHorizontal: Layout.isLargeDevice ? 100 : 10
+    backgroundColor: '#DEF7FF'
+  },
+  scrollViewContentContainer: {
+    width: Layout.isLargeDevice ? Layout.window.width / 2 : Layout.window.width,
+    marginVertical: 10,
+    paddingHorizontal: 10,
+    alignSelf: 'center'
   },
   mainHeader: {
     flex: 1,
@@ -16,14 +20,14 @@ const Styles = StyleSheet.create({
     justifyContent: 'center',
     alignContent: 'center',
     paddingVertical: 40,
-    paddingTop: Platform.OS === "ios" ? 80 : 40,
+    paddingTop: Platform.OS === 'ios' ? 80 : 40,
     paddingBottom: 40
   },
   mainHeaderText: {
     textAlign: 'center',
     fontWeight: 'bold',
     color: '#D41D3E',
-    fontSize: 24 * Layout.fontScale,
+    fontSize: 24 * Layout.fontScale
   }
 })
 

diff --git a/src/components/navigation/Drawer.tsx b/src/components/navigation/Drawer.tsx
@@ -1,6 +1,7 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable react/display-name */
 import React from 'react'
-import { View, StyleSheet, TouchableOpacity, Dimensions } from 'react-native'
+import { View, StyleSheet, TouchableOpacity } from 'react-native'
 import { createStackNavigator } from '@react-navigation/stack'
 import { DrawerContentScrollView } from '@react-navigation/drawer'
 import Animated from 'react-native-reanimated'
@@ -27,39 +28,45 @@ import {
 import Layout from '../../Layout'
 const scale = Layout.fontScale
 
-const isLargeDevice = Dimensions.get('window').width
-
 const Stack = createStackNavigator()
 
 export interface ScreensProps {
   navigation: any;
   style: any;
   country: String;
+  isLargeDevice: boolean;
 }
 
-export const Screens = ({ navigation, style, country }: ScreensProps) => {
-  const stylesForAnimatedView = isLargeDevice ? [{ flex: 1 }] : [styles.stack, style]
+export const Screens = ({ navigation, style, country, isLargeDevice }: ScreensProps) => {
+  const stylesForAnimatedView = Layout.isLargeDevice ? [{ flex: 1 }] : [styles.stack, style]
+
   return (
     <Animated.View style={StyleSheet.flatten(stylesForAnimatedView)}>
       <Stack.Navigator
         initialRouteName="Home"
         screenOptions={{
-          animationEnabled: false,
+          animationEnabled: true,
           headerTransparent: true,
           title: '',
-          headerShown: !Layout.isLargeDevice,
+          headerShown: !isLargeDevice,
           headerLeft: () => (
             <TouchableOpacity
               style={{
-                padding: 7,
                 marginLeft: 14,
                 borderRadius: 8,
-                elevation: 2
+                elevation: 2,
+                backgroundColor: 'white'
               }}
-              // eslint-disable-next-line react/prop-types
               onPress={() => navigation.openDrawer()}
             >
-              <Menu width={18 * scale} color="black" />
+              <Menu
+                style={{
+                  margin: 8,
+                  scaleX: scale,
+                  scaleY: scale
+                }}
+                color="black"
+              />
             </TouchableOpacity>
           )
         }}>

diff --git a/src/components/navigation/DrawerItem.tsx b/src/components/navigation/DrawerItem.tsx
@@ -19,11 +19,11 @@ const DrawerItem = ({ label, onPress, Icon, style }: DrawerItemProps) => {
       <View style={styles.innerDrawerItemContainer}>
         {
           Icon({
-            width: 22 * scale,
-            height: 22 * scale,
             color: 'black',
             style: {
-              paddingHorizontal: 4
+              paddingHorizontal: 4,
+              scaleX: scale,
+              scaleY: scale
             }
           })
         }

diff --git a/src/components/navigation/index.tsx b/src/components/navigation/index.tsx
@@ -0,0 +1,72 @@
+import React, { useState } from 'react'
+import { Dimensions } from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import { NavigationContainer } from '@react-navigation/native'
+import { createDrawerNavigator } from '@react-navigation/drawer'
+import Animated from 'react-native-reanimated'
+
+import { DrawerContent, Screens } from './Drawer'
+
+import Layout from '../../Layout'
+const Drawer = createDrawerNavigator()
+
+export type RootNavigatorProps = {
+    country: string,
+}
+
+const RootNavigator = (props: RootNavigatorProps) => {
+  const [isLargeDevice, setIsLargeDevice] = useState<boolean>(Layout.isLargeDevice)
+  const [progress, setProgress] = useState<Animated.Node<number>>(
+    new Animated.Value(0)
+  )
+  const scale = Animated.interpolate(progress, {
+    inputRange: [0, 1],
+    outputRange: [1, 0.8]
+  })
+  const borderRadius = Animated.interpolate(progress, {
+    inputRange: [0, 1],
+    outputRange: [0, 16]
+  })
+
+  const animatedStyle = { borderRadius, transform: [{ scale }] }
+
+  Dimensions.addEventListener('change', ({ window }) => {
+    if (isLargeDevice !== (window.width > Layout.largeScreenBreak)) {
+      setIsLargeDevice(window.width > Layout.largeScreenBreak)
+    }
+  })
+
+  return (
+    <NavigationContainer>
+      <LinearGradient
+        colors={['#DEF7FF', '#B1ECFF']}
+        style={{ flex: 1, backgroundColor: '#B1ECFF' }}>
+        <Drawer.Navigator
+          edgeWidth={100}
+          initialRouteName="Screens"
+          drawerType={isLargeDevice ? 'permanent' : 'slide'}
+          overlayColor="transparent"
+          drawerStyle={{
+            width: isLargeDevice ? '20%' : '50%',
+            backgroundColor: 'transparent'
+          }}
+          sceneContainerStyle={{ backgroundColor: 'transparent' }}
+          drawerContent={(p) => {
+            setProgress(p.progress)
+            return <DrawerContent {...p} country={props.country} />
+          }}>
+          <Drawer.Screen name="Screens">
+            {(p) => <Screens
+              {...p} 
+              style={animatedStyle} 
+              country={props.country}
+              isLargeDevice={isLargeDevice}
+            />}
+          </Drawer.Screen>
+        </Drawer.Navigator>
+      </LinearGradient>
+    </NavigationContainer>
+  )
+}
+
+export default RootNavigator
diff --git a/src/hooks/getLocationHook.ts b/src/hooks/getLocationHook.ts
@@ -5,7 +5,7 @@ export interface Coords {
   long: number;
 }
 
-const getLocationHook = (): [Function, String] => {
+const getLocationHook = (): [Function, string] => {
   const [results, setResults] = useState('')
 
   const getLocation: Function = async (coords: Coords) => {

diff --git a/src/screens/AboutScreen.tsx b/src/screens/AboutScreen.tsx
@@ -30,11 +30,11 @@ const AboutScreen = ({ style }: AboutProps) => {
         flex: 1,
         alignItems: 'stretch',
         justifyContent: 'center',
-        backgroundColor: 'pink',
         ...style
       }}>
       <ScrollView
-        style={Styles.safeArea}
+        style={Styles.scrollView}
+        contentContainerStyle={Styles.scrollViewContentContainer}
         alwaysBounceVertical={true}
         showsVerticalScrollIndicator={false}>
         <View style={Styles.mainHeader}>
@@ -133,8 +133,6 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     paddingHorizontal: 10,
     borderRadius: 5,
-
-    flex: 1,
     flexWrap: 'wrap',
     flexDirection: 'row',
     justifyContent: 'center'

diff --git a/src/screens/HelpScreen.tsx b/src/screens/HelpScreen.tsx
@@ -6,8 +6,7 @@ import {
   Linking,
   FlatList,
   ScrollView,
-  Text,
-  Dimensions,
+  Text
 } from 'react-native'
 
 // importing common styles
@@ -183,7 +182,8 @@ const HelpScreen = ({ style }: HelpProps) => {
         ...style
       }}>
       <ScrollView
-        style={Styles.safeArea}
+        style={Styles.scrollView}
+        contentContainerStyle={Styles.scrollViewContentContainer}
         alwaysBounceVertical={true}
         showsVerticalScrollIndicator={false}>
         <View style={Styles.mainHeader}>
@@ -246,7 +246,7 @@ const styles = StyleSheet.create({
   helpLineText: {
     textAlign: 'center',
     color: 'black',
-    fontSize: 12 * scale
+    fontSize: 14 * scale
   },
   numberContainer: {
     alignSelf: 'center',

diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx
@@ -82,7 +82,8 @@ const HomeScreen = ({ style, country }: HomeProps) => {
         ...style
       }}>
       <ScrollView
-        style={Styles.safeArea}
+        style={Styles.scrollView}
+        contentContainerStyle={Styles.scrollViewContentContainer}
         alwaysBounceVertical={true}
         showsVerticalScrollIndicator={false}
         refreshControl={

diff --git a/src/screens/PrecautionScreen.tsx b/src/screens/PrecautionScreen.tsx
@@ -18,11 +18,11 @@ const Precaution = ({ style }: PrecautionProps) => {
         flex: 1,
         alignItems: 'stretch',
         justifyContent: 'center',
-        backgroundColor: 'pink',
         ...style
       }}>
       <ScrollView
-        style={[Styles.safeArea, { paddingBottom: 0 }]}
+        style={Styles.scrollView}
+        contentContainerStyle={Styles.scrollViewContentContainer}
         alwaysBounceVertical={true}
         showsVerticalScrollIndicator={false}>
         <View style={Styles.mainHeader}>

diff --git a/src/screens/TopHeadlinesScreen.tsx b/src/screens/TopHeadlinesScreen.tsx
@@ -46,7 +46,8 @@ const TopHeadlinesScreen = ({ style, navigation }: TopHeadlineProps) => {
         ...style
       }}>
       <ScrollView
-        style={Styles.safeArea}
+        style={Styles.scrollView}
+        contentContainerStyle={Styles.scrollViewContentContainer}
         alwaysBounceVertical={true}
         showsVerticalScrollIndicator={false}
         refreshControl={