Why StyleSheet creates platform-consistent UI in React Native - Build It to Prove It

Build: Platform Consistent Style Demo

This screen shows how using StyleSheet in React Native helps create UI that looks consistent on both iOS and Android devices.

Target UI

-------------------------
| Platform Consistent UI |
|-----------------------|
| Text styled with       |
| StyleSheet looks the  |
| same on iOS and Android|
|                       |
| [Press Me] (button)   |
-------------------------

Use StyleSheet.create to define styles

Apply styles to Text and Button components

Show a button with consistent padding and color

Use platform-specific font weight if needed

Ensure the UI looks balanced on both iOS and Android

Starter Code

React Native

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default function PlatformConsistentUI() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Text styled with StyleSheet looks the same on iOS and Android</Text>
      <Button title="Press Me" onPress={() => {}} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16
  },
  text: {
    // TODO: Add text styles here
  }
});

Task 1

Task 2

Solution

React Native

import React from 'react';
import { View, Text, Button, StyleSheet, Platform } from 'react-native';

export default function PlatformConsistentUI() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Text styled with StyleSheet looks the same on iOS and Android</Text>
      <View style={styles.buttonWrapper}>
        <Button title="Press Me" onPress={() => {}} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16
  },
  text: {
    fontSize: 18,
    color: '#333333',
    fontWeight: Platform.select({ ios: '600', android: 'bold' }),
    textAlign: 'center',
    marginBottom: 20
  },
  buttonWrapper: {
    width: 150
  }
});

We use StyleSheet.create to define styles in one place. This helps React Native optimize and apply styles consistently across platforms. The Platform.select function lets us choose font weights that look best on iOS and Android, making text appear balanced on both. Wrapping the Button in a View with fixed width ensures the button size is consistent. Overall, StyleSheet helps keep the UI uniform and neat on different devices.

Final Result

Completed Screen

-------------------------
| Platform Consistent UI |
|-----------------------|
| Text styled with       |
| StyleSheet looks the  |
| same on iOS and Android|
|                       |
|      [ Press Me ]      |
-------------------------

Tapping the 'Press Me' button triggers an empty function (no visible change)

Stretch Goal

Add platform-specific background color to the container: light gray on iOS and white on Android

💡 Hint

Use Platform.select inside StyleSheet.create to set container backgroundColor differently for ios and android

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