Platform-specific styles in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Platform module from React Native.

React Native

import { [1] } from 'react-native';

Drag options to blanks, or click blank then click option'

APlatform

BStyleSheet

CView

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Importing StyleSheet instead of Platform

Forgetting to import Platform

The Platform module is used to detect the current platform (iOS or Android) in React Native.

2fill in blank

medium

Complete the code to apply a background color only on iOS using Platform.select.

React Native

const styles = StyleSheet.create({
  container: {
    backgroundColor: Platform.select({
      ios: '[1]',
      android: 'transparent'
    })
  }
});

Drag options to blanks, or click blank then click option'

Ayellow

Bblue

Cgreen

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color not in quotes

Setting the color for android instead of ios

The backgroundColor will be red on iOS and transparent on Android.

3fill in blank

hard

Fix the error in the code to check if the platform is Android.

React Native

if (Platform.[1] === 'android') {
  console.log('Running on Android');
}

Drag options to blanks, or click blank then click option'

AOS

BVersion

CisAndroid

DPlatform

Attempts:

3 left

💡 Hint

Common Mistakes

Using Platform.Version instead of Platform.OS

Using a non-existent property like isAndroid

The correct property to check the platform name is Platform.OS.

4fill in blank

hard

Fill both blanks to create a style that uses different font sizes on iOS and Android.

React Native

const styles = StyleSheet.create({
  text: {
    fontSize: Platform.[1] === 'ios' ? [2] : 14
  }
});

Drag options to blanks, or click blank then click option'

AOS

B20

C16

DVersion

Attempts:

3 left

💡 Hint

Common Mistakes

Using Platform.Version instead of Platform.OS

Using a font size too large or as a string

The code checks if the platform is iOS using Platform.OS and sets font size to 16 for iOS, otherwise 14 for Android.

5fill in blank

hard

Fill all three blanks to create a style that uses Platform.select for margin and padding.

React Native

const styles = StyleSheet.create({
  box: {
    margin: Platform.select({ ios: [1], android: [2] }),
    padding: Platform.select({ ios: [3], android: 10 })
  }
});

Drag options to blanks, or click blank then click option'

A15

B20

C5

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings instead of numbers for margin and padding

Mixing up iOS and Android values

The margin is 15 on iOS and 20 on Android. The padding is 5 on iOS and 10 on Android.

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