🔧 Fixes: Font size, map size, icon sizes, card text wrap

aminmeshk · Sep 14, 2020 · 6bedd40 · 6bedd40
1 parent 2a1e62e
commit 6bedd40
Show file tree

Hide file tree

Showing 8 changed files with 161 additions and 41 deletions.
diff --git a/components/DeviceAction.js b/components/DeviceAction.js
@@ -1,6 +1,7 @@
 import { Card, Icon, View, Text, ListItem } from 'native-base';
 import React from 'react';
 import { StyleSheet, TouchableNativeFeedback } from 'react-native';
+import myAppTheme from '../native-base-theme/variables/myAppTheme';
 
 const DeviceAction = ({
   id,
@@ -14,7 +15,10 @@ const DeviceAction = ({
 }) => {
   return (
     <Card style={{ ...styles.card, ...style }}>
-      <TouchableNativeFeedback style={styles.touchable} onPress={() => {}}>
+      <TouchableNativeFeedback
+        style={styles.touchable}
+        onPress={() => {}}
+        useForeground>
         <View style={styles.container}>
           <View style={{ ...styles.iconContainer, backgroundColor: color }}>
             {iconType ? (
@@ -57,14 +61,14 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   icon: {
-    fontSize: 50,
+    fontSize: myAppTheme.iconFontSize * 1.8,
     color: 'white',
     textAlign: 'center',
   },
   iconText: {
     fontFamily: 'sans-serif',
     fontWeight: 'bold',
-    fontSize: 22,
+    fontSize: myAppTheme.DefaultFontSize * 1.7,
     color: 'white',
   },
   iconContainer: {
@@ -93,7 +97,7 @@ const styles = StyleSheet.create({
   },
   description: {
     opacity: 0.6,
-    fontSize: 13,
+    fontSize: myAppTheme.DefaultFontSize * 0.8,
   },
 });
 

diff --git a/components/DeviceInfoCard.js b/components/DeviceInfoCard.js
@@ -78,6 +78,8 @@ const styles = StyleSheet.create({
   },
   infoText: {
     color: Colors.secondaryText,
+    flex: 1,
+    textAlign: 'left',
   },
 });
 

diff --git a/components/DeviceItem.js b/components/DeviceItem.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   Body,
   Card,
@@ -11,7 +11,7 @@ import {
   Left,
   Button,
 } from 'native-base';
-import { StyleSheet, Image } from 'react-native';
+import { StyleSheet, Image, PixelRatio } from 'react-native';
 import { env } from '../constants/env';
 
 const DeviceItem = ({
@@ -26,8 +26,57 @@ const DeviceItem = ({
   onMorePress,
   style,
 }) => {
+  const [imageWidth, setImageWidth] = useState(0);
+  const [imageHeight, setImageHeight] = useState(0);
+  const [uri, setUri] = useState(
+    `https://map.ir/static?width=${imageWidth}&height=${imageHeight}&zoom_level=16&markers=color:skyblue|label:${name}|${lng},${lat}`,
+  );
+
+  const imageLayoutChanged = useCallback(
+    (width, height) => {
+      if (width === 0 || height === 0) {
+        return;
+      }
+      if (width === imageWidth && height === imageHeight) {
+        return;
+      }
+
+      console.log('PixelRatio: ' + PixelRatio.get());
+      if (width <= 1200 && height <= 1200) {
+        width = width * 1.5;
+        height = height * 1.5;
+        // console.log('Actual Width: ' + width);
+        // width = PixelRatio.getPixelSizeForLayoutSize(width);
+        // height = PixelRatio.getPixelSizeForLayoutSize(height);
+        // console.log('Pixel Width: ' + width);
+      }
+
+      let newWidth;
+      let newHeight;
+      if (width <= 1200 && height <= 1200) {
+        newWidth = width;
+        newHeight = height;
+      } else if (height > width) {
+        newWidth = 1200 * (width / height);
+        newHeight = 1200;
+      } else {
+        newHeight = 1200 * (height / width);
+        newWidth = 1200;
+      }
+      setImageWidth(newWidth);
+      setImageHeight(newHeight);
+    },
+    [imageWidth, setImageWidth, imageHeight, setImageHeight],
+  );
+
+  useEffect(() => {
+    console.log(`Layout: ${imageWidth}, ${imageHeight}`);
+    setUri(
+      `https://map.ir/static?width=${imageWidth}&height=${imageHeight}&zoom_level=16&markers=color:skyblue|label:${name}|${lng},${lat}`,
+    );
+  }, [imageWidth, imageHeight, name, lng, lat, setUri]);
+
   // const mapImageUri = `https://api.neshan.org/v2/static?key=${env.neshanApiKey}&type=dreamy-gold&zoom=17&center=${lat},${lng}&width=400&height=800&marker=red`;
-  const mapImageUri = `https://map.ir/static?width=700&height=1200&zoom_level=16&markers=color:skyblue|label:${name}|${lng},${lat}`;
   const mapImageHeaders = {
     accept: 'image/png',
     'x-api-key': env.mapIrApiKey,
@@ -37,9 +86,15 @@ const DeviceItem = ({
     <Card style={{ ...styles.card, ...style }}>
       <Image
         style={styles.image}
-        source={{ uri: mapImageUri, headers: mapImageHeaders }}
+        source={{ uri: uri, headers: mapImageHeaders }}
+        onLayout={(event) => {
+          imageLayoutChanged(
+            event.nativeEvent.layout.width,
+            event.nativeEvent.layout.height,
+          );
+        }}
       />
-      <CardItem style={styles.cardItem}>
+      <CardItem style={{ ...styles.cardItem, marginTop: 4 }}>
         <Icon
           style={styles.primaryText}
           type="MaterialCommunityIcons"
@@ -88,23 +143,21 @@ const styles = StyleSheet.create({
   card: {
     borderRadius: 10,
     overflow: 'hidden',
-    marginLeft: 10,
-    // maxWidth: '100%',
-    // maxWidth: 350,
   },
   image: {
     resizeMode: 'cover',
-    width: 400,
+    // width: 400,
     // height: 500,
     flex: 1,
   },
   cardItem: {
-    paddingTop: 4,
-    paddingBottom: 4,
+    paddingTop: 0,
+    paddingBottom: 0,
     alignItems: 'flex-start',
   },
   bodyText: {
     marginStart: 6,
+    flex: 1,
   },
   primaryText: {
     opacity: 0.8,

diff --git a/components/LocationCard.js b/components/LocationCard.js
@@ -1,31 +1,74 @@
 import { Button, Card, Icon, Text, View } from 'native-base';
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   StyleSheet,
   useWindowDimensions,
   Image,
   Linking,
   Platform,
   TouchableNativeFeedback,
+  PixelRatio,
 } from 'react-native';
 import { env } from '../constants/env';
 import Colors from '../constants/Colors';
 
 const LocationCard = ({ style, lat, lng, name }) => {
-  const window = useWindowDimensions();
-  const mapImageUri = `https://map.ir/static?width=700&height=1200&zoom_level=16&markers=color:skyblue|label:${name}|${lng},${lat}`;
+  const [imageWidth, setImageWidth] = useState(0);
+  const [imageHeight, setImageHeight] = useState(0);
+  const [uri, setUri] = useState(
+    `https://map.ir/static?width=${imageWidth}&height=${imageHeight}&zoom_level=16&markers=color:skyblue|label:${name}|${lng},${lat}`,
+  );
   const mapImageHeaders = {
     accept: 'image/png',
     'x-api-key': env.mapIrApiKey,
   };
 
+  const imageLayoutChanged = useCallback(
+    (width, height) => {
+      console.log(`imageLayoutChanged: ${width}, ${height}`);
+      if (width === 0 || height === 0) {
+        return;
+      }
+      if (width === imageWidth && height === imageHeight) {
+        return;
+      }
+
+      if (width <= 1200 && height <= 1200) {
+        width = PixelRatio.getPixelSizeForLayoutSize(width);
+        height = PixelRatio.getPixelSizeForLayoutSize(height);
+      }
+
+      let newWidth;
+      let newHeight;
+      if (width <= 1200 && height <= 1200) {
+        newWidth = width;
+        newHeight = height;
+      } else if (height > width) {
+        newWidth = 1200 * (width / height);
+        newHeight = 1200;
+      } else {
+        newHeight = 1200 * (height / width);
+        newWidth = 1200;
+      }
+      setImageWidth(newWidth);
+      setImageHeight(newHeight);
+    },
+    [imageWidth, setImageWidth, imageHeight, setImageHeight],
+  );
+
+  useEffect(() => {
+    setUri(
+      `https://map.ir/static?width=${imageWidth}&height=${imageHeight}&zoom_level=16&markers=color:skyblue|label:${name}|${lng},${lat}`,
+    );
+  }, [imageWidth, imageHeight, name, lng, lat, setUri]);
+
   const openGoogleMapsHandler = () => {
     const scheme = Platform.select({
       ios: 'maps:0,0?q=',
       android: 'geo:0,0?q=',
     });
     const latLng = `${lat},${lng}`;
-    const label = { name };
+    const label = name;
     const url = Platform.select({
       ios: `${scheme}${label}@${latLng}`,
       android: `${scheme}${latLng}(${label})`,
@@ -37,10 +80,17 @@ const LocationCard = ({ style, lat, lng, name }) => {
     <Card style={{ ...styles.card, ...style }}>
       <TouchableNativeFeedback
         onPress={openGoogleMapsHandler}
-        style={{ flex: 1 }}>
+        style={{ flex: 1 }}
+        useForeground
+        onLayout={(event) => {
+          imageLayoutChanged(
+            event.nativeEvent.layout.width,
+            event.nativeEvent.layout.height,
+          );
+        }}>
         <Image
           style={styles.image}
-          source={{ uri: mapImageUri, headers: mapImageHeaders }}
+          source={{ uri: uri, headers: mapImageHeaders }}
         />
       </TouchableNativeFeedback>
       <View style={styles.cardItem}>
@@ -69,10 +119,6 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     borderRadius: 10,
   },
-  map: {
-    height: 800,
-    width: 600,
-  },
   image: {
     resizeMode: 'cover',
     flex: 1,
@@ -95,7 +141,7 @@ const styles = StyleSheet.create({
   },
   icon: {
     color: Colors.primary,
-    fontSize: 36,
+    // fontSize: 36,
   },
 });
 

diff --git a/native-base-theme/variables/myAppTheme.js b/native-base-theme/variables/myAppTheme.js
@@ -175,9 +175,9 @@ export default {
   fabWidth: 56,
 
   // Font
-  DefaultFontSize: 16,
+  DefaultFontSize: 14,
   fontFamily: platform === PLATFORM.IOS ? 'System' : 'shabnam',
-  fontSizeBase: 15,
+  fontSizeBase: 14,
   get fontSizeH1() {
     return this.fontSizeBase * 1.8;
   },
@@ -299,8 +299,8 @@ export default {
   },
 
   // Title
-  titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'shabnam-bold',
-  titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
+  titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'shabnam',
+  titleFontSize: platform === PLATFORM.IOS ? 17 : 18,
   subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
   subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF',
   titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF',

diff --git a/navigation/AppNavigator.js b/navigation/AppNavigator.js
@@ -5,13 +5,15 @@ import DeviceDetailScreen from '../screens/DeviceDetailScreen';
 import DeviceLocationScreen from '../screens/DeviceLocationScreen';
 import { createStackNavigator } from '@react-navigation/stack';
 import Colors from '../constants/Colors';
+import myAppTheme from '../native-base-theme/variables/myAppTheme';
 
 const defaultNavOptions = {
   headerStyle: {
     backgroundColor: Colors.primary,
   },
   headerTitleStyle: {
-    fontFamily: 'shabnam',
+    fontFamily: myAppTheme.titleFontfamily,
+    fontSize: myAppTheme.titleFontSize,
   },
   headerTintColor: 'white',
 };

diff --git a/screens/DeviceDetailScreen.js b/screens/DeviceDetailScreen.js
@@ -32,7 +32,7 @@ const DeviceDetailScreen = ({ navigation, route }) => {
             type="MaterialCommunityIcons"
             name="map-marker-radius-outline"
             color="white"
-            style={{ color: 'white' }}
+            style={{ color: 'white', fontSize: myAppTheme.iconFontSize }}
           />
         </Button>
       ),