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!').

Practice

1. What does the children prop represent in a React Native component?

easy

A. The content placed between the component's opening and closing tags

B. A special function to handle user input

C. A method to style the component

D. A prop that controls navigation between screens

Solution

1. Step 1: Understand the role of children prop

   The children prop holds whatever is placed inside a component's tags when used.

2. Step 2: Identify the correct description

   Only The content placed between the component's opening and closing tags correctly describes this as the content between opening and closing tags.

3. Final Answer:

   The content placed between the component's opening and closing tags -> Option A

4. Quick Check:

   children prop = content inside tags [OK]

Hint: Remember: children = content inside component tags [OK]

Common Mistakes:

• Confusing children with event handlers
• Thinking children is a styling prop
• Assuming children controls navigation

2. Which of the following is the correct way to access children inside a functional component in React Native?

easy

A. const MyComponent = ({child}) => { return {child}; }

B. const MyComponent = (props) => { return {props.children}; }

C. const MyComponent = () => { return {children}; }

D. const MyComponent = (props) => { return {props.child}; }

Solution

1. Step 1: Recall how to access children prop

   Children are accessed via props.children or by destructuring { children }.

2. Step 2: Check each option

   const MyComponent = (props) => { return {props.children}; } correctly uses props.children. Options A, B, and D use incorrect variable names or miss the props argument.

3. Final Answer:

   const MyComponent = (props) => { return <View>{props.children}</View>; } -> Option B

4. Quick Check:

   Access children with props.children [OK]

Hint: Use props.children or destructure { children } [OK]

Common Mistakes:

• Using 'child' instead of 'children'
• Not passing props as function argument
• Trying to use children without props

3. What will be rendered by this component?

const Wrapper = ({ children }) => {
  return {children};
};

const App = () => {
  return (
    
      Hello World
    
  );
};

medium

A. A syntax error because children is not defined

B. An empty View with no content

C. A Text component with no parent View

D. A View containing the text 'Hello World'

Solution

1. Step 1: Understand children usage in Wrapper

   The Wrapper component receives children and renders them inside a View.

2. Step 2: Analyze App component usage

   App passes a Text component with 'Hello World' as children to Wrapper, so Wrapper renders a View containing that Text.

3. Final Answer:

   A View containing the text 'Hello World' -> Option D

4. Quick Check:

   Children passed render inside View [OK]

Hint: Children inside Wrapper render inside View [OK]

Common Mistakes:

• Thinking children are ignored
• Confusing children with props.children syntax error
• Assuming children must be a string

4. Identify the error in this component that tries to render children:

const Container = () => {
  return {children};
};

medium

A. children is not defined because props are missing

B. View cannot contain children components

C. Missing import for View component

D. children should be a string, not JSX

Solution

1. Step 1: Check function parameters

   The component does not receive any props, so children is undefined.

2. Step 2: Understand how to fix

   To access children, the component must accept props or destructure children from props.

3. Final Answer:

   children is not defined because props are missing -> Option A

4. Quick Check:

   Must receive props to access children [OK]

Hint: Always pass props to access children [OK]

Common Mistakes:

• Forgetting to add props parameter
• Assuming children is global
• Confusing import errors with children usage

5. You want to create a reusable Card component that wraps any content passed inside it with padding and a border. Which is the best way to implement it using the children prop?

const Card = (props) => {
  return (
    
      {/* What goes here? */}
    
  );
};

hard

A. {props.content} assuming content prop holds children

B. Return only <View> without children to keep card empty

C. {props.children} to render any nested content inside the card

D. Use {props.children()} as children is a function

Solution

1. Step 1: Understand children usage for flexible content

   Children prop allows any nested content to be rendered inside the component.

2. Step 2: Choose correct syntax to render children

   Using {props.children} correctly renders nested content. Other options misuse props or assume children is a function.

3. Final Answer:

   {props.children} to render any nested content inside the card -> Option C

4. Quick Check:

   Use props.children to wrap nested content [OK]

Hint: Use {props.children} to wrap any nested content [OK]

Common Mistakes:

• Using wrong prop name like content
• Trying to call children as a function
• Not rendering children at all