Custom components in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple custom component that displays a text.

React Native

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

const Greeting = () => {
  return <Text>[1];</Text>;
};

export default Greeting;

Drag options to blanks, or click blank then click option'

A<Text>Hello, friend!</Text>

BHello, friend!

C"Hello, friend!"

D{Hello, friend!}

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put quotes around the text string.

Trying to put JSX tags inside Text component content.

The Text component requires a string inside quotes to display text properly.

2fill in blank

medium

Complete the code to pass a prop called 'name' to the custom component and display it.

React Native

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

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

export default Greeting;

Drag options to blanks, or click blank then click option'

A{props}

Bprops

C{name}

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces around props in the parameter incorrectly.

Trying to destructure 'name' directly without props.

The component receives props as a parameter, which contains the 'name' property.

3fill in blank

hard

Fix the error in the code by correctly destructuring the 'name' prop in the function parameter.

React Native

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

Drag options to blanks, or click blank then click option'

A{name}

Bprops

Cname

D(name)

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'name' without curly braces causes an error.

Using parentheses around 'name' without braces is invalid.

Destructuring the 'name' prop directly in the parameter requires curly braces.

4fill in blank

hard

Fill both blanks to create a custom button component that calls a function when pressed.

React Native

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

const MyButton = ({ onPress }) => {
  return (
    <TouchableOpacity [1]=[2]>
      <Text>Press me</Text>
    </TouchableOpacity>
  );
};

Drag options to blanks, or click blank then click option'

AonPress

BonClick

ChandlePress

DpressHandler

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'onClick' instead of 'onPress' causes no response.

Passing a string instead of a function to the event prop.

TouchableOpacity uses the 'onPress' prop to handle presses, and the function should be passed as 'handlePress'.

5fill in blank

hard

Fill all three blanks to create a custom component that accepts 'title' and 'subtitle' props and styles the text.

React Native

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

const Header = ({ [1], [2] }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.subtitle}>{subtitle}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 10 },
  title: { fontSize: 20, fontWeight: '[3]' },
  subtitle: { fontSize: 14, color: '#666' }
});

Drag options to blanks, or click blank then click option'

Atitle

Bsubtitle

Cbold

Dnormal

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to destructure both props causes undefined errors.

Using 'normal' fontWeight makes the title less visible.

The component destructures 'title' and 'subtitle' props, and the title text is styled with fontWeight 'bold'.

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