Summary - Buttons
- React Native course
- Beginner
- Lesson 47/116
- 5 min
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.
Practice 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} />.
Starter code
import React from 'react';
import { View, Button, StyleSheet } from 'react-native';
export default function ActionPanel() {
// Add handleSave and handleDelete; return a View with a Button
return null;
}
const styles = StyleSheet.create({
// Add the panel style here
});Sample 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 }
});Practice 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.
Starter code
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} />
{/* Add the Delete button here */}
</View>
);
}
const styles = StyleSheet.create({
panel: { flexDirection: 'row', gap: 12 }
// Add del and label styles here
});Sample 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' }
});Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which gives custom-styled feedback?
/* a custom-styled touch button */- Button
- TouchableOpacity Correct answer
- Text
- View
Explanation: TouchableOpacity accepts any child and gives opacity feedback.
2 Match each component to its strength
| Term | Meaning |
|---|---|
Button |
System default |
TouchableOpacity |
Opacity feedback |
Pressable |
Dynamic style function |
disabled |
Turn the button off |