Platform-specific styles in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Identify the platform-specific background color

Given this React Native style code, what background color will the View have on Android devices?

React Native

import { StyleSheet, View, Platform } from 'react-native';

const styles = StyleSheet.create({
  container: {
    backgroundColor: Platform.select({
      ios: 'blue',
      android: 'green',
      default: 'gray'
    }),
    flex: 1
  }
});

export default function App() {
  return <View style={styles.container} />;
}

A Green

B Blue

C Gray

D White

💡 Hint

Check the Platform.select object for the android key.

Platform.select returns the value for the current platform. On Android, it returns 'green' for backgroundColor.

📝 Syntax

intermediate

Correct usage of Platform.OS in styles

Which option correctly applies a red text color only on iOS devices using Platform.OS?

React Native

import { StyleSheet, Platform } from 'react-native';

const styles = StyleSheet.create({
  text: {
    color: /* fill here */
  }
});

A Platform.OS == 'android' ? 'red' : 'black'

B Platform.OS = 'ios' ? 'red' : 'black'

C Platform.OS === 'android' ? 'red' : 'black'

D Platform.OS === 'ios' ? 'red' : 'black'

💡 Hint

Use triple equals for comparison and check for 'ios'.

Option D correctly compares Platform.OS to 'ios' and returns 'red' if true, else 'black'.

❓ lifecycle

advanced

Effect of platform-specific styles on re-render

If you use Platform.select inside a style object in a React Native component, when will the style update if the app switches from iOS to Android at runtime?

A The style updates automatically without reloading the app

B The style updates when the component re-renders due to state change

C The style updates only after the app reloads or restarts

D The style never updates once set

💡 Hint

Platform.OS is fixed at app start and does not change dynamically.

Platform.OS is determined at app launch and does not change during runtime, so styles using it update only after reload.

🧠 Conceptual

advanced

Understanding Platform.select fallback behavior

What background color will the View have on a web platform if this style is applied? const styles = StyleSheet.create({ container: { backgroundColor: Platform.select({ ios: 'yellow', android: 'orange', default: 'purple' }) } });

A Purple

B Orange

C Yellow

D Transparent

💡 Hint

Check the 'default' key in Platform.select for unknown platforms.

Platform.select returns the 'default' value when the platform is not ios or android, so 'purple' is used on web.

🔧 Debug

expert

Identify the error in platform-specific style usage

What error will this code cause? const styles = StyleSheet.create({ button: { backgroundColor: Platform.select({ ios: 'blue', android: 'green', default: 'red' })() } });

A SyntaxError: Unexpected token '('

B TypeError: Platform.select(...) is not a function

C TypeError: Platform.select is not a function

D No error, works correctly

💡 Hint

Look carefully at the parentheses after Platform.select call.

Platform.select returns a value, not a function, so calling it with () causes a TypeError.

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