StyleSheet.create in React Native - Mini App: Build & Ship

Build: Simple Styled Box

This screen shows a colored box with text inside. The styles are created using StyleSheet.create to keep the code clean and organized.

Target UI

┌─────────────────────────┐
│                         │
│   ┌───────────────┐     │
│   │               │     │
│   │   Hello Box   │     │
│   │               │     │
│   └───────────────┘     │
│                         │
└─────────────────────────┘

Use StyleSheet.create to define styles for the box and text

The box should have a blue background, some padding, and rounded corners

The text inside the box should be white and centered

Use a View for the box and a Text component inside it

Starter Code

React Native

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

export default function StyledBox() {
  return (
    <View style={styles.box}>
      <Text style={styles.text}>Hello Box</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  // TODO: Add styles for box and text here
});

Task 1

Task 2

Solution

React Native

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

export default function StyledBox() {
  return (
    <View style={styles.box}>
      <Text style={styles.text}>Hello Box</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  box: {
    backgroundColor: 'blue',
    padding: 20,
    borderRadius: 10
  },
  text: {
    color: 'white',
    textAlign: 'center'
  }
});

We use StyleSheet.create to define a styles object that holds our style rules. This keeps styles organized and improves performance. The box style sets a blue background, padding around the content, and rounded corners. The text style makes the text white and centers it inside the box. We then apply these styles to the View and Text components using the style prop.

Final Result

Completed Screen

┌─────────────────────────┐
│                         │
│   ┌───────────────┐     │
│   │               │     │
│   │   Hello Box   │     │
│   │               │     │
│   └───────────────┘     │
│                         │
└─────────────────────────┘

The screen shows a blue rounded rectangle box centered horizontally with white text 'Hello Box' inside.

No interactive elements on this screen.

Stretch Goal

Add a button below the box that changes the box background color when pressed.

💡 Hint

Use useState to track the color and update the style dynamically on button press.