Custom components in React Native - Mini App: Build & Ship

Build: Profile Screen

Build a profile screen that uses a custom reusable component to show user info cards.

Target UI

-------------------------
|      Profile Screen    |
|-----------------------|
| User Info Card        |
|  Name: John Doe       |
|  Email: [e-mail] |
|-----------------------|
| User Info Card        |
|  Name: Jane Smith     |
|  Email: [e-mail] |
|-----------------------|

Create a custom component named UserInfoCard that accepts name and email as props.

Use UserInfoCard twice on the Profile Screen with different user data.

Style each card with a border, some padding, and margin.

Display the name and email inside the card.

Starter Code

React Native

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

export default function ProfileScreen() {
  return (
    <View style={styles.container}>
      {/* TODO: Use UserInfoCard component here */}
    </View>
  );
}

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

Task 1

Task 2

Task 3

Solution

React Native

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

function UserInfoCard({ name, email }) {
  return (
    <View style={styles.card}>
      <Text style={styles.name}>Name: {name}</Text>
      <Text style={styles.email}>Email: {email}</Text>
    </View>
  );
}

export default function ProfileScreen() {
  return (
    <View style={styles.container}>
      <UserInfoCard name="John Doe" email="[e-mail]" />
      <UserInfoCard name="Jane Smith" email="[e-mail]" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff'
  },
  card: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 15,
    marginBottom: 15,
    borderRadius: 5
  },
  name: {
    fontWeight: 'bold',
    marginBottom: 5
  },
  email: {
    color: '#555'
  }
});

We created a new component UserInfoCard that takes name and email as inputs (props). This component shows the user info inside a styled box with a border and padding.

Then, inside ProfileScreen, we used UserInfoCard two times with different user data. This way, the code is clean and reusable.

The styles add spacing and borders to make the cards look neat and separated.

Final Result

Completed Screen

-------------------------
|      Profile Screen    |
|-----------------------|
| +-------------------+ |
| | Name: John Doe    | |
| | Email: [e-mail] |
| +-------------------+ |
| +-------------------+ |
| | Name: Jane Smith  | |
| | Email: [e-mail] |
| +-------------------+ |

The screen shows two user info cards stacked vertically.

Each card displays the user's name and email clearly.

No interactive elements yet; just static display.

Stretch Goal

Add a button inside each UserInfoCard that shows an alert with the user's email when tapped.

💡 Hint

Use React Native's Button component and Alert.alert() function inside UserInfoCard.