Button and Pressable in React Native - Mini App: Build & Ship

Build: Button and Pressable Demo

This screen shows two buttons: one using the built-in Button component and one using Pressable. Each button shows a message when pressed.

Target UI

-------------------------
| Button and Pressable   |
|                       |
| [Click Me Button]      |
|                       |
| [Press Me Pressable]   |
|                       |
-------------------------

Add a Button with label 'Click Me Button' that shows an alert 'Button pressed!' when tapped.

Add a Pressable with text 'Press Me Pressable' that changes background color when pressed and shows an alert 'Pressable pressed!' when tapped.

Use React Native Alert API for showing messages.

Style Pressable with padding and border radius.

Starter Code

React Native

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

export default function ButtonPressableDemo() {
  return (
    <View style={styles.container}>
      {/* TODO: Add Button here */}

      {/* TODO: Add Pressable here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  }
});

Task 1

Task 2

Solution

React Native

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

export default function ButtonPressableDemo() {
  return (
    <View style={styles.container}>
      <Button
        title="Click Me Button"
        onPress={() => Alert.alert('Button pressed!')}
      />

      <Pressable
        onPress={() => Alert.alert('Pressable pressed!')}
        style={({ pressed }) => [
          styles.pressable,
          { backgroundColor: pressed ? '#ddd' : '#eee' }
        ]}
        android_ripple={{ color: '#aaa' }}
        accessibilityRole="button"
        accessibilityLabel="Press Me Pressable"
      >
        <Text style={styles.pressableText}>Press Me Pressable</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  },
  pressable: {
    marginTop: 20,
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 8
  },
  pressableText: {
    fontSize: 16,
    color: '#000'
  }
});

We use the built-in Button component for a simple clickable button that shows an alert on press.

For the Pressable, we add a Text inside and style it with padding and rounded corners. The style prop uses a function to change background color when pressed, giving visual feedback.

We also add android_ripple for ripple effect on Android and accessibility props for screen readers.

This shows how to use both components for clickable UI elements with feedback.

Final Result

Completed Screen

-------------------------
| Button and Pressable   |
|                       |
| [Click Me Button]      |
|                       |
| [Press Me Pressable]   |
|                       |
-------------------------

Tapping 'Click Me Button' shows an alert with message 'Button pressed!'

Tapping 'Press Me Pressable' changes its background color briefly and shows alert 'Pressable pressed!'

Stretch Goal

Add a long press handler to the Pressable that shows an alert 'Long pressed!'

💡 Hint

Use the onLongPress prop on Pressable to detect long presses and show an alert.