React Native
disabled
Learn to disable buttons with the disabled prop.
disabled
Sometimes a button should not be tappable; for example, the Send button stays inactive while a form is invalid. The disabled prop does this: disabled={true} turns the button off and onPress no longer fires. Button, TouchableOpacity and Pressable all support it.
Example: <Button title="Send" onPress={handleSend} disabled={!isValid} />. When isValid is false the button stays disabled. The logic usually depends on form validity, ongoing network requests or permissions. Disabled buttons usually look dimmed.
Conditional disabling
Most of the time disabled is not a fixed true but tied to a condition. If form validity is held in a useState, you bind the button to it: disabled={!isValid}. If a network request is in flight, disabled={loading} prevents double taps.
This pattern blocks double submits, invalid form submits and unauthorized actions. The disabled value is a JavaScript expression; anything that returns true or false works. The key is: when the disabling condition changes, the component re-renders and the button opens automatically.
Exercise Write a conditionally disabled button
Complete the empty component. Define a useState named isValid (initial false). Define handleSend. Return <Button title="Send" onPress={handleSend} disabled={!isValid} />.
Show example solution
import React from 'react';
import { Button } from 'react-native';
export default function SendButton() {
const [isValid, setIsValid] = React.useState(false);
const handleSend = () => {};
return <Button title="Send" onPress={handleSend} disabled={!isValid} />;
}
Test yourself
-
Write the disabled prop
<Button title="Send" onPress={handleSend} ____={true} />
Show answer
<Button title="Send" onPress={handleSend} disabled={true} />
-
Match each state to its behavior
- disabled={true}
- Button off
- disabled={false}
- Button on
- disabled={!isValid}
- Off when form invalid
- onPress
- Fires when on
-
What happens on a button with disabled={true}?
<Button title="Send" onPress={send} disabled={true} />
- onPress does not fire
- The button becomes invisible
- The button turns red
- The button is resized
Show answer
onPress does not fire — onPress does not fire on a disabled button.
Next lesson: Summary - Buttons
