Devices and settings

The screen sizes and system settings to exercise while the bagel-qa-react-native app is open. How to run that app, and what to check for each topic, is on the React Native QA process.

Screen sizes

Widths below are the React Native layout size: points on iOS, dp on Android. The layout breakpoint is the width token the library uses for responsive props. Those tokens start at 320vw (0 and up), then 480vw, 640vw, 800vw, and 1024vw.

Class	Logical width	Layout breakpoint	What it catches	iOS device	Android device
Narrow phone	360–375	320vw	Truncation, wrapping, minimum tap size, and a short screen	iPhone SE, 375×667 pt	Galaxy S25, 360×780 dp. The short-height match for the SE is the small-phone emulator at 360×640 dp
Reference phone	393–412	320vw	The day-to-day device for manual and visual checks	iPhone 16, 393×852 pt	Pixel 10, 412×924 dp
Large phone	440–448	320vw	Full-width stretch, loose spacing, and large safe areas	iPhone 16 Pro Max, 440×956 pt	Pixel 10 Pro XL, 448×997 dp
Foldable	Cover 412–466. Inner 626–755	Cover 320vw. Inner 480vw at 626, 640vw at 755	Fold and unfold while a screen is open, the hinge crease, and a cover layout against an inner layout	iPhone Duo. Cover 466×678 pt. Inner 626×890 pt	Pixel 10 Pro Fold. Cover 412×901 dp. Inner 755×783 dp
Medium	600–839	480vw from 600, 640vw from 640, 800vw from 800. The devices below are 800vw	Tablet portrait, a foldable inner screen, and split view	iPad Pro 11-inch, portrait 834×1210 pt	Pixel Tablet, portrait 800×1280 dp
Expanded	840 and up	800vw from 840, 1024vw from 1024. The devices below are 1024vw	Tablet landscape and wider multi-column layouts	iPad Pro 13-inch, landscape 1376×1032 pt. An 11-inch iPad turned sideways is 1210×834 pt and is already in this class	Pixel Tablet, landscape 1280×800 dp
Physical	The widths above, on hardware	The breakpoint for that device	Real fingers, system text size, the keyboard, brightness, performance, and the hinge	iPhone SE, iPhone 16, iPhone 16 Pro Max, iPhone Duo, iPad Pro 11-inch	Galaxy S25, Pixel 10, Pixel 10 Pro XL, Pixel 10 Pro Fold, Pixel Tablet

Phones, including both fold covers, all sit in 320vw. On a phone you are looking for truncation, wrapping, tap size, and a short screen. A different layout starts at 480. Fold inners split across 480vw and 640vw. Tablet portrait reaches 800vw, and tablet landscape reaches 1024vw.

Gutters can change at each breakpoint. The QA app fills the device it is running on, so change the simulator or emulator device, or turn the device, to move between rows. The check itself is Responsive design.

iOS Simulator: Open Simulator from Xcode, then choose the device from the File menu. Rotate from the Device menu. Window, Physical Size shows the device at its real size on your screen.
Android Emulator: Create the device in Android Studio Device Manager and start it. Rotate with the emulator controls. For a foldable, use the fold control while a screen is open and compare the cover with the inner display.
One tablet, two rows: An iPad Pro 11-inch and a Pixel Tablet cover Medium in portrait and Expanded when turned sideways. The 13-inch iPad is the extra case, because 1376 pt is wider than the 11-inch landscape.
The short phone: The 360×640 dp emulator stays in the narrow row. None of the handsets above is as short as the iPhone SE.
Fold covers: The iPhone Duo cover is 466 pt, wider than the 16 Pro Max, and iOS still treats it as a compact phone. Its inner display is 626×890 pt. Pixel 10 Pro Fold goes the other way: a 412 dp cover, and a near-square 755×783 dp inner screen.

Apple TV and Android TV are out of scope for this pass, so they are left off the matrix.

Reduced motion

Reduced motion asks the interface to drop animation that can cause discomfort. Turn it on, exercise anything that moves in the component under test, then turn it off and confirm the motion returns. The check is Reduced motion.

Reduced motion in the simulator

iOS: Settings, Accessibility, Motion, Reduce Motion.
Android: Settings, Accessibility, then Remove animations. The menu name varies by version. On a Pixel it sits under Color and motion.

Reduced motion on a device

Use the same Settings path. On Android, Developer options can also set Animator duration scale to off. Prefer the Accessibility switch, because that is the one people turn on.

High contrast mode

Turn Increase Contrast on for iOS, or High contrast text for Android, then return to the component under test. The check is High contrast mode. A component that supports the setting includes that case in its fixture.

High contrast in the simulator

iOS: Settings, Accessibility, Display & Text Size, Increase Contrast.
Android: Settings, Accessibility, High contrast text. The menu name varies by version.

High contrast on a device

Use the same Settings paths. On a device, also glance at the screen in a bright room and in a dim room. Brightness changes how grey text and hairline borders read.

What to check for high contrast

Increase Contrast and High contrast text: Text, icons, and controls stay readable and distinguishable from their background. The component stays understandable without relying on colour alone.
Greyscale and Invert colours: The system paints these over the whole screen. Confirm the component stays readable. It does not choose those colours itself.

iOS: Settings, Accessibility, Display & Text Size. Turn on Larger Text and move the slider from smaller than the default to the biggest size. Bold Text is on the same screen.
Android: Settings, Accessibility, or Settings, Display. Change Font size from smaller than the default to the largest size. Display size is a separate control and changes the density of the whole screen.

Text size on a device

Use the same Settings paths.

What to check for text size

Larger text: Text follows the system text size. At the largest size, it stays on screen, controls stay easy to use, and content can still be reached by scrolling.
Bold Text: Labels stay inside their controls. Nothing clips or overlaps when the weight increases. A custom font does not switch weight on its own, so a label that stays the same weight is expected.

Language and locale

Language is which words appear. Locale is how a component formats a value, such as a date. Check them separately. A component that supports locale includes every locale it accepts in its fixture.

Locale

Open that component's fixture in the QA app and read the same value in each locale it supports. The formatted text follows that locale, and it still fits. A value outside the supported set falls back to the component's default locale.

Language

Form and flight strings shipped in the library are English. Other copy, and prices, come from the app under test. Change the phone language in Settings, General, Language & Region on iOS, or Settings, System, Languages on Android. The library strings stay in English. Translated text on screen is text the app passed in.

What to check for language and locale

Each supported locale: The formatted value matches that locale. The text still fits.
Longer words: French, German, and Polish labels wrap or truncate cleanly. Controls stay tappable. Nothing overlaps.
App copy: Strings the app supplies appear in the language the app set. Library strings such as form and flight copy stay English.