Is there a way to reset the picker to the initial state in which it was first displayed when I clicked on the onChangeCheckbox? In my example I show the checkbox and also the picker and I need to just display the initial information that was in the picker when I entered the screen.
THIS IS THE CHECKBOX
const onChangeCheckbox = (n, newValue, item) => {
console.log('onChangeCheckbox n,newValue: ', n, newValue);
const newArray = [...checkboxDisplay];
newArray[n] = !checkboxDisplay[n]; // refresh available device
setCheckboxDisplay(newArray);
const [aSerialArray, serialBoolArray] =filterDevicesByUserId (n, deviceTypeSelected[n],item, newValue);
resetNumberAndDegem(n, aSerialArray);
};
THIS IS THE PICKER
function ElementDeviceType(props) {
const index = props.index;
const item = props.item;
const color = deviceTypePickerEnable[index] ? 'white' : 'gray';
return (
<View style={styles.deviceTextView}>
<Text style={[styles.label1, { color: color }]}>device:</Text>
<View style={styles.deviceBoxView}>
<Picker
mode="dropdown"
enabled={deviceTypePickerEnable[index]}
selectedValue={deviceTypeSelected[index]}
style={styles.devicePicker}
onValueChange={(newValue) => onChangeDeviceType(index, newValue,item)}
>
<Picker.Item label="choose device" value="" enabled={false} color={'#ddd'} itemStyle={{
color: '#ccc'
}} />
{deviceTypeDisplayed[index].map((elem, i) => (
<Picker.Item
label={getDeviceTestName(elem)}
value={elem}
key={i}
/>
))}
</Picker>
</View>
</View>
);
}
THIS IS THE onChangeDeviceType FUNCTION OF THE PICKER
const onChangeDeviceType = (n, newDeviceType,item) => {
console.log('onChangeDeviceType n,newDeviceType,item:', n, newDeviceType,item);
if(newDeviceType != ''){
const newATyperray = [...deviceTypeSelected];
newATyperray[n] = newDeviceType;
setDeviceTypeSelected(newATyperray);
const [aSerialArray, serialBoolArray] =filterDevicesByUserId (n, newDeviceType,item,checkboxDisplay[n]) ;
const deviceArrayS = [...deviceNumberSelected];
deviceArrayS[n] = aSerialArray[0]; // set the selected serial to the 1st available
onChangeDeviceNumber(n, aSerialArray[0],item);
updateAllInputs(
UPDATE_TYPE.DEVICE_TYPE,
newATyperray,
deviceArrayS,
serialBoolArray
);
}
};
You can do it with the help of react-native hooks.
Here is an example code for your reference : https://thewebdev.info/2021/02/05/how-to-reset-to-initial-state-with-react-hooks/