fix(mobile): create correctly sized screenshots with safe area added

tools/mobile/metadata/devices.ts

@@ -5,13 +5,35 @@ export const iosDevices = ['iPhone 13 Pro Max', 'iPhone 13 Pro', 'iPhone 8 Plus'
 // export const iosDevices = ['iPhone 13 Pro'];
 const iPhone8Plus = devices['iPhone 8 Plus'];
 (iPhone8Plus as any).screen = {
-  width: 1242 / iPhone8Plus.deviceScaleFactor,
-  height: 2208 / iPhone8Plus.deviceScaleFactor,
+  width: 414,
+  height: 736,
 };
+(iPhone8Plus as any).deviceScaleFactor = 3;
+(iPhone8Plus as any).safeAreaInsets = {
+  top: 20,
+  trailing: 0,
+  bottom: 0,
+  leading: 0,
+};
+// iPhone8
 const iPhone8 = devices['iPhone 8'];
 (iPhone8 as any).screen = {
-  width: 750 / iPhone8.deviceScaleFactor,
-  height: 1334 / iPhone8.deviceScaleFactor,
+  width: 375,
+  height: 667,
+};
+(iPhone8 as any).deviceScaleFactor = 2;
+(iPhone8 as any).safeAreaInsets = {
+  top: 20,
+  trailing: 0,
+  bottom: 0,
+  leading: 0,
+};
+
+(devices['iPhone 13 Pro'] as any).safeAreaInsets = (devices['iPhone 13 Pro Max'] as any).safeAreaInsets = {
+  top: 59,
+  bottom: 34,
+  trailing: 0,
+  leading: 0,
 };
 
-export const androidDevices = ['Pixel 5'];
+export const androidDevices = ['Pixel 7'];

tools/mobile/metadata/metadata.ts

@@ -21,7 +21,17 @@ async function asyncPoolAll(...args) {
 }
 
 async function screenshot(page: Page, viewport, path: string, background = 'white') {
+  // Apply safe area insets
+  let styles = '';
+  for (const [key, value] of Object.entries(viewport.safeAreaInsets)) {
+    styles += `--ion-safe-area-${key}: ${value}px;`;
+  }
+  const htmlEl = await page.$('html');
+  await htmlEl.evaluate((el, styles) => el.setAttribute('style', styles), styles);
+
   await page.screenshot({path, fullPage: false});
+
+  // Resize screenshot to required size (including zoom)
   const res = `${viewport.width}x${viewport.height}`;
   const cmd = `convert ${path} -resize ${res} -background ${background} -gravity center -extent ${res} ${path}`;
   console.log(execSync(cmd, {encoding: 'utf8'}).toString());
@@ -81,14 +91,23 @@ async function makeIOS(
   const filePath = (locale, file, base = 'metadata') => `ios/App/fastlane/${base}/${locale}/${file}`;
   const imgPath = (locale, {width, height}, name) => filePath(locale, `${name}_${width}x${height}.png`, 'screenshots');
 
-  const {deviceScaleFactor, screen} = devices[device] as any;
+  const {deviceScaleFactor, screen, safeAreaInsets} = devices[device] as any;
+  const ionSafeAreaInsets = !safeAreaInsets
+    ? {}
+    : {
+        top: safeAreaInsets.top,
+        bottom: safeAreaInsets.bottom,
+        left: safeAreaInsets.trailing,
+        right: safeAreaInsets.leading,
+      };
   const cViewport = {
     height: Math.floor(screen.height * deviceScaleFactor),
     width: Math.floor(screen.width * deviceScaleFactor),
+    safeAreaInsets: ionSafeAreaInsets,
   };
   await screenshot(page, cViewport, imgPath(locale, cViewport, 'main'));
   // Copy main page for the about page
-  if (device === 'iPhone 14 Pro') {
+  if (device === 'iPhone 13 Pro') {
     fs.copyFileSync(imgPath(locale, cViewport, 'main'), `${assetsDir}/iphone/${pageLang}.png`);
   }
 
@@ -148,6 +167,7 @@ async function main() {
       locale,
       ...devices[device],
     };
+    options.viewport = (options as any).screen; // Now that we support safeAreaInsets, we can use the screen size
     const browser = options.defaultBrowserType === 'webkit' ? webkitBrowser : chromiumBrowser;
     const context = await browser.newContext(options);
     const page = await context.newPage();