Custom components in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this custom button component?

Consider this React Native custom button component. What will you see on the screen when it is rendered?

React Native

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

const MyButton = ({ label }) => {
  return (
    <TouchableOpacity accessibilityRole="button" style={{ backgroundColor: '#4CAF50', padding: 10, borderRadius: 5 }}>
      <Text style={{ color: 'white', fontSize: 16 }}>{label}</Text>
    </TouchableOpacity>
  );
};

export default function App() {
  return <MyButton label="Press Me" />;
}

A A plain text 'Press Me' with no button styling or accessibility.

B A red button with black text 'Press Me'.

C A green rounded button with white text 'Press Me' that is accessible as a button.

D An error because TouchableOpacity is missing required props.

💡 Hint

Look at the styles and accessibilityRole used in TouchableOpacity.

The component uses TouchableOpacity with a green background and white text. The accessibilityRole is set to 'button' making it accessible. So the output is a green rounded button with white text 'Press Me'.

❓ lifecycle

intermediate

What happens when the custom component's prop changes?

Given this React Native custom component that uses useEffect, what will happen when the prop 'count' changes?

React Native

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

const CounterDisplay = ({ count }) => {
  useEffect(() => {
    console.log(`Count changed to ${count}`);
  }, [count]);

  return <Text>Count is {count}</Text>;
};

A Console logs 'Count changed to X' every time the count prop changes and updates the displayed text.

B Console logs only once when the component mounts and never again.

C Console logs nothing and the text never updates.

D Causes an infinite loop of console logs.

💡 Hint

Check the dependency array in useEffect.

The useEffect hook runs its callback every time the 'count' prop changes, logging the new count. The text also updates to show the current count.

❓ navigation

advanced

Which option correctly passes navigation prop to a custom component?

In React Native with React Navigation, you want to navigate from a custom button component. Which option correctly allows navigation when the button is pressed?

React Native

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

const NavButton = ({ navigation }) => {
  return <Button title="Go" onPress={() => navigation.navigate('Home')} />;
};

A Pass navigation prop from parent screen to NavButton and use it inside onPress.

B Use useNavigation hook inside NavButton without passing props.

C Call navigation.navigate directly without passing or importing navigation.

D Use window.location.href to navigate.

💡 Hint

Custom components need navigation prop passed or useNavigation hook.

The NavButton component expects navigation as a prop. Passing it from the parent screen and using it inside onPress is correct. Option A would work if useNavigation hook was used inside NavButton, but here it is not.

📝 Syntax

advanced

What error does this custom component code produce?

Look at this React Native custom component code. What error will it cause?

React Native

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

const Greeting = (name) => {
  return <View><Text>Hello, {name}!</Text></View>;
};

A ReferenceError because View is not imported.

B SyntaxError due to missing return statement.

C TypeError because 'name' is not destructured from props.

D No error, renders 'Hello, [object Object]!'

💡 Hint

Check how function parameters receive props in React components.

No error is thrown, but it renders 'Hello, [object Object]!' because the 'name' parameter receives the entire props object, which stringifies to '[object Object]'. To correctly access the prop, destructure as ({ name }).

🔧 Debug

expert

Why does this custom component not update on state change?

This custom component uses React Native state but does not update UI when the button is pressed. Why?

React Native

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

const Counter = () => {
  let count = 0;
  const increment = () => {
    count += 1;
  };
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={increment} />
    </View>
  );
};

A Because Button component requires a different prop name for onPress.

B Because 'count' is a local variable, not state, so React does not re-render on change.

C Because Text component cannot display numbers.

D Because the increment function is not called on button press.

💡 Hint

React only re-renders when state or props change, not local variables.

The variable 'count' is a local variable and changing it does not trigger React to re-render the component. To update UI, 'count' must be a state variable using useState.