Changes:

1. Updated fontScale use with a constant implementation 2. Fixed the current active case count Signed-off-by: sarthakpranesh <sarthak.pranesh2018@vitstudent.ac.in>
sarthakpranesh · Dec 19, 2020 · d596cae · d596cae
1 parent 42f8513
commit d596cae
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 35 deletions.
diff --git a/src/API/DiseaseApi.ts b/src/API/DiseaseApi.ts
@@ -14,7 +14,7 @@ export const fetchTimelineData: (country: String) => Promise<TimelineData[]> = (
           const r: TimelineData = {
             date: date,
             difference:
-              respData.timeline.cases[date] - respData.timeline.recovered[date]
+              respData.timeline.cases[date] - ( respData.timeline.recovered[date] + respData.timeline.deaths[date] )
           }
           return r
         })

diff --git a/src/Layout.ts b/src/Layout.ts
@@ -0,0 +1,13 @@
+import { Dimensions } from 'react-native';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+export default {
+  window: {
+    width,
+    height,
+  },
+  fontScale: width / 320,
+  isSmallDevice: width < 375,
+};
diff --git a/src/Styles.ts b/src/Styles.ts
@@ -1,6 +1,5 @@
-import { StyleSheet, Dimensions, Platform } from 'react-native'
-
-const { scale } = Dimensions.get('window')
+import { StyleSheet, Platform } from 'react-native'
+import Layout from './Layout';
 
 const Styles = StyleSheet.create({
   safeArea: {
@@ -24,7 +23,7 @@ const Styles = StyleSheet.create({
     textAlign: 'center',
     fontWeight: 'bold',
     color: '#D41D3E',
-    fontSize: 18 * scale
+    fontSize: 24 * Layout.fontScale,
   }
 })
 

diff --git a/src/components/CandleCharts.tsx b/src/components/CandleCharts.tsx
@@ -1,8 +1,11 @@
 import React, { useState, useEffect } from 'react'
-import { View, StyleSheet, ScrollView, Dimensions, Text, Animated } from 'react-native'
+import { View, StyleSheet, ScrollView, Text, Animated } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 
-const { width, scale } = Dimensions.get('screen')
+// importing constants
+import Layout from '../Layout'
+const scale = Layout.fontScale
+const width = Layout.window.width
 
 export interface CandleProps {
   data: any;
@@ -153,7 +156,7 @@ const styles = StyleSheet.create({
     color: 'black',
     marginTop: 0,
     fontWeight: 'bold',
-    fontSize: 12 * scale
+    fontSize: 18 * scale
   },
   animatedDataDialog: {
     color: 'black',

diff --git a/src/components/Country.tsx b/src/components/Country.tsx
@@ -1,21 +1,23 @@
 /* eslint-disable no-unused-vars */
 import React, { Component } from 'react'
-import { View, StyleSheet, Text, Dimensions } from 'react-native'
+import { View, StyleSheet, Text } from 'react-native'
 
 // importing components
 import RowStackResult from './RowStackResult'
 
 // importing types
 import { CountryCases } from '../API/NinjaApi'
 
+// importing constants
+import Layout from '../Layout';
+const scale = Layout.fontScale
+
 export interface CountryProps {
   data: CountryCases | null;
   countryName: String;
   containerStyle?: any;
 }
 
-const { scale } = Dimensions.get('window')
-
 class Country extends Component<CountryProps> {
   render () {
     const { containerStyle, countryName, data } = this.props
@@ -60,7 +62,7 @@ const styles = StyleSheet.create({
     color: 'black',
     marginTop: 0,
     fontWeight: 'bold',
-    fontSize: 12 * scale
+    fontSize: 18 * scale
   }
 })
 

diff --git a/src/components/PreventionCards.tsx b/src/components/PreventionCards.tsx
@@ -1,14 +1,15 @@
 import React, { Component } from 'react'
 import { View, StyleSheet, Image, Text, Dimensions } from 'react-native'
 
+import Layout from '../Layout';
+const scale = Layout.fontScale
+
 export interface PreventionProps {
   title: string;
   content: string;
   src: any;
 }
 
-const { scale } = Dimensions.get('window')
-
 class PreventionCards extends Component<PreventionProps> {
   render () {
     const { title, content, src } = this.props
@@ -37,7 +38,7 @@ const styles = StyleSheet.create({
   mainPreventionTitle: {
     color: 'black',
     fontWeight: 'bold',
-    fontSize: 10 * scale
+    fontSize: 18 * scale
   },
   preventionContentContainer: {
     flex: 1,
@@ -51,7 +52,7 @@ const styles = StyleSheet.create({
     flex: 2,
     color: 'black',
     textAlign: 'left',
-    fontSize: 8 * scale
+    fontSize: 12 * scale
   },
   preventionContentImage: {
     width: 100,

diff --git a/src/components/RowStackResult.tsx b/src/components/RowStackResult.tsx
@@ -1,13 +1,14 @@
 import React, { Component } from 'react'
 import { View, StyleSheet, Text, Dimensions } from 'react-native'
 
+import Layout from '../Layout'
+const scale = Layout.fontScale
+
 export interface RowStackProps {
   data: any;
   textColor?: string;
 }
 
-const { scale } = Dimensions.get('window')
-
 class RowStackResult extends Component<RowStackProps> {
   render () {
     const { data, textColor } = this.props
@@ -187,7 +188,7 @@ const styles = StyleSheet.create({
   resultNumbers: {
     fontWeight: 'bold',
     textAlign: 'center',
-    fontSize: 10 * scale
+    fontSize: 14 * scale
   }
 })
 

diff --git a/src/screens/AboutScreen.tsx b/src/screens/AboutScreen.tsx
@@ -1,14 +1,25 @@
 import React from 'react'
-import { View, StyleSheet, Image, Linking, TouchableOpacity, Text, Dimensions, ScrollView } from 'react-native'
+import {
+  View,
+  StyleSheet,
+  Image,
+  Linking,
+  TouchableOpacity,
+  Text,
+  ScrollView
+} from 'react-native'
 import Icon from 'react-native-vector-icons/Feather'
 
 // importing common style
 import Styles from '../Styles'
 
+// importing constants
+import Layout from '../Layout';
+const scale = Layout.fontScale;
+
 export interface AboutProps {
   style: any;
 }
-const { scale } = Dimensions.get('window')
 
 const AboutScreen = ({ style }: AboutProps) => {
   return (
@@ -63,7 +74,7 @@ const AboutScreen = ({ style }: AboutProps) => {
                 color: 'black',
                 textDecorationLine: 'underline',
                 fontWeight: 'bold',
-                fontSize: 10 * scale
+                fontSize: 12 * scale
               }}>
               Click Here to Know More
             </Text>
@@ -86,7 +97,7 @@ const AboutScreen = ({ style }: AboutProps) => {
               color: 'black',
               textAlign: 'center',
               fontWeight: 'bold',
-              fontSize: 10 * scale
+              fontSize: 18 * scale
             }}>
             Support Project
           </Text>
@@ -96,7 +107,7 @@ const AboutScreen = ({ style }: AboutProps) => {
                 'https://github.com/sarthakpranesh/Covid19-ReactNative'
               )
             }>
-            <Icon style={{ marginVertical: 10 }} name="github" color="black" size={18 * scale} />
+            <Icon style={{ marginVertical: 10 }} name="github" color="black" size={24 * scale} />
           </TouchableOpacity>
           <Text
             style={{
@@ -130,7 +141,7 @@ const styles = StyleSheet.create({
     textAlign: 'justify',
     color: 'black',
     marginVertical: 10,
-    fontSize: 8 * scale
+    fontSize: 12 * scale
   }
 })
 

diff --git a/src/screens/HelpScreen.tsx b/src/screens/HelpScreen.tsx
@@ -13,6 +13,10 @@ import {
 // importing common styles
 import Styles from '../Styles'
 
+// importing constants
+import Layout from '../Layout'
+const scale = Layout.fontScale
+
 const data = [
   {
     state: 'Central Help Line Number',
@@ -168,8 +172,6 @@ export interface HelpProps {
   style: any;
 }
 
-const { scale } = Dimensions.get('window')
-
 const HelpScreen = ({ style }: HelpProps) => {
   return (
     <View
@@ -210,7 +212,7 @@ const HelpScreen = ({ style }: HelpProps) => {
 
           <Text
             style={{
-              fontSize: 8 * scale,
+              fontSize: 12 * scale,
               paddingTop: 20,
               textAlign: 'center'
             }}>

diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx
@@ -121,13 +121,6 @@ const styles = StyleSheet.create({
     paddingVertical: 0,
     marginBottom: 0
   },
-  lineChartText: {
-    textAlign: 'center',
-    fontSize: 28,
-    fontWeight: 'bold',
-    color: 'black',
-    paddingVertical: 10
-  }
 })
 
 export default HomeScreen