Add a condition to allow a scan - react-native

Question

I want to add a condition in my code and for that, I would like your help.
To explain the purpose of this screen: I have a camera used to scan tickets at an event.
I want to force the user to first choose the event for which he wants to scan the ticket thanks to the implementation of an autocomplete input that I made thanks to the package
'react-native-dropdown-autocomplete'
So, I don't really know how to do this, adding a condition to prevent the user from scanning his QrCode / Barcode before having selected his event.
Where do you think I can put my condition? And how do you put it in place ?
Thanks for all the time you spent helping me. :)
class Tickets extends Component {
constructor(props) {
super(props);
this.state = {
Press: false,
hasCameraPermission: null,
name: '',
lastScannedUrl:null,
displayArray: []
};
}
initListData = async () => {
let list = await getProducts(1);
if (list) {
this.setState({
displayArray: list,
name: list.name
});
}
//console.log('reference dans initListData =', list.reference)
};
async UNSAFE_componentWillMount() {
this.initListData();
//console.log('reference dans le state =', this.state.reference)
};
componentDidMount() {
this.getPermissionsAsync();
}
getPermissionsAsync = async () => {
const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({ hasCameraPermission: status === "granted" });
};
handleBarCodeScanned = ({ type, data }) => {
this.setState({ Press: false, scanned: true, reference: data });
this.props.navigation.navigate('ProductDetails', {reference : parseInt(this.state.state.reference)})
};
renderBarcodeReader = () => {
const { hasCameraPermission, scanned } = this.state;
if (hasCameraPermission === null) {
return <Text>{i18n.t("scan.request")}</Text>;
}
if (hasCameraPermission === false) {
return <Text>{i18n.t("scan.noaccess")}</Text>;
}
return (
<View
style={{
flex: 1,
...StyleSheet.absoluteFillObject
}}
>
<Camera
onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
barCodeScannerSettings={[Camera.Constants.Type.qr]}
style={{flex:1}}
/>
{scanned && (
<Button
title={"Tap to Scan Again"}
onPress={() => this.setState({ scanned: false })}
/>
)}
</View>
);
}
handleSelectItem(item, index) {
const {onDropdownClose} = this.props;
onDropdownClose();
console.log(item);
}
render() {
const { hasCameraPermission, scanned, Press } = this.state;
let marker = null;
const {scrollToInput, onDropdownClose, onDropdownShow} = this.props;
console.log('displayArray', this.state.displayArray, 'reference', this.state.displayArray.name)
return (
<View style={{flex:1}}>
<Text style={{zIndex:100, color: 'red', fontStyle: 'italic', fontSize: 14}}>{i18n.t("tickets.warning")}</Text>
<View style={{width: "100%", zIndex: 100}}>
<Autocomplete
key={shortid.generate()}
containerStyle={{margin: 0, padding: 0, borderBottomColor: 'transparent',}}
inputStyle={{ width: '80%', borderWidth: 1, backgroundColor: '#FFF', opacity: 0.9, borderColor: '#F78400'}}
placeholder={i18n.t("tickets.event")}
placeholderColor="#F78400"
pickerStyle={styles.autocompletePicker}
scrollStyle={styles.autocompleteScroll}
scrollToInput={ev => {}}
handleSelectItem={(item, id) => this.handleSelectItem(item, id)}
onDropdownClose={() => onDropdownClose()}
onDropdownShow={() => onDropdownShow()}
fetchDataUrl={Api}
minimumCharactersCount={2}
highlightText
valueExtractor={item => item.name}
rightContent
rightTextExtractor={item => item.properties}
/>
</View>
{this.renderBarcodeReader()}
</View>
);
}
}
export default Tickets;

Answer 1

First you need to maintain the selectedItem in the state
this.state = {
Press: false,
hasCameraPermission: null,
name: '',
lastScannedUrl:null,
displayArray: [],
selectedItem:null // this should be added
};
Then set that from handleSelectItem
handleSelectItem=(item, index)=> {
const {onDropdownClose} = this.props;
onDropdownClose();
console.log(item);
this.setState({
selectedItem:item
});
}
And you can disable the button based on that
<Button
title={"Tap to Scan Again"}
onPress={() => this.setState({ scanned: false })}
disabled={this.state.selectedItem===null}
/>
The button would be disabled until you select an item, or you can conditionally call renderBarcodeReader based on this.state.selectedItem

Answer 2

What you can do is add conditional checking if you have event selected before rendering the component. When there isnt event selected display black block with border (something like this maybe => https://ibb.co/8mMtNBB) and only render if event is selected. Alternatively, you can add the same boolean that indicates wether an even has been selected to the on onBarCodeScanned method and call your function only if there's an event selected.