Improve mobile photo quality for uploads and media rendering

components/Media.js

@@ -1,6 +1,6 @@
 // Import necessary dependencies
 import React, { useState, useEffect } from 'react';
-import { View, TouchableHighlight, StyleSheet, FlatList, TouchableWithoutFeedback, TouchableOpacity, Share } from 'react-native';
+import { View, TouchableHighlight, StyleSheet, FlatList, TouchableWithoutFeedback, TouchableOpacity, Share, Dimensions, PixelRatio } from 'react-native';
 import { Button, Text, ProgressBar } from 'react-native-paper';
 import API from './../API.js';
 import VideoPlayer from './VideoPlayer.js';
@@ -71,7 +71,10 @@ let Media = (props) => {
     const viewer = gState.me;
 
     // Extracting tags from content
-    const imagesTag = imagesTagF(props.content, props.imageWidth || 1000, props.imageHeight || 1000);
+    const screenWidth = Dimensions.get('window').width;
+    const requestedImageWidth = props.imageWidth || Math.max(1200, Math.ceil(screenWidth * PixelRatio.get() * 1.2));
+    const requestedImageHeight = props.imageHeight || requestedImageWidth;
+    const imagesTag = imagesTagF(props.content, requestedImageWidth, requestedImageHeight);
     const imagesTagLimited = imagesTag.slice(0, 10);
     const isImagesCapped = imagesTag.length > imagesTagLimited.length;
     const imageStyle = imagesTag.length === 1 ? styles.image : styles.multipleImage;

components/NewPost.js

@@ -21,7 +21,7 @@ let NewPost = ({ profileid, newPostCB }) => {
             mediaTypes: ImagePicker.MediaTypeOptions.Images,
             //allowsEditing: true,
             //aspect: [4, 3],
-            quality: 0.2,
+            quality: 0.85,
             allowsMultipleSelection: true,
         });
         if (!result.canceled) {