Interpolation in React Native - Mini App: Build & Ship

Build: Greeting Screen

This screen shows a personalized greeting message using interpolation to insert the user's name dynamically.

Target UI

-------------------------
|      Greeting App      |
|-----------------------|
|                       |
|   Hello, [Name]!       |
|                       |
|-----------------------|

Display a greeting message that says 'Hello, [Name]!' where [Name] is a variable.

Use React Native Text component with interpolation to show the name.

The name should be stored in a state variable initialized to 'Friend'.

Starter Code

React Native

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

export default function GreetingScreen() {
  const name = 'Friend';

  return (
    <View style={styles.container}>
      {/* TODO: Add greeting text here using interpolation */}
    </View>
  );
}

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

Task 1

Task 2

Solution

React Native

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

export default function GreetingScreen() {
  const name = 'Friend';

  return (
    <View style={styles.container}>
      <Text style={styles.greeting}>Hello, {name}!</Text>
    </View>
  );
}

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

We created a Text component inside the View. Inside the Text, we used curly braces {} to insert the variable name dynamically. This is called interpolation in React Native. It lets us show the value of variables inside text easily. The name is set to 'Friend' initially, so the screen shows 'Hello, Friend!'.

Final Result

Completed Screen

-------------------------
|      Greeting App      |
|-----------------------|
|                       |
|    Hello, Friend!      |
|                       |
|-----------------------|

The screen shows the greeting message with the name 'Friend'.

If the name variable changes, the greeting updates automatically.

Stretch Goal

Add a TextInput to let the user type their name and update the greeting dynamically.

💡 Hint

Use useState to store the name and update it on TextInput's onChangeText event.