Props passing in React Native - Mini App: Build & Ship

Build: Greeting Screen

This screen shows a greeting message using a child component that receives the user's name as a prop.

Target UI

---------------------
| Greeting Screen   |
|-------------------|
| Hello, Alice!     |
|                   |
---------------------

Create a parent component named GreetingScreen.

Create a child component named GreetingMessage that accepts a 'name' prop.

GreetingMessage should display 'Hello, {name}!' using the passed prop.

GreetingScreen should pass the name 'Alice' to GreetingMessage.

Starter Code

React Native

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

export default function GreetingScreen() {
  return (
    <View style={styles.container}>
      {/* TODO: Add GreetingMessage component here and pass the name prop */}
    </View>
  );
}

function GreetingMessage(props) {
  return (
    <Text style={styles.greetingText}>
      {/* TODO: Display greeting message using props.name */}
    </Text>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  greetingText: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

Task 1

Task 2

Solution

React Native

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

export default function GreetingScreen() {
  return (
    <View style={styles.container}>
      <GreetingMessage name="Alice" />
    </View>
  );
}

function GreetingMessage(props) {
  return (
    <Text style={styles.greetingText}>
      Hello, {props.name}!
    </Text>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  greetingText: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

We created a parent component GreetingScreen that renders the child component GreetingMessage. We passed the string "Alice" as a prop named name to GreetingMessage. Inside GreetingMessage, we accessed props.name and displayed it inside the Text component with a friendly greeting. This shows how data flows from parent to child using props in React Native.

Final Result

Completed Screen

---------------------
| Greeting Screen   |
|-------------------|
| Hello, Alice!     |
|                   |
---------------------

The screen shows the text 'Hello, Alice!' centered.

No interactive elements on this screen.

Stretch Goal

Modify GreetingMessage to accept a second prop 'greeting' to customize the greeting word (e.g., 'Hi', 'Welcome').

💡 Hint

Pass a new prop 'greeting' from GreetingScreen and use it inside GreetingMessage like: {props.greeting}, {props.name}!