"TypeError: Cannot read property 'startReader' of undefined - React Native Barcode Scanner Issue"

Question

Description:

I'm encountering an issue with a React Native application that uses a barcode scanner library, specifically the ZebraScanner library. I'm getting the error message "TypeError: Cannot read property 'startReader' of undefined" when attempting to use the startReader and stopReader functions from the ZebraScanner library.

import React, {useState, useEffect} from 'react';
import {Text, FlatList, Alert} from 'react-native';
import {useFocusEffect} from '@react-navigation/native';
import styled from 'styled-components/native';
import ApiClient from '../shared/ApiClient';
import Card from '../components/ItemCard';
import CommonFlatList from '../components/common/FlatList';
import {ZebraScanner} from '@nextup/react-native-zebra-scanner';
import {Button} from '@rneui/themed';


const handleStartReader = () => {
    ZebraScanner.startReader()
    .then((claimed) => {
      Alert.alert('Barcode reader is claimed');
    })
    .catch((error) => {
      Alert.alert('Error starting reader: ' + error.message);
    });
  };

  const handleStopReader = () => {
    ZebraScanner.stopReader()
    .then(() => {
      Alert.alert('Freedom!');
    })
    .catch((error) => {
      Alert.alert('Error stopping reader: ' + error.message);
    });
  };

useFocusEffect(
    React.useCallback(() => {
      setScreenFocus(true);
      handleStartReader();

      return () => {
        handleStopReader();
      };
    }, []),
  );

const renderItem = ({item}) => (
    <Card
      item={item}
      handleRemoveItem={handleRemoveItem}
      isConfirmationScreen={false}
    />
  );

  return (
    <StyledView>
      {scannedItems.length == 0 && (
        <CenteredView>
          <Text>Scanned items will appear here.</Text>
        </CenteredView>
      )}
      <CommonFlatList
        data={scannedItems}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        marginBottom="40px"
      />
      <ScanItemsView>
        <Button title="Scan items" onPress={handleClickScanItem} />
      </ScanItemsView>
      <ButtonContainer>
        <Button
          title="Select Location"
          onPress={navigateToScanLocationScreen}
          disabled={scannedItems.length == 0}
        />
      </ButtonContainer>
    </StyledView>
  );
}

export default ScanItemsScreen;

I've checked my import statements, and I believe I have initialized the ZebraScanner library correctly. However, I'm still encountering this error. Can someone help me understand what might be causing this issue and how to resolve it?

I have tested it on a Zebra Scanner but as soon as the ScanItem Screen appears the app crashes.