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}!

Practice

1. What is the main purpose of props in React Native components?

easy

A. To style components with CSS

B. To store internal state of a component

C. To pass data from a parent component to a child component

D. To handle user input events

Solution

1. Step 1: Understand the role of props

   Props are used to send data from a parent component down to its children, allowing dynamic content.

2. Step 2: Differentiate props from state and styling

   State holds internal data, styling is separate, and event handling is done via callbacks, not props alone.

3. Final Answer:

   To pass data from a parent component to a child component -> Option C

4. Quick Check:

   Props = Data passing from parent to child [OK]

Hint: Props always flow from parent to child components [OK]

Common Mistakes:

• Confusing props with state
• Thinking props handle styling
• Assuming props manage events directly

2. Which of the following is the correct way to pass a prop named title with value "Hello" to a component Greeting?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recognize JSX prop syntax

   Props with string values must be passed inside quotes like title="Hello".

2. Step 2: Identify incorrect syntax

   Using curly braces without quotes expects a variable, missing quotes or equals sign is invalid.

3. Final Answer:

   <Greeting title="Hello" /> -> Option A

4. Quick Check:

   String props need quotes in JSX [OK]

Hint: Use quotes for string props in JSX [OK]

Common Mistakes:

• Omitting quotes around string values
• Using curly braces for plain strings
• Missing equals sign between prop and value

3. What will be displayed on the screen when this code runs?

function Welcome(props) {
  return {props.message};
}

export default function App() {
  return ;
}

medium

A. props.message

B. Error: message not defined

C. Welcome

D. Hi there!

Solution

1. Step 1: Identify prop usage in Welcome component

   The Welcome component receives message prop and displays it inside Text.

2. Step 2: Check what prop value is passed

   The App component passes message="Hi there!" to Welcome.

3. Final Answer:

   Hi there! -> Option D

4. Quick Check:

   Props value shown in child component [OK]

Hint: Props values appear where used inside child components [OK]

Common Mistakes:

• Printing the prop name instead of its value
• Expecting component name to display
• Assuming missing prop causes error

4. Identify the error in this code snippet:

function Button(props) {
  return {props.label};
}

export default function App() {
  return ;
}

medium

A. Missing quotes around string prop value

B. Incorrect component name

C. Text component cannot display props

D. Props cannot be passed to functional components

Solution

1. Step 1: Check prop syntax in App component

   The prop label is passed as label=ClickMe without quotes, which is invalid for strings.

2. Step 2: Understand correct JSX prop passing

   String values must be in quotes like label="ClickMe" or in curly braces if variable.

3. Final Answer:

   Missing quotes around string prop value -> Option A

4. Quick Check:

   String props need quotes in JSX [OK]

Hint: Always quote string props in JSX [OK]

Common Mistakes:

• Forgetting quotes around string props
• Thinking props can't be passed to functions
• Misunderstanding Text component usage

5. You want to create a reusable Profile component that shows a user's name and age. Which of these is the best way to pass props to make it flexible?

hard

A.

B.

C.

D.

Solution

1. Step 1: Check prop value types and syntax

   Strings like name should be in quotes; numbers like age should be passed as JavaScript expressions using curly braces.

2. Step 2: Evaluate each option

   <Profile name="Alice" age={30} /> correctly passes name as string and age as number. <Profile name={"Alice"} age="30" /> passes age as string which is less ideal. <Profile name=Alice age=30 /> misses quotes and braces. <Profile name={Alice} age={30} /> uses undefined variable Alice.

3. Final Answer:

   <Profile name="Alice" age={30} /> -> Option B

4. Quick Check:

   Strings in quotes, numbers in braces [OK]

Hint: Use quotes for strings, braces for numbers in props [OK]

Common Mistakes:

• Passing numbers as strings
• Omitting quotes for strings
• Using undefined variables without quotes