LetterBox effect and larger fonts appearing on iPhone CE

[tkoolhoven2]

Hi

I'm new to using react native and am using react-native-view-shot to capture a view. I have been struggling to figure out how to prevent the letterbox effect and larger font size from appearing on my SE iPhone. The capture of a simple view was done on an Iphone 12 and sent to my SE phone (via whatsapp). I know there is no way of telling what your target device is. But how do most people get around this issue? They simply just accept it because of (16:9) for SE and iPhone 12 (19.5:9)? The code works fine on the device itself. It's just when you send from an iPhone 12 to SE, and view the image on the SE, you get a larger font and letterboxing. Surely there must be a way around this. Your help would be much appreciated.

``
import { PixelRatio, Dimensions } from "react-native";
import { captureRef } from "react-native-view-shot";
import * as FileSystem from "expo-file-system";
import * as Sharing from "expo-sharing";

export const captureShare = async (viewRef) => {
try {
if (!viewRef) return;

const { width, height } = Dimensions.get("window");
const pixelRatio = PixelRatio.get();

// Define target resolution based on pixel density
const targetWidth = width * pixelRatio; // Adjust width based on screen size and pixel ratio
const targetHeight = height * pixelRatio; // Adjust height similarly

const uri = await captureRef(viewRef, {
  format: "png",
  quality: 1,
  result: "tmpfile",
  height: targetHeight, // Use dynamically calculated height
  width: targetWidth,   // Use dynamically calculated width
});

console.log("Captured URI:", uri);

// Save the captured file
const fileInfo = await FileSystem.getInfoAsync(uri);
if (fileInfo.exists) {
  const filePath = `${FileSystem.cacheDirectory}screenshot.png`;
  await FileSystem.copyAsync({ from: uri, to: filePath });

  if (await Sharing.isAvailableAsync()) {
    await Sharing.shareAsync(filePath);
  } else {
    alert("Sharing is not available on this device.");
  }
} else {
  alert("Failed to capture the screenshot.");
}

} catch (error) {
console.error("Error capturing or sharing screenshot:", error);
}
};