In this tutorial, you will learn react native pressable disabled. Here you will learn how to disable pressable component in react native. I would like to show you disable pressable component in react native. This post will give you simple example of pressable disable react native. follow bellow step for disabling buttons on react native.

In this example, 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.

In the first step run the following command to create a project.

expo init ExampleApp

In this step, You will open the App.js file and put the 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={true}
        onPress={() => Alert.alert('Testing')}>
        <Text style={ styles.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: 'green',
  },
  text:{
    color:'white'
  }
});

export default App;

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

It will help you...