React Native vs Flutter comparison - Build Both & Compare

Build: Comparison Screen

Shows a simple comparison between React Native and Flutter with key points listed side by side.

Target UI

-----------------------------------
| React Native       | Flutter     |
|--------------------|-------------|
| - Uses JavaScript  | - Uses Dart |
| - Uses native UI   | - Uses own |
|   components       |   widgets   |
| - Hot Reload       | - Hot Reload|
| - Large community  | - Growing   |
|                    |   community |
-----------------------------------

Display two columns side by side labeled 'React Native' and 'Flutter'.

List 4 key comparison points under each column.

Use simple Text components for labels and points.

Use a View with flexDirection 'row' to arrange columns side by side.

Add basic styling for clarity and spacing.

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 two columns side by side here */}
    </View>
  );
}

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

Task 1

Task 2

Task 3

Task 4

Solution

React Native

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

export default function ComparisonScreen() {
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <View style={styles.column}>
          <Text style={styles.title}>React Native</Text>
          <Text style={styles.point}>- Uses JavaScript</Text>
          <Text style={styles.point}>- Uses native UI components</Text>
          <Text style={styles.point}>- Hot Reload</Text>
          <Text style={styles.point}>- Large community</Text>
        </View>
        <View style={styles.column}>
          <Text style={styles.title}>Flutter</Text>
          <Text style={styles.point}>- Uses Dart</Text>
          <Text style={styles.point}>- Uses own widgets</Text>
          <Text style={styles.point}>- Hot Reload</Text>
          <Text style={styles.point}>- Growing community</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff'
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  column: {
    flex: 1,
    paddingHorizontal: 10
  },
  title: {
    fontWeight: 'bold',
    fontSize: 18,
    marginBottom: 10
  },
  point: {
    fontSize: 16,
    marginBottom: 6
  }
});

This screen uses a parent View with flexDirection 'row' to place two columns side by side. Each column is a View with flex: 1 to take equal space. Titles are bold and bigger for clarity. Each point is a Text with margin for spacing. This simple layout clearly compares React Native and Flutter key features side by side.

Final Result

Completed Screen

-----------------------------------
| React Native       | Flutter     |
|--------------------|-------------|
| - Uses JavaScript  | - Uses Dart |
| - Uses native UI   | - Uses own |
|   components       |   widgets   |
| - Hot Reload       | - Hot Reload|
| - Large community  | - Growing   |
|                    |   community |
-----------------------------------

Screen is static with no interactive elements.

User can scroll if content grows (not needed here).

Stretch Goal

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

💡 Hint

Use React Native's useState to track mode and change background and text colors accordingly.