Button and Pressable in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple button that shows an alert when pressed.

React Native

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

export default function App() {
  return (
    <View>
      <Button title="Press me" onPress={() => Alert.[1]('Button pressed!')} />
    </View>
  );
}

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

Ashow

Blog

Calert

Dprint

Attempts:

3 left

💡 Hint

Common Mistakes

Using console.log instead of Alert.alert

Using a method name that does not exist on Alert

The Alert.alert method shows a popup alert in React Native when the button is pressed.

2fill in blank

medium

Complete the code to create a Pressable component that changes text when pressed.

React Native

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

export default function App() {
  const [pressed, setPressed] = useState(false);

  return (
    <View>
      <Pressable onPress={() => setPressed([1])}>
        <Text>{pressed ? 'Pressed!' : 'Press me'}</Text>
      </Pressable>
    </View>
  );
}

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

A!pressed

Bfalse

Ctrue

Dpressed

Attempts:

3 left

💡 Hint

Common Mistakes

Setting pressed to true always, so text never changes back

Setting pressed to false always, so text never changes

Using !pressed toggles the pressed state between true and false each time the Pressable is pressed.

3fill in blank

hard

Fix the error in the code to correctly import and use the Button component.

React Native

import React from 'react';
import { [1] } from 'react-native';

export default function App() {
  return <[1] title="Click me" onPress={() => {}} />;
}

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

ATouchableOpacity

BButton

CPressable

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Importing TouchableOpacity or Pressable but trying to use Button

Using Text component instead of Button

The Button component must be imported from react-native and used with the same name 'Button'.

4fill in blank

hard

Fill both blanks to create a Pressable that changes background color when pressed.

React Native

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

export default function App() {
  const [pressed, setPressed] = useState(false);

  return (
    <Pressable
      onPress={() => setPressed(!pressed)}
      style={({ [1] }) => [
        styles.button,
        [2] ? styles.pressed : null
      ]}
    >
      <Text>Press me</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    padding: 10,
    backgroundColor: 'lightblue',
  },
  pressed: {
    backgroundColor: 'blue',
  },
});

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

Apressed

Bhovered

Cfocused

Dselected

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hovered' or 'focused' which are not relevant here

Not using the style function argument correctly

The style function receives an object with a 'pressed' property that is true when the Pressable is pressed. We use it to apply the pressed style.

5fill in blank

hard

Fill all three blanks to create a Button with a custom color and disabled state.

React Native

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

export default function App() {
  return (
    <View>
      <Button
        title="Submit"
        color=[1]
        disabled=[2]
        onPress=[3]
      />
    </View>
  );
}

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

A"#FF0000"

Bfalse

C() => alert('Submitted!')

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using color without quotes

Setting disabled to true to enable button

Passing a string instead of a function to onPress

The color prop accepts a string color code, disabled is a boolean, and onPress is a function to call when pressed.