Children prop in React Native - Mini App: Build & Ship

Build: Welcome Screen

A simple welcome screen that uses a custom container component to display a title and a message using the children prop.

Target UI

-----------------------
|                     |
|    Welcome Screen    |
|                     |
|  Hello, friend!      |
|  This is your app.   |
|                     |
-----------------------

Create a custom Container component that accepts children and styles them with padding and center alignment.

Use the Container component in the WelcomeScreen to display a title and a message as children.

The title should be a Text component with larger font size and bold style.

The message should be a Text component with normal font size.

The screen background should be white and content centered vertically and horizontally.

Starter Code

React Native

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

function Container(props) {
  // TODO: Use props.children inside a styled View
  return (
    <View style={styles.container}>
      {/* Add children here */}
    </View>
  );
}

export default function WelcomeScreen() {
  return (
    <View style={styles.screen}>
      {/* Use Container component here with children */}
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center'
  },
  container: {
    padding: 20,
    alignItems: 'center'
  }
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

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

function Container(props) {
  return (
    <View style={styles.container}>
      {props.children}
    </View>
  );
}

export default function WelcomeScreen() {
  return (
    <View style={styles.screen}>
      <Container>
        <Text style={styles.title}>Welcome Screen</Text>
        <Text style={styles.message}>Hello, friend!{"\n"}This is your app.</Text>
      </Container>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center'
  },
  container: {
    padding: 20,
    alignItems: 'center'
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10
  },
  message: {
    fontSize: 16,
    textAlign: 'center'
  }
});

We created a Container component that wraps its children inside a styled View. This lets us reuse the padding and center alignment style easily.

In WelcomeScreen, we use Container and pass two Text components as children. The first is the title with bigger, bold font. The second is the message with normal font size and centered text.

This shows how the children prop lets components wrap and display any nested content, making UI flexible and reusable.

Final Result

Completed Screen

-----------------------
|                     |
|    Welcome Screen    |
|                     |
|  Hello, friend!      |
|  This is your app.   |
|                     |
-----------------------

The screen shows a centered white background with a bold title 'Welcome Screen'.

Below the title is a message 'Hello, friend! This is your app.' centered and spaced nicely.

No interactive elements on this screen.

Stretch Goal

Add a button inside the Container that when pressed shows an alert saying 'Button pressed!'.

💡 Hint

Use React Native's Button component inside Container's children and add an onPress handler that calls alert('Button pressed!').