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'.