Warning: Failed prop type: Invalid prop `binary` of type `string` supplied to `BarcodeChunk`, expected an array.

[CoderButerbroder]

Good day, friends. I'm using the example code for using the library from the documentation

import React from 'react';
import { View } from 'react-native';
import { Barcode } from 'expo-barcode-generator';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Barcode
        value="123456789999"
        options={{ format: 'UPC', background: 'lightblue' }}
        rotation={-5}
      />
    </View>
  );
}

and encountering the following error:

ERROR  Warning: Failed prop type: Invalid prop `binary` of type `string` supplied to `BarcodeChunk`, expected an array.
    at BarcodeChunk (http://192.168.3.221:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:214555:22)
    in Barcode (at ScreenHomeAcc.jsx:38)
    in RCTView (at View.js:116)
    in View (at ScreenHomeAcc.jsx:33)
    in RCTView (at View.js:116)
    in View (at ScreenHomeAcc.jsx:18)
    in RCTView (at View.js:116)
    in View (at ScreenHomeAcc.jsx:12)
    in ScreenHomeAcc (at profile.js:6)
    in Profile (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route(profile) (at SceneView.tsx:132)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:124)
    in SceneView (at useDescriptors.tsx:218)
    in RCTView (at View.js:116)
    in View (at Screen.tsx:63)
    in RCTView (at View.js:116)
    in View (at Background.tsx:13)
    in Background (at Screen.tsx:58)
    in Screen (at BottomTabView.tsx:135)
    in RNSScreen (at createAnimatedComponent.js:54)
    in Unknown (at src/index.native.tsx:314)
    in Suspender (at src/index.tsx:40)
    in Suspense (at src/index.tsx:39)
    in Freeze (at src/index.native.tsx:206)
    in DelayedFreeze (at src/index.native.tsx:313)
    in InnerScreen (at src/index.native.tsx:566)
    in Screen (at ScreenFallback.tsx:39)
    in MaybeScreen (at BottomTabView.tsx:127)
    in RNSScreenNavigationContainer (at src/index.native.tsx:398)
    in ScreenContainer (at ScreenFallback.tsx:30)
    in MaybeScreenContainer (at BottomTabView.tsx:93)
    in RCTView (at View.js:116)
    in View (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at BottomTabView.tsx:92)
    in BottomTabView (at createBottomTabNavigator.tsx:118)
    in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
    in NavigationContent (at useComponent.tsx:35)
    in Unknown (at createBottomTabNavigator.tsx:117)
    in BottomTabNavigator (at withLayoutContext.js:65)
    in Unknown (at _layout.js:14)
    in Bro (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route(user) (at SceneView.tsx:132)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:124)
    in SceneView (at useDescriptors.tsx:218)
    in RCTView (at View.js:116)
    in View (at DebugContainer.native.tsx:34)
    in DebugContainer (at NativeStackView.native.tsx:82)
    in MaybeNestedStack (at NativeStackView.native.tsx:325)
    in RCTView (at View.js:116)
    in View (at NativeStackView.native.tsx:318)
    in RNSScreen (at createAnimatedComponent.js:54)
    in Unknown (at src/index.native.tsx:314)
    in Suspender (at src/index.tsx:40)
    in Suspense (at src/index.tsx:39)
    in Freeze (at src/index.native.tsx:206)
    in DelayedFreeze (at src/index.native.tsx:313)
    in InnerScreen (at src/index.native.tsx:566)
    in Screen (at NativeStackView.native.tsx:253)
    in SceneView (at NativeStackView.native.tsx:413)
    in Suspender (at src/index.tsx:40)
    in Suspense (at src/index.tsx:39)
    in Freeze (at src/index.native.tsx:206)
    in DelayedFreeze (at src/index.native.tsx:220)
    in RNSScreenStack (at src/index.native.tsx:227)
    in ScreenStack (at NativeStackView.native.tsx:401)
    in NativeStackViewInner (at NativeStackView.native.tsx:474)
    in RCTView (at View.js:116)
    in View (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at NativeStackView.native.tsx:473)
    in NativeStackView (at createNativeStackNavigator.tsx:72)
    in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
    in NavigationContent (at useComponent.tsx:35)
    in Unknown (at createNativeStackNavigator.tsx:71)
    in NativeStackNavigator (at withLayoutContext.js:65)
    in Unknown (at _layout.js:11)
    in Layout (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route() (at ExpoRoot.js:90)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:92)
    in SafeAreaProvider (at ExpoRoot.js:55)
    in wrapper (at ExpoRoot.js:89)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
    in BaseNavigationContainer (at NavigationContainer.native.js:105)
    in ThemeProvider (at NavigationContainer.native.js:104)
    in NavigationContainerInner (at ExpoRoot.js:86)
    in ContextNavigator (at ExpoRoot.js:64)
    in ExpoRoot (at qualified-entry.js:20)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (at withDevTools.ios.js:25)
    in withDevTools(ErrorOverlay) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67)

