How to Disable Pressable Component in React Native

Disabling the Pressable component can be useful in certain situations, such as when you want to prevent the user from pressing a button multiple times in quick succession, or when you want to disable a button while an action is being performed.

In this blog post, let’s learn how to disable the Pressable component easily in react native.

The Pressable component has disabled property and all you need is to make the value of the property true. This will disable the press actions of the Pressable component.

See the following code.

import React from 'react';
import {StyleSheet, Pressable, Text, View, Alert} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Pressable
        style={styles.button}
        disabled={false}
        onPress={() => Alert.alert('Testing')}>
        <Text> Button</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
    padding: 5,
    height: 40,
    backgroundColor: 'cyan',
  },
});

export default App;

And when you press the button nothing happens as the disabled property is set as true.

That’s how you disable Pressable in react native.