0
0
React Nativemobile~15 mins

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

Choose your learning style9 modes available
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.