First React Native app - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React Native component needed to display text.

React Native

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

export default function App() {
  return (
    <[1]>Hello, React Native!</[1]>
  );
}

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

AText

BView

CButton

DImage

Attempts:

3 left

💡 Hint

Common Mistakes

Using View instead of Text to display text.

Forgetting to import the Text component.

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

2fill in blank

medium

Complete the code to create a container that centers its children.

React Native

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

export default function App() {
  return (
    <View style={styles.[1]>
      <Text>Centered Text</Text>
    </View>
  );
}

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

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

Acontainer

Bwrapper

Cmain

Dcentered

Attempts:

3 left

💡 Hint

Common Mistakes

Using a style name that does not exist.

Not applying the style to the View component.

The style named container is used to center content with flexbox.

3fill in blank

hard

Fix the error in the code to correctly export the App component as default.

React Native

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

function App() {
  return <Text>Hello!</Text>;
}

export [1] App;

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

Aimport

Bdefault

Cconst

Dfunction

Attempts:

3 left

💡 Hint

Common Mistakes

Writing export import App;

Using export function App; instead of export default.

Use export default to export the main component.

4fill in blank

hard

Fill in the blank to create a simple button that shows an alert when pressed.

React Native

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

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

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

AAlert.show

Bconsole.log

Calert

DAlert.alert

Attempts:

3 left

💡 Hint

Common Mistakes

Using alert() which is for web, not React Native.

Using Alert.show which does not exist.

Use Alert.alert to show a popup alert in React Native.

5fill in blank

hard

Fill all three blanks to create a stateful counter app with a button to increase count.

React Native

import React, { [1] } from 'react';
import { View, Text, Button } from 'react-native';

export default function App() {
  const [count, [2]] = [1](0);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Count: {count}</Text>
      <Button title="Increase" onPress={() => [2](count + 1)} />
    </View>
  );
}

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

AuseState

BsetCount

CuseEffect

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Not importing useState.

Confusing the updater function name.

Using useEffect instead of useState.

useState is imported to create state. It returns a pair: the current state and a function to update it, here named setCount.