Default props in React Native - Mini App: Build & Ship

Build: Greeting Screen

A simple screen that shows a greeting message. If no name is given, it uses a default name.

Target UI

---------------------
| Greeting Screen   |
|-------------------|
| Hello, [Name]!    |
|                   |
| [Change Name] Btn |
---------------------

Create a Greeting component that accepts a 'name' prop

If 'name' is not provided, use 'Friend' as the default

Display the greeting message: 'Hello, [Name]!'

Add a button labeled 'Change Name' that changes the name to 'React Native Learner' when pressed

Starter Code

React Native

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

const Greeting = ({ name }) => {
  // TODO: Use default prop for name
  return (
    <Text style={styles.greetingText}>Hello, {name}!</Text>
  );
};

const App = () => {
  const [name, setName] = useState();

  return (
    <View style={styles.container}>
      <Greeting name={name} />
      <Button title="Change Name" onPress={() => setName('React Native Learner')} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16
  },
  greetingText: {
    fontSize: 24,
    marginBottom: 20
  }
});

export default App;

Task 1

Solution

React Native

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

const Greeting = ({ name = 'Friend' }) => {
  return (
    <Text style={styles.greetingText}>Hello, {name}!</Text>
  );
};

const App = () => {
  const [name, setName] = useState();

  return (
    <View style={styles.container}>
      <Greeting name={name} />
      <Button title="Change Name" onPress={() => setName('React Native Learner')} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16
  },
  greetingText: {
    fontSize: 24,
    marginBottom: 20
  }
});

export default App;

We set a default value for the name prop directly in the function parameter using = 'Friend'. This means if no name is passed, it will show 'Friend'. When the button is pressed, the name changes to 'React Native Learner' and the greeting updates.

This is a simple way to provide default props in React Native functional components without extra code.

Final Result

Completed Screen

---------------------
| Greeting Screen   |
|-------------------|
| Hello, Friend!    |
|                   |
| [Change Name] Btn |
---------------------

Initially, the greeting shows 'Hello, Friend!' because no name is set.

When the user taps 'Change Name', the greeting updates to 'Hello, React Native Learner!'.

Stretch Goal

Add a TextInput to allow the user to type a custom name that updates the greeting in real-time.

💡 Hint

Use React Native's TextInput component and update the state on text change.