Custom components in React Native - UI Render Trace

Component - Custom components

This UI shows how to create and use a custom component in React Native. The custom component is a simple button that displays a label and triggers an action when pressed.

Widget Tree

App
├── View (container)
│   ├── CustomButton
│   │   └── Pressable
│   │       └── Text
│   └── Text (status message)

The root App component contains a View as the main container. Inside the View, there is a CustomButton component, which itself uses a Pressable wrapping a Text label. Below the button, a Text component shows a status message.

Render Trace - 6 Steps

Step 1: App

Step 2: View (container)

Step 3: CustomButton

Step 4: Pressable

Step 5: Text (button label)

Step 6: Text (status message)

State Change - Re-render

Trigger:User taps the CustomButton

Before

statusMessage = 'Button not pressed'

→

After

statusMessage = 'Button pressed!'

Re-renders:App component and its children re-render to update the status message text

UI Quiz - 3 Questions

What is the role of the CustomButton component?

A It creates a reusable button with a label and tap action.

B It displays a static text message only.

C It manages the app's navigation between screens.

D It styles the entire app background.

Key Insight

Creating custom components helps keep your code organized and reusable. In React Native, wrapping a Text inside a Pressable lets you build buttons that respond to taps with visual feedback and actions. This approach makes your UI easier to maintain and extend.

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