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.
