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.

Practice

1. What is a custom component in React Native?

easy

A. A CSS style sheet

B. A built-in React Native library

C. A special type of variable

D. A reusable function that returns UI elements

Solution

1. Step 1: Understand what a component is

   A component is a piece of UI that can be reused in different parts of the app.

2. Step 2: Identify custom components

   Custom components are user-defined functions that return UI elements, unlike built-in libraries or styles.

3. Final Answer:

   A reusable function that returns UI elements -> Option D

4. Quick Check:

   Custom component = reusable function [OK]

Hint: Custom components are functions returning UI [OK]

Common Mistakes:

• Confusing components with styles
• Thinking components are variables
• Mixing built-in libraries with custom components

2. Which of the following is the correct syntax to define a simple custom component named Greeting in React Native?

easy

A. function Greeting() { return Hello; }

B. var Greeting = Hello;

C. const Greeting = () => { Hello }

D. class Greeting extends Component { render() { return 'Hello'; } }

Solution

1. Step 1: Check function component syntax

   Function components return JSX inside the function body with a return statement.

2. Step 2: Evaluate each option

   function Greeting() { return Hello; } correctly defines a function returning JSX. var Greeting = Hello; assigns JSX directly to a variable, which is invalid. const Greeting = () => { Hello } misses the return statement. class Greeting extends Component { render() { return 'Hello'; } } uses class syntax but returns a string, not JSX.

3. Final Answer:

   function Greeting() { return Hello; } -> Option A

4. Quick Check:

   Function component must return JSX with return [OK]

Hint: Function components need a return statement [OK]

Common Mistakes:

• Omitting return in arrow functions
• Assigning JSX directly to variables
• Returning strings instead of JSX

3. What will be displayed on the screen when this component is rendered?

function Welcome(props) {
  return Hi, {props.name}!;
}

// Usage:
<Welcome name="Anna" />

medium

A. Hi, {props.name}!

B. Hi, Anna!

C. Hi, name!

D. Error: props not defined

Solution

1. Step 1: Understand props usage

   The component receives a prop called 'name' and inserts it inside the Text element using curly braces.

2. Step 2: Substitute the prop value

   Since the component is used with name="Anna", the output will be 'Hi, Anna!'.

3. Final Answer:

   Hi, Anna! -> Option B

4. Quick Check:

   Props insert values inside JSX [OK]

Hint: Props values show inside curly braces in JSX [OK]

Common Mistakes:

• Treating props as plain text
• Forgetting curly braces for props
• Assuming props are undefined

4. Identify the error in this custom component code:

function Button() {
  return (
    <TouchableOpacity>
      <Text>Click me</Text>
    </TouchableOpacity>
  )
}

export default Button;

medium

A. Text component cannot be inside TouchableOpacity

B. Function must be named with uppercase first letter

C. Missing import of TouchableOpacity

D. Missing return statement

Solution

1. Step 1: Check component usage

   The component uses TouchableOpacity and Text, which must be imported from 'react-native'.

2. Step 2: Identify missing import

   The code snippet does not show imports, so the likely error is missing import of TouchableOpacity.

3. Final Answer:

   Missing import of TouchableOpacity -> Option C

4. Quick Check:

   All used components must be imported [OK]

Hint: Always import components you use [OK]

Common Mistakes:

• Forgetting to import React Native components
• Thinking Text can't be inside TouchableOpacity
• Confusing function naming rules

5. You want to create a reusable Card component that accepts a title and content as props and displays them inside styled View and Text components. Which of the following is the best way to define this component?

hard

A. function Card({ title, content }) {
return (

{title}
{content}

);
}

B. function Card(props) {
return (

{props.title}
{props.content}

);
}

C. function Card() {
return (

title
content

);
}

D. function Card({ title, content }) {
return (

{title}

);
}

Solution

1. Step 1: Check props usage and destructuring

   function Card({ title, content }) { return ( {title} {content} ); } uses destructuring to get title and content props, which is clear and concise.

2. Step 2: Verify UI structure and styling

   function Card({ title, content }) { return ( {title} {content} ); } wraps texts in a styled View with padding, border, and rounded corners, making it reusable and visually distinct.

3. Step 3: Compare with other options

   function Card(props) { return ( {props.title} {props.content} ); } lacks styling, while the option without props uses literal strings instead of props, and the option missing content display omits the content Text.

4. Final Answer:

   function Card({ title, content }) { return ( {title} {content} ); } -> Option A

5. Quick Check:

   Destructure props and add styles for reusable UI [OK]

Hint: Destructure props and add styles for reusable components [OK]

Common Mistakes:

• Not using props to customize content
• Forgetting to style reusable components
• Using literal strings instead of props