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.

Practice

1. Why do React Native developers use StyleSheet.create() when styling components?

easy

A. It helps create styles that work consistently on both iOS and Android.

B. It automatically converts styles to CSS for web browsers.

C. It allows styles to be written in plain HTML.

D. It disables styles on Android devices.

Solution

1. Step 1: Understand cross-platform styling

   StyleSheet.create() helps write styles that behave the same on iOS and Android, avoiding platform differences.

2. Step 2: Recognize platform consistency benefit

   This method optimizes and standardizes styles so the UI looks consistent across devices.

3. Final Answer:

   It helps create styles that work consistently on both iOS and Android. -> Option A

4. Quick Check:

   Cross-platform consistency = B [OK]

Hint: StyleSheet.create ensures styles work on both iOS and Android [OK]

Common Mistakes:

• Thinking it converts styles to web CSS
• Believing it disables styles on some platforms
• Confusing it with HTML styling

2. Which of the following is the correct way to define a style using StyleSheet.create() in React Native?

easy

A. const styles = StyleSheet.make({ container: { flex: 1, backgroundColor: 'blue' } });

B. const styles = StyleSheet({ container: { flex: 1, backgroundColor: 'blue' } });

C. const styles = createStyleSheet({ container: { flex: 1, backgroundColor: 'blue' } });

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

Solution

1. Step 1: Recall correct method name

   The correct method to create styles is StyleSheet.create(), not StyleSheet(), createStyleSheet(), or StyleSheet.make().

2. Step 2: Check syntax correctness

   const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'blue' } }); uses the correct method and proper object syntax for styles.

3. Final Answer:

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

4. Quick Check:

   Correct method is create() on StyleSheet [OK]

Hint: Remember: StyleSheet.create() is the exact syntax [OK]

Common Mistakes:

• Using StyleSheet() without create
• Mixing method names like make or createStyleSheet
• Incorrect object syntax inside styles

3. What will be the effect of this code snippet in React Native?

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

function App() {
  return Hello!;
}

medium

A. Causes a runtime error due to incorrect style syntax.

B. Shows 'Hello!' in default color and size because styles are ignored.

C. Displays the text 'Hello!' in red color with font size 20.

D. Displays 'Hello!' but font size will be ignored on Android.

Solution

1. Step 1: Understand StyleSheet usage

   The style object defines fontSize 20 and color red, applied to the Text component.

2. Step 2: Predict UI output

   The text 'Hello!' will appear in red color with font size 20 on both iOS and Android.

3. Final Answer:

   Displays the text 'Hello!' in red color with font size 20. -> Option C

4. Quick Check:

   StyleSheet styles apply correctly = A [OK]

Hint: Styles inside StyleSheet.create apply as expected [OK]

Common Mistakes:

• Assuming styles are ignored
• Thinking fontSize is platform-specific and ignored
• Believing code causes errors without reason

4. Identify the error in this React Native style code:

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

medium

A. The flex property should be a number, not a string.

B. backgroundColor cannot be green in StyleSheet.

C. StyleSheet.create cannot have multiple properties.

D. The style object must be wrapped in an array.

Solution

1. Step 1: Check property types

   The flex property expects a number, but here it is given as a string '1'.

2. Step 2: Understand correct usage

   Using a string for flex causes a runtime warning or error; it must be a number like 1.

3. Final Answer:

   The flex property should be a number, not a string. -> Option A

4. Quick Check:

   flex must be numeric, not string [OK]

Hint: flex values must be numbers, not strings [OK]

Common Mistakes:

• Using strings for numeric style properties
• Thinking backgroundColor has limited colors
• Believing styles must be arrays

5. You want to create a button style that looks the same on iOS and Android, with a shadow effect. Which approach using StyleSheet.create() ensures platform-consistent UI?

hard

A. Use only shadowColor and ignore Android styles.

B. Use elevation for Android and shadowColor, shadowOffset, shadowOpacity for iOS inside StyleSheet.

C. Use inline styles with different values for each platform without StyleSheet.

D. Use borderWidth to simulate shadow on both platforms.

Solution

1. Step 1: Understand platform shadow differences

   Android uses elevation for shadows, while iOS uses shadow properties like shadowColor, shadowOffset, and shadowOpacity.

2. Step 2: Combine styles in StyleSheet for consistency

   Using both sets of properties inside StyleSheet.create() ensures the button has shadows on both platforms consistently.

3. Final Answer:

   Use elevation for Android and shadow properties for iOS inside StyleSheet. -> Option B

4. Quick Check:

   Combine platform shadow styles in StyleSheet = A [OK]

Hint: Combine elevation and shadow props for cross-platform shadows [OK]

Common Mistakes:

• Ignoring Android shadow with elevation
• Using only iOS shadow properties
• Avoiding StyleSheet for platform styles