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.

Practice

1. Which language does React Native primarily use for building apps?

easy

A. Kotlin

B. Dart

C. JavaScript and JSX

D. Swift

Solution

1. Step 1: Identify React Native's programming language

   React Native uses JavaScript along with JSX syntax to build UI components.

2. Step 2: Compare with other options

   Dart is used by Flutter, Swift and Kotlin are native languages for iOS and Android respectively.

3. Final Answer:

   JavaScript and JSX -> Option C

4. Quick Check:

   React Native = JavaScript and JSX [OK]

Hint: React Native uses JavaScript, Flutter uses Dart [OK]

Common Mistakes:

• Confusing Flutter's Dart with React Native's JavaScript
• Thinking React Native uses native languages like Swift
• Assuming JSX is a separate language

2. Which of the following is the correct way to create a button in Flutter?

easy

A. <TouchableOpacity>Click</TouchableOpacity>

B. Button(title: 'Click')

C. <Button title='Click' />

D. ElevatedButton(onPressed: () {}, child: Text('Click'))

Solution

1. Step 1: Understand Flutter widget syntax

   Flutter uses Dart and widgets like ElevatedButton with named parameters.

2. Step 2: Identify correct button syntax

   ElevatedButton(onPressed: () {}, child: Text('Click')) uses ElevatedButton with onPressed callback and child Text widget, which is correct.

3. Final Answer:

   ElevatedButton(onPressed: () {}, child: Text('Click')) -> Option D

4. Quick Check:

   Flutter buttons use widgets with callbacks [OK]

Hint: Flutter buttons use widgets with onPressed callback [OK]

Common Mistakes:

• Using JSX or HTML-like syntax in Flutter
• Omitting onPressed callback in Flutter button
• Confusing React Native TouchableOpacity with Flutter widgets

3. What will be the output of this React Native code snippet?

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

export default function App() {
  return (
    
      Hello from React Native!
    
  );
}

medium

A. A screen displaying the text: Hello from React Native!

B. A blank screen with no text

C. Syntax error due to missing import

D. App crashes on launch

Solution

1. Step 1: Analyze the React Native component

   The component returns a View containing a Text element with the string 'Hello from React Native!'.

2. Step 2: Understand rendering behavior

   React Native renders the View and Text properly, so the text will appear on screen.

3. Final Answer:

   A screen displaying the text: Hello from React Native! -> Option A

4. Quick Check:

   React Native renders JSX as UI [OK]

Hint: React Native JSX renders UI elements directly [OK]

Common Mistakes:

• Thinking View or Text won't render without styles
• Assuming missing styles cause crash
• Confusing React Native with web React

4. Identify the error in this Flutter code snippet:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Text('Hello Flutter'),
      ),
    );
  }
}

medium

A. Missing @override annotation before build method

B. build method should return a Widget but returns void

C. Missing const keyword before MaterialApp

D. build method lacks override keyword and is missing @override

Solution

1. Step 1: Check Flutter build method requirements

   In Flutter, the build method should have the @override annotation to indicate it overrides a superclass method.

2. Step 2: Identify missing annotation

   The code lacks the @override annotation before the build method, which is a recommended practice to avoid errors.

3. Final Answer:

   Missing @override annotation before build method -> Option A

4. Quick Check:

   Flutter build methods need @override annotation [OK]

Hint: Always add @override before build in Flutter widgets [OK]

Common Mistakes:

• Ignoring missing @override annotation warnings
• Confusing const keyword necessity
• Thinking build returns void instead of Widget

5. You want to build a mobile app with highly customized UI components and smooth animations. Which framework is generally better suited for this need?

hard

A. React Native, because it uses native UI components by default

B. Flutter, because it offers more control over custom UI and animations

C. React Native, because it compiles to native ARM code

D. Flutter, because it uses JavaScript and JSX for UI

Solution

1. Step 1: Understand UI customization capabilities

   Flutter renders its own widgets and provides extensive control over UI and animations, allowing highly customized designs.

2. Step 2: Compare with React Native's approach

   React Native uses native UI components, which can limit deep customization and complex animations compared to Flutter.

3. Final Answer:

   Flutter, because it offers more control over custom UI and animations -> Option B

4. Quick Check:

   Flutter = better custom UI and animations [OK]

Hint: Flutter excels in custom UI and animations [OK]

Common Mistakes:

• Assuming React Native compiles to native ARM code
• Confusing Flutter's language as JavaScript
• Thinking native UI always means better customization