Summary - Buttons

Combine Button, TouchableOpacity and disabled to write an action panel.

Summary - Buttons

In this group you learned five things. Button is the system default, a plain text label button. TouchableOpacity gives opacity feedback and accepts any child component. Pressable is the next-generation touch component; its style can take a function. onPress, onPressIn, onPressOut, onLongPress are the touch events. disabled turns the button off.

Now you will combine them into an action panel: two buttons side by side, Button for 'Save' on the left, TouchableOpacity for a custom-styled 'Delete' on the right. Two short tasks lead you there.

Exercise Action panel skeleton

Complete the empty component. Define handleSave and handleDelete. Add a panel style: flexDirection: 'row', gap: 12. Return a <View style={styles.panel}> containing <Button title="Save" onPress={handleSave} />.

Show example solution

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

export default function ActionPanel() {
  const handleSave = () => {};
  const handleDelete = () => {};
  return (
    <View style={styles.panel}>
      <Button title="Save" onPress={handleSave} />
    </View>
  );
}

const styles = StyleSheet.create({
  panel: { flexDirection: 'row', gap: 12 }
});

Exercise Add the Delete button

Add a TouchableOpacity on the right of the previous skeleton. Define a del style: padding: 12, backgroundColor: 'tomato'. Define a label style: color: 'white'. Inside <TouchableOpacity onPress={handleDelete}> put <View style={styles.del}><Text style={styles.label}>Delete</Text></View>. The buttons must sit side by side inside styles.panel.

Show example solution

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

export default function ActionPanel() {
  const handleSave = () => {};
  const handleDelete = () => {};
  return (
    <View style={styles.panel}>
      <Button title="Save" onPress={handleSave} />
      <TouchableOpacity onPress={handleDelete}>
        <View style={styles.del}>
          <Text style={styles.label}>Delete</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  panel: { flexDirection: 'row', gap: 12 },
  del: { padding: 12, backgroundColor: 'tomato' },
  label: { color: 'white' }
});

Test yourself

Which gives custom-styled feedback?
```
/* a custom-styled touch button */
```
- Button
- TouchableOpacity
- Text
- View
Show answer

TouchableOpacity — TouchableOpacity accepts any child and gives opacity feedback.
Match each component to its strength

Button

System default
TouchableOpacity

Opacity feedback
Pressable

Dynamic style function
disabled

Turn the button off

Next lesson: App design

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies