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.