Pressable, Button and Switch
Sprout needs three kinds of touch: a quick "Watered" button, a whole plant card you can tap to open, and an on/off setting for reminders. React Native has a component for each, and choosing the right one decides how much control you get over the look.
The rule
Button for quick, Pressable for custom, Switch for on and off.
Button is the simplest. It draws the platform's standard button and accepts very little styling:
<Button title="Watered" onPress={markWatered} color="#2e7d32" />It takes a title string, an onPress function, a color and a disabled flag. You cannot give it a custom shape or padding, so real apps soon outgrow it.
Pressable wraps anything and makes it respond to touch. Its style can be a function that receives { pressed }, so you can show feedback while the finger is down:
<Pressable
onPress={() => openPlant(plant.id)}
onLongPress={() => askToDelete(plant.id)}
hitSlop={8}
style={({ pressed }) => [styles.card, pressed && { opacity: 0.6 }]}
>
<Text>{plant.name}</Text>
</Pressable>onPressfires on a normal tap;onLongPressfires when held (about half a second by default).hitSlopenlarges the touchable area beyond the visible box, which helps small icons.- Older code uses
TouchableOpacityand similar Touchables. They still work, butPressableis the more flexible, recommended choice for new code.
Switch is a toggle. Like a controlled input, it shows a value and reports changes:
const [remind, setRemind] = useState(true);
<Switch value={remind} onValueChange={setRemind} />onValueChange receives the new boolean. If you forget to update state, the switch snaps back, because value still says the old thing.
The shortcut
Ask "what is the touch for?" A plain action with a label: Button. Anything that needs its own look, or a whole area being tappable: Pressable. A setting that is either on or off: Switch.
"Watered" on a settings test screen
Plain action, default look is fine.
Button.
Drills
Answer fast — trust the rule.
You need a round, green "Watered" button with an icon. Which component fits?
What does onValueChange on a Switch receive?
A Switch snaps back every time you flip it. What is the likely bug?
How can a Pressable fade while it is being pressed?
Which prop makes a small icon easier to tap without making it look bigger?
Remember
Buttonfor quick,Pressablefor custom,Switchfor on and off.- Ask "what is the touch for?"
- Trap: a controlled
Switchwhose state never updates snaps back.