Expo Go for quick start in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the main React Native component.

React Native

import [1] from 'react-native';

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

AView

BStyleSheet

CText

DButton

Attempts:

3 left

💡 Hint

Common Mistakes

Importing View instead of Text when you want to show text.

Forgetting to import any component.

The Text component is used to display text in React Native and is commonly imported from 'react-native'.

2fill in blank

medium

Complete the code to create a functional component named App.

React Native

export default function [1]() {
  return null;
}

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

AHome

BMain

CScreen

DApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different component name that is not recognized as the app entry.

Forgetting to export the component as default.

The main component in Expo projects is usually named App and exported as default.

3fill in blank

hard

Fix the error in the code to display 'Hello Expo!' text.

React Native

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

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

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

A'Hello Expo!'

BHello Expo!

C"Hello Expo!"

DHelloExpo

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around the string causing syntax errors.

Using unquoted text which is treated as a variable.

Text content in JSX must be a string wrapped in quotes inside curly braces.

4fill in blank

hard

Fill both blanks to create a styled View container with centered content.

React Native

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

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

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

Acenter

Bflex-start

Cflex-end

Dspace-between

Attempts:

3 left

💡 Hint

Common Mistakes

Using different values causing off-center content.

Using values like 'flex-start' which align content to edges.

To center content both vertically and horizontally, use 'center' for justifyContent and alignItems.

5fill in blank

hard

Fill all three blanks to create a simple Expo app that shows 'Welcome!' text centered on screen.

React Native

import React from 'react';
import { [1], [2], StyleSheet } from 'react-native';

export default function App() {
  return (
    <[1] style={styles.container}>
      <[2]>Welcome!</[2]>
    </[1]>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

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

AView

BText

CButton

DScrollView

Attempts:

3 left

💡 Hint

Common Mistakes

Using Button or ScrollView instead of View or Text.

Not importing both components.

The View component is the container, and Text displays the text. Both must be imported and used correctly.