How to Disable Button Component in React Native

If you’re a developer building a mobile app with React Native, you may have come across a situation where you want to disable a button based on certain conditions. In this blog post, let’s learn how to disable a button in react native.

The Button component comes with the disabled property and you can easily disable the button in react native by making its value true.

See the code snippet given below.

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

const App = () => {
  return (
    <View style={styles.container}>
      <Button
        disabled
        title="Disabled Button"
        color="blue"
        accessibilityLabel="Learn more about this disabled button"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Following is the output.

That’s how you disable a button in react native.