How can i disable a material UI dropdown in react native? - react-native

Question

I want to call an API on save button, the thing which i need is that i need the disable the dropdown and edit it using a button.
But i am not able to find how do i disable and edit the 'react-native-material-dropdown'. How can i make it toggle or change between edit and disable ?
I am not able to find anything on google and in the documentation.
<View style={styles.margin}>
<Dropdown
textColor={color.textWhiteColor}
textAlign='center'
fontSize={14}
itemCount={4}
value={prop.current_inventory}
baseColor={color.textWhiteColor}
fontWeight='bold'
fontFamily='Lato'
textAlign='left'
left={10}
top={5}
dropdownPosition={-3.5}
pickerStyle={{
backgroundColor: color.textWhiteColor,
width: '80%',
marginLeft: 20
}}
containerStyle={{
borderRadius: 10,
backgroundColor: color.headerDropdown,
width: '100%',
marginTop: 5
}}
onChangeText={(value) => this.checkValue(value, index)}
itemTextStyle={{
fontWeight: 'bold',
fontFamily: 'Lato',
}}
inputContainerStyle={{ borderBottomColor: 'transparent' }}
itemColor='black'
selectedItemColor='black'
dropdownOffset={
{ top: 0, left: 0 }}
data={this.currentInventory}
/>
</View>
<View>
<TouchableHiglight onPress= >
<Text>SAVE</Text>
</TouchableHiglight>
<TouchableHiglight onPress= >
<Text>EDIT</Text>
</TouchableHiglight>
</View>

Answer 1

You can try passing a variable (since this is related to UI, we expect to pass a state) to handle the "disable property". The only thing you have to do is to give your View wrapper a prop called pointerEvents.
So, it would be like the following:
<View style={styles.margin} pointerEvents={isDisabled ? "none" : undefined}>
<Dropdown
textColor={color.textWhiteColor}
textAlign='center'
fontSize={14}
itemCount={4}
value={prop.current_inventory}
baseColor={color.textWhiteColor}
fontWeight='bold'
fontFamily='Lato'
textAlign='left'
left={10}
top={5}
dropdownPosition={-3.5}
pickerStyle={{
backgroundColor: color.textWhiteColor,
width: '80%',
marginLeft: 20
}}
containerStyle={{
borderRadius: 10,
backgroundColor: color.headerDropdown,
width: '100%',
marginTop: 5
}}
onChangeText={(value) => this.checkValue(value, index)}
itemTextStyle={{
fontWeight: 'bold',
fontFamily: 'Lato',
}}
inputContainerStyle={{ borderBottomColor: 'transparent' }}
itemColor='black'
selectedItemColor='black'
dropdownOffset={
{ top: 0, left: 0 }}
data={this.currentInventory}
/>
</View>
Also, I encourage you to use a linting tool like ESLint, you are repeating the same prop "textAlign" twice. See more