StyleSheet.create in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple style object using StyleSheet.

React Native

import { StyleSheet } from 'react-native';

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

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

Acreate

Bmake

Cbuild

Dstyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'make' or 'build' instead of 'create'.

Trying to define styles without StyleSheet.

The StyleSheet.create method is used to define styles in React Native. It helps with performance and validation.

2fill in blank

medium

Complete the code to add a text style with font size 20.

React Native

const styles = StyleSheet.create({
  text: {
    fontSize: [1],
  },
});

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

A'20px'

B20.0

C'20rem'

D20

Attempts:

3 left

💡 Hint

Common Mistakes

Putting font size as a string with units.

Using decimal numbers unnecessarily.

In React Native, numeric values for sizes like fontSize are numbers, not strings with units.

3fill in blank

hard

Fix the error in the style property name to set background color.

React Native

const styles = StyleSheet.create({
  box: {
    [1]: 'blue',
  },
});

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

Abackground

BbackgroundColor

CcolorBackground

DbgColor

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'background' instead of 'backgroundColor'.

Using shorthand names like 'bgColor' which are invalid.

The correct style property for background color in React Native is backgroundColor.

4fill in blank

hard

Fill both blanks to create a style with margin 10 and padding 5.

React Native

const styles = StyleSheet.create({
  box: {
    [1]: 10,
    [2]: 5,
  },
});

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

Amargin

Bpadding

Cborder

Dspacing

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'border' or 'spacing' which are not valid style properties here.

Mixing up margin and padding.

margin sets space outside the box, and padding sets space inside the box around content.

5fill in blank

hard

Fill all three blanks to create a style with flex 1, justifyContent center, and alignItems center.

React Native

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

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

Aflex

BjustifyContent

CalignItems

Ddisplay

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'display' which is not a valid React Native style property.

Mixing up justifyContent and alignItems.

flex controls the size ratio, justifyContent centers items horizontally, and alignItems centers items vertically in a flex container.