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.

Practice

1. What is the main purpose of using StyleSheet.create in React Native?

easy

A. To import external CSS files into React Native

B. To create dynamic styles that change on every render

C. To organize styles into named objects for better reuse and performance

D. To write inline styles directly inside components

Solution

1. Step 1: Understand the role of StyleSheet.create

   It groups styles into objects that can be reused, improving code clarity and performance.

2. Step 2: Compare with other style methods

   Inline styles are not organized and external CSS is not supported in React Native.

3. Final Answer:

   To organize styles into named objects for better reuse and performance -> Option C

4. Quick Check:

   StyleSheet.create = Organize styles [OK]

Hint: Remember: StyleSheet.create groups styles for reuse [OK]

Common Mistakes:

• Thinking it creates dynamic styles on every render
• Confusing with inline styles
• Assuming it imports CSS files

2. Which of the following is the correct syntax to create a style named container using StyleSheet.create?

easy

A. const styles = StyleSheet({container: {flex: 1}});

B. const styles = StyleSheet.create['container': {flex: 1}];

C. const styles = createStyleSheet({container: {flex: 1}});

D. const styles = StyleSheet.create({container: {flex: 1}});

Solution

1. Step 1: Recall the correct method call

   The correct method is StyleSheet.create() with parentheses and an object argument.

2. Step 2: Check object syntax

   The styles object uses curly braces with key-value pairs inside parentheses.

3. Final Answer:

   const styles = StyleSheet.create({container: {flex: 1}}); -> Option D

4. Quick Check:

   Correct syntax uses StyleSheet.create() [OK]

Hint: Use parentheses with StyleSheet.create and pass an object [OK]

Common Mistakes:

• Using StyleSheet without .create
• Using square brackets instead of parentheses
• Misspelling create as createStyleSheet

3. What will be the background color of the View component in this code?

const styles = StyleSheet.create({
  box: {backgroundColor: 'blue', padding: 10}
});

export default function App() {
  return ;
}

medium

A. Blue

B. Red

C. Transparent

D. White

Solution

1. Step 1: Identify the style applied to the View

   The style styles.box sets backgroundColor to 'blue'.

2. Step 2: Understand React Native style application

   The View will use the background color from the style object.

3. Final Answer:

   Blue -> Option A

4. Quick Check:

   Style backgroundColor = blue [OK]

Hint: Look at style object keys for color values [OK]

Common Mistakes:

• Assuming default white background
• Confusing padding with background color
• Ignoring the style prop on View

4. Identify the error in this code snippet:

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

export default function App() {
  return Hello;
}

medium

A. Missing import of StyleSheet from 'react-native'

B. fontSize should be a string, not a number

C. Text component cannot use styles

D. color property is invalid

Solution

1. Step 1: Check for necessary imports

   The code uses StyleSheet but does not import it from 'react-native'.

2. Step 2: Validate style properties and usage

   fontSize as number and color as string are correct; Text supports styles.

3. Final Answer:

   Missing import of StyleSheet from 'react-native' -> Option A

4. Quick Check:

   Always import StyleSheet before use [OK]

Hint: Always import StyleSheet from react-native [OK]

Common Mistakes:

• Forgetting to import StyleSheet
• Thinking fontSize must be string
• Assuming Text can't have styles

5. You want to create two styles using StyleSheet.create: one for a button with a red background and another for a button with a green background. Which code correctly defines these styles for reuse?

hard

A. const styles = StyleSheet.create({button: {backgroundColor: 'red', backgroundColor: 'green'}});

B. const styles = StyleSheet.create({redButton: {backgroundColor: 'red'}, greenButton: {backgroundColor: 'green'}});

C. const styles = StyleSheet.create(['redButton', {backgroundColor: 'red'}, 'greenButton', {backgroundColor: 'green'}]);

D. const styles = StyleSheet.create({redButton: 'red', greenButton: 'green'});

Solution

1. Step 1: Understand how to define multiple styles

   Each style must be a key with an object value inside the StyleSheet.create call.

2. Step 2: Check each option's correctness

   const styles = StyleSheet.create({redButton: {backgroundColor: 'red'}, greenButton: {backgroundColor: 'green'}}); correctly defines two named style objects. Others misuse syntax or values.

3. Final Answer:

   const styles = StyleSheet.create({redButton: {backgroundColor: 'red'}, greenButton: {backgroundColor: 'green'}}); -> Option B

4. Quick Check:

   Multiple styles = multiple keys with objects [OK]

Hint: Use separate keys with style objects inside StyleSheet.create [OK]

Common Mistakes:

• Trying to put multiple backgroundColors in one object
• Passing arrays instead of objects
• Assigning strings instead of style objects