Platform-specific styles in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of platform-specific styles in React Native?

Platform-specific styles allow you to customize the look and feel of your app separately for iOS and Android devices, making the app feel native on each platform.

beginner

How do you import the module to detect the platform in React Native?

You import the Platform module using: <code>import { Platform } from 'react-native';</code>

intermediate

Explain how to apply different styles for iOS and Android using the Platform.select method.

Use Platform.select({ ios: styleForIOS, android: styleForAndroid }) to choose styles based on the platform. This returns the style object for the current platform.

intermediate

What is the difference between using Platform.OS and Platform.select for styling?

Platform.OS returns a string ('ios' or 'android') to use in conditional code. Platform.select is a helper that returns the correct value from an object based on the platform, simplifying style selection.

advanced

Can you use platform-specific style files in React Native? How?

Yes. You can create separate style files named with platform extensions like styles.ios.js and styles.android.js. React Native automatically picks the right file based on the device platform.

Which React Native module helps you detect the platform to apply styles?

A Navigator

B StyleSheet

C Dimensions

D Platform

The Platform module provides information about the device platform (iOS or Android) to apply platform-specific styles.

What does Platform.OS return on an Android device?

A 'android'

B 'ios'

C 'windows'

D 'web'

Platform.OS returns the string 'android' when running on an Android device.

How does Platform.select simplify platform-specific styling?

A It automatically imports styles from external files.

B It returns the style object matching the current platform from an object.

C It converts styles to CSS.

D It disables styles on unsupported platforms.

Platform.select takes an object with keys for each platform and returns the value for the current platform, making style selection easier.

If you want to create separate style files for iOS and Android, what file naming convention should you use?

A styles.ios.js and styles.android.js

B styles-ios.js and styles-android.js

C styles.js and styles.android.js

D styles_ios.js and styles_android.js

React Native recognizes files named with platform extensions like styles.ios.js and styles.android.js and loads the correct one automatically.

Which of these is NOT a recommended way to apply platform-specific styles in React Native?

A Creating separate style files with platform extensions

B Using Platform.OS in conditional statements

C Using CSS media queries

D Using Platform.select in StyleSheet

CSS media queries are not used in React Native. Platform-specific styles are handled with Platform module or separate files.

Describe how you would apply different background colors for iOS and Android buttons in React Native.

Think about using Platform.select inside StyleSheet.create or a conditional expression.

Explain the benefits of using platform-specific style files instead of inline platform checks.

Consider how file naming helps React Native pick styles automatically.