react native - Add a condition to allow a scan

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