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.

Practice

1. Which React Native component is best for a simple clickable button with default styling?

easy

A. Button

B. Pressable

C. View

D. TextInput

Solution

1. Step 1: Understand the purpose of Button

   Button is designed for simple clickable buttons with default styles provided by React Native.

2. Step 2: Compare with other components

   Pressable is for custom touchable areas, View is a container, and TextInput is for text input, so they are not suitable for simple buttons.

3. Final Answer:

   Button -> Option A

4. Quick Check:

   Simple clickable button = Button [OK]

Hint: Simple buttons use Button, custom ones use Pressable [OK]

Common Mistakes:

• Choosing Pressable for simple buttons
• Confusing View with clickable components
• Using TextInput for buttons

2. Which of the following is the correct way to import Pressable in a React Native file?

easy

A. import { Pressable } from 'react-native';

B. import Pressable from 'react-native';

C. import { Pressable } from 'react-native-pressable';

D. import Pressable from 'react-native-pressable';

Solution

1. Step 1: Recall React Native import syntax

   React Native exports components like Pressable as named exports, so we use curly braces in import.

2. Step 2: Verify package name

   The correct package is react-native, not react-native-pressable.

3. Final Answer:

   import { Pressable } from 'react-native'; -> Option A

4. Quick Check:

   Named import from 'react-native' = import { Pressable } from 'react-native'; [OK]

Hint: Use curly braces for named imports from 'react-native' [OK]

Common Mistakes:

• Using default import instead of named import
• Importing from wrong package
• Omitting curly braces

3. What will happen when you press this React Native code snippet?

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

export default function App() {
  return (
     Alert.alert('Pressed!')}>
      Click me
    
  );
}

medium

A. The text changes color automatically on press.

B. Nothing happens when pressing the text.

C. The app crashes due to missing Button component.

D. An alert with message 'Pressed!' appears when pressing the text.

Solution

1. Step 1: Understand Pressable behavior

   Pressable wraps the Text and triggers onPress callback when pressed.

2. Step 2: Check the onPress action

   The onPress calls Alert.alert('Pressed!'), so an alert box will appear on press.

3. Final Answer:

   An alert with message 'Pressed!' appears when pressing the text. -> Option D

4. Quick Check:

   Pressable triggers alert on press = An alert with message 'Pressed!' appears when pressing the text. [OK]

Hint: Pressable triggers onPress alert if defined [OK]

Common Mistakes:

• Thinking nothing happens on press
• Expecting automatic color change without style
• Confusing Button with Pressable behavior

4. Identify the error in this React Native code using Pressable:

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

export default function App() {
  return (
     console.log('Pressed')}>Click me
  );
}

medium

A. The onPress callback is missing parentheses.

B. You cannot put text directly inside Pressable without a Text component.

C. The import statement is incorrect.

D. The function component must return a single View.

Solution

1. Step 1: Check children of Pressable

   In React Native, text must be wrapped inside a Text component; raw strings are not allowed as direct children.

2. Step 2: Verify other parts

   onPress is correctly defined, imports are correct, and returning a single component is valid.

3. Final Answer:

   Text must be wrapped in a Text component inside Pressable. -> Option B

4. Quick Check:

   Text inside Pressable needs Text wrapper [OK]

Hint: Always wrap text in Text inside Pressable [OK]

Common Mistakes:

• Placing raw text directly inside Pressable
• Missing parentheses in onPress (not true here)
• Incorrect imports

5. You want a button that changes its background color to gray while pressed and shows the text "Tap me". Which code snippet correctly uses Pressable to achieve this?

hard

A. import { Pressable, Text } from 'react-native';

alert('Tapped')}>
Tap me

B. import { Button } from 'react-native';

({ backgroundColor: pressed ? 'gray' : 'white' })} />

C. import { Pressable, Text } from 'react-native';

[{ backgroundColor: pressed ? 'gray' : 'white' }]}>
Tap me

D. import { Pressable, Text } from 'react-native';

Tap me

Solution

1. Step 1: Understand dynamic styling with Pressable

   Pressable accepts a style function with a pressed boolean to change styles when pressed.

2. Step 2: Check each option

   import { Pressable, Text } from 'react-native';
   
    [{ backgroundColor: pressed ? 'gray' : 'white' }]}> 
     Tap me
   

   uses the style function correctly to change background color on press.

   import { Button } from 'react-native';
   
    ({ backgroundColor: pressed ? 'gray' : 'white' })} /> 

   incorrectly tries to style Button with a function.

   import { Pressable, Text } from 'react-native';
   
    alert('Tapped')}>
     Tap me
   

   lacks style change.

   import { Pressable, Text } from 'react-native';
   
   
     Tap me
   

   sets static gray background without press effect.

3. Final Answer:

   Pressable with style={({ pressed }) => [{ backgroundColor: pressed ? 'gray' : 'white' }]} -> Option C

4. Quick Check:

   Use style function with pressed for dynamic press styles [OK]

Hint: Use style={({pressed}) => ...} for press feedback in Pressable [OK]

Common Mistakes:

• Trying to style Button with style function
• Not wrapping text in Text component
• Using static styles without press state