disabled
- React Native course
- Beginner
- Lesson 46/116
- 5 min
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.
Practice 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} />.
Starter code
import React from 'react';
import { Button } from 'react-native';
export default function SendButton() {
// Add isValid state and handleSend; return a Button
return null;
}Sample 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} />;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Write the disabled prop
<Button title="Send" onPress={handleSend} ____={true} /><Button title="Send" onPress={handleSend} disabled={true} />Explanation: disabled={true} turns the button off.
2 Match each state to its behavior
| Term | Meaning |
|---|---|
disabled={true} |
Button off |
disabled={false} |
Button on |
disabled={!isValid} |
Off when form invalid |
onPress |
Fires when on |
3 What happens on a button with disabled={true}?
<Button title="Send" onPress={send} disabled={true} />- onPress does not fire Correct answer
- The button becomes invisible
- The button turns red
- The button is resized
Explanation: onPress does not fire on a disabled button.