From 4ac7f0bddac3b0c83f3b853e094c98551f47db4a Mon Sep 17 00:00:00 2001 From: Siddarth Kumar Date: Mon, 6 Nov 2023 23:55:06 +0530 Subject: [PATCH] update docs & makefile for iPhone 13 (#17784) The design team has now decided to keep iPhone 13 as the baseline standard instead of iPhone 11 Pro. This commit updates the docs on pixel perfection and starting guide. We also update the default simulator to iPhone 13 for `make run-ios` --- Makefile | 2 +- doc/pixel-perfection.md | 12 +++++++++--- doc/starting-guide.md | 10 +++++----- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/Makefile b/Makefile index cac85e9d01..d022e203e5 100644 --- a/Makefile +++ b/Makefile @@ -278,7 +278,7 @@ run-android: export ANDROID_ABI_INCLUDE ?= $(shell ./scripts/adb_devices_abis.sh run-android: ##@run Build Android APK and start it on the device npx react-native run-android --appIdSuffix debug -SIMULATOR=iPhone 11 Pro +SIMULATOR=iPhone 13 run-ios: export TARGET := ios run-ios: export IOS_STATUS_GO_TARGETS := iossimulator/amd64 run-ios: ##@run Build iOS app and start it in a simulator/device diff --git a/doc/pixel-perfection.md b/doc/pixel-perfection.md index 1199d92e93..49a4bd4525 100644 --- a/doc/pixel-perfection.md +++ b/doc/pixel-perfection.md @@ -1,16 +1,22 @@ # Pixel Perfection The Status Mobile team aims to align the design implementation perfectly according to a given screens respective Figma design spec. -Currently the Figma Designs match up with an "iPhone 11 Pro" screen size. +Currently, the Figma Designs match up with both "iPhone 11 Pro" and "iPhone 13" screen size. + +The Dimension reference for iPhone 11 Pro is 375 x 812 (width x height) and for iPhone 13 is 390 x 844. To test your implementation is correct you can take the following steps - Open a new Figma file so that you have write privileges. + - Copy in the component or screen from the Figma file. -- Using the "iPhone 11 Pro" simulator (it is the default now) you take a screenshot of your component and paste it into your Figma file. +- Using the "iPhone 11 Pro" or the "iPhone 13" simulator (it is the default now) you take a screenshot of your component and paste it into your Figma file. + +- To get the right size, set your screenshot to width according to your simulator: + - for iPhone 13 set 390 + - for iPhone 11 Pro set 375 -- To get the right size, set your screenshot to width 375px ![](images/pixel-perfection/layer-width.png) diff --git a/doc/starting-guide.md b/doc/starting-guide.md index b96eaebc50..9f8e55721b 100644 --- a/doc/starting-guide.md +++ b/doc/starting-guide.md @@ -30,23 +30,23 @@ You need to have an emulator like [AVD](https://developer.android.com/studio/run #### Running on a simulator -We highly recommend using the `iPhone 11 Pro` simulator as its screen dimensions match with our design. +We highly recommend using either the `iPhone 11 Pro` or `iPhone 13` simulator as its screen dimensions match with our design. -If you have Xcode `v12.x` (and above) installed in your system, you need to follow the below steps to add `iPhone 11 Pro` simulator: +If you have Xcode `v12.x` (and above) installed in your system, you need to follow the below steps to add `iPhone 13` simulator: 1. Open Xcode 2. Menu `>` Window `>` Devices and Simulators 3. Tap `+` button on bottom left -4. Select **Device Type** as `iPhone 11 Pro` +4. Select **Device Type** as `iPhone 13` 5. Leave the **Simulator Name** empty and tap on **Create** ##### NOTE ⚠️ -Running `make run-ios` will target `iPhone 11 Pro` by default. +Running `make run-ios` will target `iPhone 13` by default. If you need to run on any other simulator, you can specify the simulator type by adding the `SIMULATOR` flag: ```sh -make run-ios SIMULATOR="iPhone 11 Pro" +make run-ios SIMULATOR="iPhone 13" ``` #### Running on a physical device