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.

Practice

1. What is the main purpose of the View component in a React Native app?

easy

A. To act as a container for other components and layout

B. To display text on the screen

C. To handle user input events

D. To fetch data from the internet

Solution

1. Step 1: Understand the role of View

   The View component is like a box that holds other components and helps arrange them on the screen.

2. Step 2: Compare with other components

   Text displays text, but View is for layout and grouping.

3. Final Answer:

   To act as a container for other components and layout -> Option A

4. Quick Check:

   View = container [OK]

Hint: Remember: View is like a box holding things [OK]

Common Mistakes:

• Confusing View with Text
• Thinking View handles user input
• Assuming View fetches data

2. Which of the following is the correct way to import React and React Native components in your first app?

easy

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

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

C. import React, { View, Text } from 'react';

D. import View, Text from 'react-native';

Solution

1. Step 1: Check React import

   React is imported as default from 'react', so import React from 'react'; is correct.

2. Step 2: Check React Native components import

   Components like View and Text are named exports from 'react-native', so import { View, Text } from 'react-native'; is correct.

3. Final Answer:

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

4. Quick Check:

   Default React + named components import [OK]

Hint: React default, components named import [OK]

Common Mistakes:

• Importing React components from 'react-native' incorrectly
• Using default import for View and Text
• Missing curly braces for named imports

3. What will the following React Native code display on the screen?

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

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

medium

A. An error because View is missing a style

B. A blank screen with no text

C. The text 'Hello, React Native!' displayed on the screen

D. The text 'Hello, React Native!' but inside a button

Solution

1. Step 1: Analyze the returned JSX

   The App function returns a View containing a Text component with the string 'Hello, React Native!'.

2. Step 2: Understand rendering behavior

   React Native will display the text inside the Text component on the screen inside the View.

3. Final Answer:

   The text 'Hello, React Native!' displayed on the screen -> Option C

4. Quick Check:

   Text inside View renders as visible text [OK]

Hint: Text inside View shows on screen [OK]

Common Mistakes:

• Thinking style is required to show text
• Confusing View with Button
• Expecting an error without styles

4. Identify the error in this React Native code snippet:

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

export default function App() {
  return (
    
      Hello World
    
  )
}

medium

A. Missing semicolon after return statement

B. No error; the code is correct and will run

C. The JSX is missing parentheses around the return value

D. The View component must have a style prop

Solution

1. Step 1: Check JSX syntax

   The JSX inside the return is wrapped in parentheses, which is optional but allowed. The code uses valid JSX syntax.

2. Step 2: Check React Native rules

   View does not require a style prop to work. Semicolons are optional in JavaScript.

3. Final Answer:

   No error; the code is correct and will run -> Option B

4. Quick Check:

   Valid JSX and React Native code [OK]

Hint: JSX parentheses optional; style not required [OK]

Common Mistakes:

• Thinking style prop is mandatory
• Expecting semicolons are required
• Assuming parentheses are always needed

5. You want to create a simple React Native app that shows the text 'Welcome!' centered both vertically and horizontally on the screen. Which style object should you apply to the View component to achieve this?

hard

A. { padding: 10, margin: 10 }

B. { flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start' }

C. { position: 'absolute', top: 0, left: 0 }

D. { flex: 1, justifyContent: 'center', alignItems: 'center' }

Solution

1. Step 1: Understand centering in React Native

   To center content vertically and horizontally, the container needs to fill the screen with flex: 1 and use justifyContent: 'center' for vertical centering and alignItems: 'center' for horizontal centering.

2. Step 2: Evaluate each style option

   { flex: 1, justifyContent: 'center', alignItems: 'center' } uses the correct flexbox properties for centering. Options A, B, and D do not center content both ways.

3. Final Answer:

   { flex: 1, justifyContent: 'center', alignItems: 'center' } -> Option D

4. Quick Check:

   Flexbox center with flex:1 [OK]

Hint: Use flex:1 with justifyContent and alignItems center [OK]

Common Mistakes:

• Using padding or margin to center content
• Forgetting flex:1 to fill screen
• Using wrong flexDirection or positioning