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.