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.

Practice

1. What is the main purpose of using Platform.OS in React Native styles?

easy

A. To apply different styles depending on the device's operating system

B. To detect the screen size of the device

C. To change the app's language automatically

D. To access the device's GPS location

Solution

1. Step 1: Understand what Platform.OS does

   Platform.OS returns the current device's operating system, like 'ios' or 'android'.

2. Step 2: Connect Platform.OS to styling

   Developers use it to apply styles that look good on each platform, adjusting UI differences.

3. Final Answer:

   To apply different styles depending on the device's operating system -> Option A

4. Quick Check:

   Platform.OS = conditional styles [OK]

Hint: Platform.OS helps pick styles per device type [OK]

Common Mistakes:

• Thinking Platform.OS detects screen size
• Confusing it with language settings
• Using it to get device hardware info

2. Which of the following is the correct syntax to use Platform.select for styles in React Native?

easy

A. const styles = { color: Platform.select({ ios: 'blue', android: 'green' }) };

B. const styles = Platform.select({ color: 'blue', color: 'green' });

C. const styles = Platform.select('ios' ? 'blue' : 'green');

D. const styles = { color: Platform.OS('ios' ? 'blue' : 'green') };

Solution

1. Step 1: Recall Platform.select usage

   Platform.select takes an object with keys for platforms and returns the value for the current platform.

2. Step 2: Check syntax correctness

   const styles = { color: Platform.select({ ios: 'blue', android: 'green' }) }; correctly uses Platform.select inside a style object with platform keys and values.

3. Final Answer:

   const styles = { color: Platform.select({ ios: 'blue', android: 'green' }) }; -> Option A

4. Quick Check:

   Platform.select = object with platform keys [OK]

Hint: Platform.select uses an object with platform keys [OK]

Common Mistakes:

• Passing a ternary string instead of an object
• Using Platform.OS as a function
• Duplicating keys without platform names

3. What will be the background color of the following React Native style on an Android device?

const styles = {
  backgroundColor: Platform.select({
    ios: 'red',
    android: 'yellow',
    default: 'gray'
  })
};

medium

A. red

B. yellow

C. gray

D. undefined

Solution

1. Step 1: Identify the platform

   The device is Android, so Platform.select will pick the 'android' key value.

2. Step 2: Check the value for Android

   The value for 'android' is 'yellow', so the background color will be yellow.

3. Final Answer:

   yellow -> Option B

4. Quick Check:

   Android platform picks 'yellow' [OK]

Hint: Platform.select picks value matching current OS key [OK]

Common Mistakes:

• Choosing the default value instead of platform key
• Confusing iOS and Android values
• Assuming undefined if platform key exists

4. Identify the error in this React Native style code using Platform.select:

const styles = {
  fontSize: Platform.select({
    ios: 16,
    android: 14
  });
};

medium

A. Missing default key in Platform.select object

B. Platform.select cannot be used inside style objects

C. Extra semicolon after Platform.select call

D. fontSize should be a string, not a number

Solution

1. Step 1: Check syntax of Platform.select usage

   The object passed to Platform.select is correct, and keys ios and android are valid.

2. Step 2: Identify syntax error

   There is an extra semicolon after the Platform.select call inside the object, which is invalid syntax.

3. Final Answer:

   Extra semicolon after Platform.select call -> Option C

4. Quick Check:

   Semicolon inside object literal is syntax error [OK]

Hint: No semicolon inside object properties [OK]

Common Mistakes:

• Thinking default key is mandatory
• Assuming fontSize must be string
• Believing Platform.select can't be in styles

5. You want a button to have a shadow on iOS but no shadow on Android. Which style code correctly achieves this?

hard

A. const buttonStyle = { shadowColor: Platform.select({ ios: '#000', android: 'transparent' }), shadowOpacity: 0.5 };

B. const buttonStyle = { shadowColor: '#000', shadowOpacity: Platform.select({ ios: 0.5, android: 0 }) };

C. const buttonStyle = { shadowColor: '#000', shadowOpacity: 0.5, elevation: Platform.select({ ios: 0, android: 0 }) };

D. const buttonStyle = { shadowColor: Platform.OS === 'ios' ? '#000' : undefined, shadowOpacity: Platform.OS === 'ios' ? 0.5 : 0 };

Solution

1. Step 1: Understand shadow properties on platforms

   iOS uses shadowColor and shadowOpacity for shadows; Android uses elevation. To have no shadow on Android, shadow properties should be disabled or undefined.

2. Step 2: Analyze each option for correct conditional styling

   const buttonStyle = { shadowColor: Platform.OS === 'ios' ? '#000' : undefined, shadowOpacity: Platform.OS === 'ios' ? 0.5 : 0 }; uses Platform.OS === 'ios' to set shadowColor and shadowOpacity only on iOS, setting them to undefined or 0 on Android, effectively disabling shadow.

3. Final Answer:

   const buttonStyle = { shadowColor: Platform.OS === 'ios' ? '#000' : undefined, shadowOpacity: Platform.OS === 'ios' ? 0.5 : 0 }; -> Option D

4. Quick Check:

   Use Platform.OS check for conditional shadow [OK]

Hint: Use Platform.OS === 'ios' for iOS-only styles [OK]

Common Mistakes:

• Setting Android shadowColor instead of disabling
• Using elevation without Android values
• Not disabling shadowOpacity on Android