I use

"dependencies": {
"expo": "~50.0.5",
"expo-barcode-generator": "^2.0.0"
}

Tell me how to fix this?

[CoderButerbroder]

@nmamali Please tell me, should I wait for an extraordinary bugfix or solution from you?

[nmamali]

@nmamali Please tell me, should I wait for an extraordinary bugfix or solution from you? could you please create a minimal-reproducible-example (https://stackoverflow.com/help/minimal-reproducible-example)

[JPStrydom]

@nmamali Please tell me, should I wait for an extraordinary bugfix or solution from you?

You could perhaps try to set up an Expo Snack. That would help us track down the issue.

[CoderButerbroder]

@JPStrydom I would love to help you, but I had a snack, I get an error when installing the package:

Failed to resolve dependency 'expo-barcode-generator@2.0.0' (Invalid module ./Background - Module not found: Error: Can't resolve './Background' in '/tmp/snackager/snackager/buildStatus/1/expo-barcode-generator@2.0.0-ios,android,web/package/components')Dependencies

Can you create an expo snack with example code from the documentation and share this snack with me? I would try to reproduce the bug in it

[CoderButerbroder]

The problem is in the following lines of the files:

1) file: node_modules/expo-barcode-generator/index.js line number: 63 fact: blob is passed in the binary parameter

2) file: node_modules/expo-barcode-generator/components/BarcodeChunk.jsx line number: 4 and 50

The BarcodeChunk function expects an array of strings, as written in BarcodeChunk.propTypes on line 50, but in fact, a blob goes there. This is why this unpleasant warning occurs :)

[CoderButerbroder]

Maybe I mixed something up, don’t judge strictly. But the problem is precisely in this place!

[CoderButerbroder]

Yes, I was right about this error.

If you comment out this line (in the screenshot), then the error for which this issue was opened disappears!

file: node_modules/expo-barcode-generator/components/BarcodeChunk.jsx line number: 50

@JPStrydom @nmamali I hope this helps you resolve the error. I'm really looking forward to the bugfix, thank you. You are very cool developers)

[JPStrydom]

@CoderButerbroder if you change that line to the following, does it still work?

BarcodeChunk.propTypes = {
  padding: PropTypes.number,
  binary: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
  options: PropTypes.shape({
    textPosition: PropTypes.oneOf(['top', 'bottom']),
    fontSize: PropTypes.number,
    textMargin: PropTypes.number,
    width: PropTypes.number,
    height: PropTypes.number
  })
};

[CoderButerbroder]

Yes that's right. I replaced this line, and there is no error!

[JPStrydom]

I'll release a new version with that fix shortly. Thanks for testing it 💪

[CoderButerbroder]

@JPStrydom Will you post a new version with this bugfix on npm?

[JPStrydom]

@CoderButerbroder I've just released 2.0.1. Please let me know if it fixes your issue.

[CoderButerbroder]

Thank you, I got the new version from npm. Congratulations on your work, it was a pleasure working with you!