How to Disable a Button after 1 click?

i am making an app of react-native and i need someone’s help with my stack of code

i need to disable the button after just one click. can someone help? the problem is, i am using props and because of that i am unable to disable property.

`

import React from "react";
import { View, Text, StyleSheet , Button, Image ,TouchableOpacity} from 'react-native'
import colors from "../../constants/colors";

const DoctorItem = props => {
return(
<TouchableOpacity onPress={props.onViewDetail}>
<View style={styles.dr}>
<Image style={styles.img} source={{uri:props.image}}/>
<Text style= {styles.title}>{props.title}</Text>
<Text style= {styles.price}>{props.price} RS </Text>
<View style = {styles.actions}>
<Button style={styles.btn} color={colors.primary} title="View Details " onPress={props.onViewDetail} />
<Button  style = {styles.btn} color={colors.primary} title="To Registration" onPress={props.onRegistration}  />
</View>
</View>
</TouchableOpacity>
);
}

const styles= StyleSheet.create({
dr:{
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 8,
elevation: 5,
borderRadius: 10,
backgroundColor: 'white',
height: 300,
margin: 20,

    },
    img:{
        width: '100%',
        height: '60%'
    },
    title:{
        fontSize: 18,
        marginVertical : 4,
        textAlign:'center',
        fontFamily:'opsb'
        
    
    
    },
    price:{

fontSize : 14,
color:'#888',
textAlign:'center',
fontFamily:'ops'
},
actions:{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
height: '25%',
paddingHorizontal: 20

    },
    btn : {
        padding:5,
        color:colors.primary
    }

});

export default DoctorItem;

`

import React from 'react';
import { FlatList, Text } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import dr from '../../store/reducers/dr';
import DoctorItem from '../../components/Doctor/DoctorItem';
import DrDetail from '../shop/DrDetail';
import * as appointActions from '../../store/actions/appoint';
import {HeaderButtons,Item} from 'react-navigation-header-buttons';
import CustomHeaderButton from '../../components/UI/headerButton';
import colors from '../../constants/colors';

const drscreen = props => {
const dr = useSelector(state => state.dr.availableDr);
const dispatch = useDispatch()
return (
<FlatList
data={dr}
keyExtractor={item => item.id}
renderItem={itemData => <DoctorItem
image= {itemData.item.imageUrl}
title={itemData.item.title}
price={itemData.item.price}
onViewDetail={()=>{

          props.navigation.navigate('DoctorDetails',{
            doctorId:itemData.item.id,
          doctorTitle:itemData.item.title
        });
        }} 
        onRegistration={()=>{
          dispatch(appointActions.appointDoc(itemData.item))
          
        }}
        />}
    />

);
};

drscreen.navigationOptions = navData => {
return{

    headerTitle: 'All Doctors',
    headerRight: (
      <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
        <Item
          title="Appoint"
          iconName={"ios-checkmark-done-outline"}
          onPress={() => {
            navData.navigation.navigate ("Register")
              
          }}
        />
      </HeaderButtons>
    )

}

};

export default drscreen;

`

Have tried using the disable function, but probably incorrectly. if anybody is familiar with this coding format, please help.