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