Why StyleSheet creates platform-consistent UI in React Native - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a style object using StyleSheet.

React Native

const styles = StyleSheet.[1]({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  }
});

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

Abuild

Bcreate

Cmake

Dstyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like StyleSheet.make or StyleSheet.build.

StyleSheet.create is the correct method to define styles in React Native.

2fill in blank

medium

Complete the code to apply the style to a View component.

React Native

<View [1]={styles.container}>
  <Text>Hello</Text>
</View>

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

Astyle

BclassName

Ccss

Dstyles

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'className' instead of 'style' in React Native.

The 'style' prop is used to apply styles to React Native components.

3fill in blank

hard

Fix the error in the style definition to ensure platform consistency.

React Native

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
    color: 'black',
    [1]: 'bold'
  }
});

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

AfontWeight

BfontBold

CtextWeight

DfontStyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fontBold' or 'textWeight' which are not valid style properties.

fontWeight is the correct property to set text boldness in React Native.

4fill in blank

hard

Fill both blanks to create a style that centers content vertically and horizontally.

React Native

const styles = StyleSheet.create({
  center: {
    justifyContent: '[1]',
    alignItems: '[2]'
  }
});

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

Acenter

Bflex-start

Cflex-end

Dspace-between

Attempts:

3 left

💡 Hint

Common Mistakes

Using different values like 'flex-start' or 'space-between' which do not center content.

Both justifyContent and alignItems set to 'center' align content in the middle.

5fill in blank

hard

Fill all three blanks to create a style for a button with padding, background color, and rounded corners.

React Native

const styles = StyleSheet.create({
  button: {
    padding: [1],
    backgroundColor: '[2]',
    borderRadius: [3]
  }
});

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

A10

B#007AFF

C8

D15

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding or borderRadius as strings instead of numbers.

Using invalid color codes.

Padding 15, background color '#007AFF' (blue), and borderRadius 8 create a nice button style.