React Native vs Flutter comparison - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple React Native component that displays "Hello World".

React Native

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

export default function App() {
  return (
    <View>
      <[1]>Hello World</[1]>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

AButton

BScrollView

CView

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Using instead of to display text.

Using

The Text component is used to display text in React Native.

2fill in blank

medium

Complete the code to add a button that shows an alert when pressed in React Native.

React Native

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

export default function App() {
  return (
    <View>
      <Button title="Press me" onPress={() => [1]('Button pressed!')} />
    </View>
  );
}

Drag options to blanks, or click blank then click option'

Aalert

Bconsole.log

CAlert.alert

Dconsole.error

Attempts:

3 left

💡 Hint

Common Mistakes

Using alert which works in web but not recommended in React Native.

Using console.log which only logs to console.

Alert.alert is the correct way to show an alert dialog in React Native.

3fill in blank

hard

Fix the error in the React Native style object to center content vertically and horizontally.

React Native

const styles = {
  container: {
    flex: 1,
    justifyContent: '[1]',
    alignItems: 'center',
  },
};

Drag options to blanks, or click blank then click option'

Acenter

Bleft

Cright

Dflex-start

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'left' or 'right' which are not valid values for justifyContent.

Using 'flex-start' which aligns content to the start, not center.

justifyContent: 'center' centers content vertically in a flex container.

4fill in blank

hard

Fill both blanks to create a Flutter widget that shows a centered text.

React Native

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: [1](
          child: [2]('Hello Flutter!'),
        ),
      ),
    );
  }
}

Drag options to blanks, or click blank then click option'

ACenter

BContainer

CText

DColumn

Attempts:

3 left

💡 Hint

Common Mistakes

Using Container instead of Center for centering.

Using Column which arranges children vertically but does not center by default.

Center widget centers its child, and Text displays text in Flutter.

5fill in blank

hard

Fill all three blanks to create a React Native StyleSheet with a red background and white centered text.

React Native

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    backgroundColor: '[1]',
    flex: 1,
    justifyContent: '[2]',
    alignItems: '[3]',
  },
  text: {
    color: 'white',
  },
});

Drag options to blanks, or click blank then click option'

Ablue

Bcenter

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong color names like 'blue' instead of 'red'.

Mixing up justifyContent and alignItems values.

The container background should be 'red'. Both justifyContent and alignItems set to 'center' center content vertically and horizontally.