0
0
React Nativemobile~15 mins

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

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