Platform-specific styles in React Native - Mini App: Build & Ship

Build: Platform Style Demo

A simple screen that shows a box styled differently on iOS and Android using platform-specific styles.

Target UI

-------------------------
| Platform Style Demo   |
|-----------------------|
|                       |
|   [ Colored Box ]      |
|                       |
|  (iOS: Blue, Android:  |
|   Green background)    |
|                       |
-------------------------

Display a centered box with fixed width and height

Use blue background color on iOS devices

Use green background color on Android devices

Use React Native's Platform API or StyleSheet platform-specific styles

Add a text label below the box showing the current platform name

Starter Code

React Native

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

export default function PlatformStyleDemo() {
  return (
    <View style={styles.container}>
      {/* TODO: Add the colored box here with platform-specific background color */}
      {/* TODO: Add a Text component below showing the platform name */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  // TODO: Add styles for the box here
});

Task 1

Task 2

Task 3

Solution

React Native

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

export default function PlatformStyleDemo() {
  return (
    <View style={styles.container}>
      <View style={styles.box} />
      <Text style={styles.platformText}>Platform: {Platform.OS}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  box: {
    width: 150,
    height: 150,
    backgroundColor: Platform.select({
      ios: 'blue',
      android: 'green',
      default: 'gray'
    }),
    borderRadius: 10
  },
  platformText: {
    marginTop: 20,
    fontSize: 18,
    color: '#333'
  }
});

We use React Native's Platform API to apply different background colors depending on the device OS. The Platform.select method helps us write platform-specific styles cleanly inside the StyleSheet. The box is centered with fixed size and rounded corners. Below it, a Text component shows the current platform name dynamically using Platform.OS.

This approach keeps the UI consistent but visually distinct on iOS and Android, demonstrating platform-specific styling in React Native.

Final Result

Completed Screen

-------------------------
| Platform Style Demo   |
|-----------------------|
|                       |
|   ███████████████     |
|   ███████████████     |
|   ███████████████     |
|                       |
|  Platform: ios        |
-------------------------

User sees a colored box in the center: blue on iOS, green on Android

Below the box, the text shows 'Platform: ios' or 'Platform: android' accordingly

No interactive elements on this screen

Stretch Goal

Add a button that toggles the box color between the platform color and red when pressed.

💡 Hint

Use React useState hook to track toggle state and change the box background color accordingly.