First React Native app - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will this React Native component display?

Consider this React Native component code. What text will appear on the screen when this app runs?

React Native

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

export default function App() {
  return (
    <View>
      <Text>Hello, React Native!</Text>
    </View>
  );
}

A A blank screen with no text

B An error because View cannot contain Text

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

D The text 'Hello World!' displayed on the screen

💡 Hint

Look at the Text component inside the View. What string does it contain?

The Text component inside the View displays the string 'Hello, React Native!'. This is the text shown on the screen.

📝 Syntax

intermediate

Which option fixes the syntax error in this React Native code?

This React Native code has a syntax error. Which option fixes it so the app runs correctly?

React Native

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

export default function App() {
  return (
    <View>
      <Text>Hello World!</Text>
    </View>
  )
}

A Add a semicolon after the closing parenthesis of return statement

B Add a missing closing parenthesis after the return statement

C Add a closing semicolon after the function declaration

D Replace parentheses around JSX with curly braces

💡 Hint

Check if all parentheses are properly closed in the return statement.

The return statement opens with a parenthesis but does not close it. Adding the missing closing parenthesis fixes the syntax error.

❓ lifecycle

advanced

When does the useEffect hook run in this React Native component?

Look at this React Native component using useEffect. When will the console.log run?

React Native

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

export default function App() {
  useEffect(() => {
    console.log('Component mounted');
  }, []);

  return (
    <View>
      <Text>Check console</Text>
    </View>
  );
}

A Only once when the component first mounts

B Every time the component re-renders

C Every time the component unmounts

D Never, because useEffect is missing a dependency

💡 Hint

An empty dependency array means the effect runs only once.

useEffect with an empty dependency array runs only once after the component mounts.

❓ navigation

advanced

What happens when you press this button in a React Native app using React Navigation?

Given this button code inside a React Navigation screen, what happens when the user taps it?

React Native

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

export default function HomeScreen({ navigation }) {
  return (
    <Button
      title="Go to Details"
      onPress={() => navigation.navigate('Details')}
    />
  );
}

A Nothing happens because onPress is not a valid prop

B The app closes because 'Details' screen is missing

C The button text changes to 'Details'

D The app navigates to the screen named 'Details'

💡 Hint

navigation.navigate('Details') changes the screen to 'Details'.

The onPress calls navigation.navigate with 'Details', so the app moves to that screen.

🔧 Debug

expert

Why does this React Native app crash on startup?

This React Native app crashes immediately. What is the cause?

React Native

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

export default function App() {
  console.log('App rendered');
  return (
    <View>
      <Text>Hello</Text>
    </View>
  );
}

A Code after return statement is unreachable causing a syntax error

B Missing import for console causes crash

C View component cannot contain Text component directly

D Function App is missing a return statement

💡 Hint

Code after return inside a function is unreachable and invalid.

The console.log after return is unreachable code, which causes a syntax error and crash.