diff --git a/src/API/DiseaseApi.ts b/src/API/DiseaseApi.ts index 6febcd2..4d89556 100644 --- a/src/API/DiseaseApi.ts +++ b/src/API/DiseaseApi.ts @@ -14,7 +14,7 @@ export const fetchTimelineData: (country: String) => Promise = ( 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 new file mode 100644 index 0000000..39880ea --- /dev/null +++ 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, +}; \ No newline at end of file diff --git a/src/Styles.ts b/src/Styles.ts index 68b7afb..7a9359d 100644 --- 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 index 4a44d7d..b3bc79a 100644 --- 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 index cc43b01..cf9d14a 100644 --- a/src/components/Country.tsx +++ b/src/components/Country.tsx @@ -1,6 +1,6 @@ /* 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' @@ -8,14 +8,16 @@ 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 { 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 index 3d9217d..7b6fd27 100644 --- 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 { 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 index 4ade9c1..fe49a9a 100644 --- 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 { 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 index 663a87a..01e53d3 100644 --- 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 @@ -86,7 +97,7 @@ const AboutScreen = ({ style }: AboutProps) => { color: 'black', textAlign: 'center', fontWeight: 'bold', - fontSize: 10 * scale + fontSize: 18 * scale }}> Support Project @@ -96,7 +107,7 @@ const AboutScreen = ({ style }: AboutProps) => { 'https://github.com/sarthakpranesh/Covid19-ReactNative' ) }> - + { return ( { diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index aab8598..e20d48f 100644 --- 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