Expo vs bare React Native - Build Both & Compare

Build: Expo vs Bare React Native Comparison

This screen shows a simple comparison between Expo and bare React Native to help beginners understand the differences.

Target UI

----------------------------------
| Expo vs Bare React Native       |
|--------------------------------|
| Feature           | Expo | Bare |
|-------------------|------|------|
| Easy Setup        |  ✔   |  ✘   |
| Native Modules    |  ✘   |  ✔   |
| Over-the-Air Updates | ✔  |  ✘   |
| Custom Native Code | ✘   |  ✔   |
| Development Speed |  ✔   |  ✘   |
----------------------------------

Display a header with the screen name

Show a table comparing features of Expo and bare React Native

Use check marks (✔) and crosses (✘) to indicate support

Make the table easy to read with clear columns and rows

Starter Code

React Native

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

export default function ComparisonScreen() {
  return (
    <View style={styles.container}>
      {/* TODO: Add header and comparison table here */}
    </View>
  );
}

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

Task 1

Task 2

Task 3

Solution

React Native

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

export default function ComparisonScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Expo vs Bare React Native</Text>
      <View style={styles.table}>
        <View style={[styles.row, styles.headerRow]}>
          <Text style={[styles.cell, styles.featureCell]}>Feature</Text>
          <Text style={styles.cell}>Expo</Text>
          <Text style={styles.cell}>Bare</Text>
        </View>
        {features.map(({feature, expo, bare}) => (
          <View key={feature} style={styles.row}>
            <Text style={[styles.cell, styles.featureCell]}>{feature}</Text>
            <Text style={styles.cell}>{expo ? '✔' : '✘'}</Text>
            <Text style={styles.cell}>{bare ? '✔' : '✘'}</Text>
          </View>
        ))}
      </View>
    </View>
  );
}

const features = [
  { feature: 'Easy Setup', expo: true, bare: false },
  { feature: 'Native Modules', expo: false, bare: true },
  { feature: 'Over-the-Air Updates', expo: true, bare: false },
  { feature: 'Custom Native Code', expo: false, bare: true },
  { feature: 'Development Speed', expo: true, bare: false }
];

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fff'
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16,
    textAlign: 'center'
  },
  table: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4
  },
  row: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderColor: '#ccc',
    paddingVertical: 8,
    paddingHorizontal: 4,
    alignItems: 'center'
  },
  headerRow: {
    backgroundColor: '#f0f0f0'
  },
  cell: {
    flex: 1,
    textAlign: 'center',
    fontSize: 16
  },
  featureCell: {
    flex: 2,
    textAlign: 'left',
    paddingLeft: 8
  }
});

This screen uses a simple React Native functional component to show a comparison table.

We use a features array to store the feature names and whether Expo or bare React Native supports them.

The table is built with View components arranged in rows and columns using flexDirection: 'row'. Text components show the feature names and check marks or crosses.

Styling adds borders and spacing to make the table easy to read. The header is bold and centered.

This approach helps beginners see the differences clearly in a simple UI.

Final Result

Completed Screen

----------------------------------
| Expo vs Bare React Native       |
|--------------------------------|
| Feature           | Expo | Bare |
|-------------------|------|------|
| Easy Setup        |  ✔   |  ✘   |
| Native Modules    |  ✘   |  ✔   |
| Over-the-Air Updates | ✔  |  ✘   |
| Custom Native Code | ✘   |  ✔   |
| Development Speed |  ✔   |  ✘   |
----------------------------------

Screen is static with no interactive elements

User can scroll if screen is small

Clear visual difference between Expo and bare React Native features

Stretch Goal

Add a toggle button to switch between light and dark mode for the comparison screen.

💡 Hint

Use React state to track the mode and change background and text colors accordingly.