Issue while creating EAN 13 barcode #17

sukhdeep540 · 2017-08-06T21:30:36Z

Every time when i choose the format EAN 13, I got the error "undefined is not an object(evaluating binary.length)"

sukhdeep540 · 2017-08-06T21:48:38Z

I am facing the same issue with UPC barcode.
All other formats are working fine.

andreyvital · 2017-08-20T16:37:18Z

@sukhdeep540 have you tried adding flat prop?

<Barcode value="..." format="EAN13" flat />

Benjamin-Lin-X · 2017-10-15T07:25:36Z

I add "flat", then it works! Thank you very much.
But also I set the text for ean13, there has no string.

How can I create a ean13 barcode with text?
like a sample in JsBarcode:

cdesch · 2017-12-31T20:00:02Z

I get a similar error when doing the EAN13 regarding the length. I added the flat parameter and got the ARTSurfaceView error

      <Barcode value={this.props.session.currentUser.card} format="EAN13" flat  />

wumke · 2018-02-09T16:05:22Z

see bartgryszko/react-native-circular-progress#23, dionysiusmarquis answer on 1 Jun 2016:

Add the ART lib, use flat, it will work!

cdesch · 2018-02-09T19:48:46Z

This is the code that worked:

  <Barcode value={this.props.session.currentUser.card} 
                    format="EAN13" 
                    flat 
                    width="2" 
                    text={this.props.session.currentUser.card} />

tablee425 · 2018-05-25T19:15:52Z

This is still not fixed.

tablee425 · 2018-05-25T19:22:57Z

Is there anyone implemented EAN-13 barcode builder by using this library?

cdesch · 2018-05-31T00:17:12Z

@emzarichab What error did you get?

valerusg · 2019-09-12T16:06:12Z

I accomplish to build EAN-13 barcode using this library.
The 'react-native-svg' is required. Uses 'svg' to draw the lines.
First of all add the 'svg' library: yarn add react-native-svg and link the library.

This code worked:
<Barcode flat width={3} height={150} value={cardCode} format={'EAN13'} text={cardCode} />

To fix the ART lib missing on iOS:
ReactNative > 0.60: yarn add @react-native-community/art && cd ios && pod install,
ReactNative < 0.60: https://github.com/cornade/linkART

thaiphamvan · 2019-11-11T08:36:28Z

I accomplish to build EAN-13 barcode using this library.
The 'react-native-svg' is required. Uses 'svg' to draw the lines.
First of all add the 'svg' library: yarn add react-native-svg and link the library.

This code worked:
<Barcode flat width={3} height={150} value={cardCode} format={'EAN13'} text={cardCode} />

To fix the ART lib missing on iOS:
ReactNative > 0.60: yarn add @react-native-community/art && cd ios && pod install,
ReactNative < 0.60: https://github.com/cornade/linkART

and Android?

cdesch · 2019-12-18T17:15:50Z

@thaiphamvan What do you do for RN > 60 that is running Expo?

prowseed · 2019-12-31T11:27:01Z

@thaiphamvan What do you do for RN > 60 that is running Expo?

I have rewrote the library to use svg instead of ART, took me like 5-10 minutes to do so :) It makes internally svg code already. Basically you need two essential things:

react-native-svg library

import Svg, { G, Rect, Path } from 'react-native-svg';

change render function to use svg

<Svg height="80" width="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin">
	<Path :d="bars.join('')" :fill="lineColor" />
</Svg>

PS: Check this pull request: 8927951

cdesch · 2020-01-02T21:39:36Z

@prowseed lol. thats my own pull request [#50] to use SVG. 👍

In the meantime, you can use my fork

prowseed · 2020-01-03T00:28:10Z

@prowseed lol. thats my own pull request [#50] to use SVG. 👍

In the meantime, you can use my fork

haha, that's bizarre :D I needed some tweaks in the library so i had to rewrite it in vue native anyway, but big thank you for that changes and yet too bad it's still not merged...

thaiphamvan · 2020-01-03T08:51:32Z

@thaiphamvan What do you do for RN > 60 that is running Expo?

I solved it with webview.

thaiphamvan · 2020-01-03T08:52:51Z

export default class BarCode extends React.Component<BarCodeProps, BarCodeState> {
constructor(props: BarCodeProps) {
super(props);
this.state = {
};
}
_getHtml = () => {
const jsBarCodeLib = <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>;
let html = <!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="height: 100%;width: 100%;margin: 0;padding: 0;overflow: hidden"> <svg id="barcode"></svg> ${jsBarCodeLib} <script> JsBarcode("#barcode", ${this.props.value}, { format: "${this.props.format}", width: ${this.props.widthBarCode ? this.props.widthBarCode : 2}, height: ${ this.props.heightBarCode ? this.props.heightBarCode : 40 }, displayValue: true, lineColor:"${this.props.lineColor ? this.props.lineColor : '#000'}" }); </script> </body> </html>;
return html;
};
public render() {
return (

<WebView
originWhitelist={['*']}
source={{ html: this._getHtml() }}
javaScriptEnabled={true}
/>

);
}
}

vksgautam1 · 2020-01-30T11:37:21Z

This is the code that worked:

  <Barcode value={this.props.session.currentUser.card} 
                    format="EAN13" 
                    flat 
                    width="2" 
                    text={this.props.session.currentUser.card} />

tried this code but still not showing in EAN13 format

vksgautam1 · 2020-01-30T11:40:47Z

I add "flat", then it works! Thank you very much.
But also I set the text for ean13, there has no string.

How can I create a ean13 barcode with text?
like a sample in JsBarcode:

i wanna show my barcode like this

wonsikin · 2020-03-29T09:28:06Z

#53

carloscuesta · 2020-06-19T07:21:09Z

So basically this library can't render EAN13 without the flat prop 😕 @wonsikin

That's right and have been confirmed by him at:

#4 (comment)

carloscuesta · 2020-06-19T08:03:12Z

After investigating the issue a little bit:

I found out where's the problem on the code:

react-native-barcode-builder/index.js

Line 78 in 8705acf

const binary = encoding.data;

This assumes that always the flat prop is provided to get the following binary encoding format:

If you do not provide the flat prop an array of Objects is what is returned from JSBarCode.

Clearly in this case you can't make binary.length because binary is an Array<Object>. So basically yes, this library does not supports rendering non flat Barcodes.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue while creating EAN 13 barcode #17

Issue while creating EAN 13 barcode #17

sukhdeep540 commented Aug 6, 2017

sukhdeep540 commented Aug 6, 2017

andreyvital commented Aug 20, 2017

Benjamin-Lin-X commented Oct 15, 2017

cdesch commented Dec 31, 2017

wumke commented Feb 9, 2018

cdesch commented Feb 9, 2018

tablee425 commented May 25, 2018

tablee425 commented May 25, 2018

cdesch commented May 31, 2018

valerusg commented Sep 12, 2019 •

edited

Loading

thaiphamvan commented Nov 11, 2019

cdesch commented Dec 18, 2019

prowseed commented Dec 31, 2019 •

edited

Loading

cdesch commented Jan 2, 2020 •

edited

Loading

prowseed commented Jan 3, 2020

thaiphamvan commented Jan 3, 2020

thaiphamvan commented Jan 3, 2020

vksgautam1 commented Jan 30, 2020

vksgautam1 commented Jan 30, 2020

wonsikin commented Mar 29, 2020

carloscuesta commented Jun 19, 2020 •

edited

Loading

carloscuesta commented Jun 19, 2020

Issue while creating EAN 13 barcode #17

Issue while creating EAN 13 barcode #17

Comments

sukhdeep540 commented Aug 6, 2017

sukhdeep540 commented Aug 6, 2017

andreyvital commented Aug 20, 2017

Benjamin-Lin-X commented Oct 15, 2017

cdesch commented Dec 31, 2017

wumke commented Feb 9, 2018

cdesch commented Feb 9, 2018

tablee425 commented May 25, 2018

tablee425 commented May 25, 2018

cdesch commented May 31, 2018

valerusg commented Sep 12, 2019 • edited Loading

thaiphamvan commented Nov 11, 2019

cdesch commented Dec 18, 2019

prowseed commented Dec 31, 2019 • edited Loading

cdesch commented Jan 2, 2020 • edited Loading

prowseed commented Jan 3, 2020

thaiphamvan commented Jan 3, 2020

thaiphamvan commented Jan 3, 2020

vksgautam1 commented Jan 30, 2020

vksgautam1 commented Jan 30, 2020

wonsikin commented Mar 29, 2020

carloscuesta commented Jun 19, 2020 • edited Loading

carloscuesta commented Jun 19, 2020

valerusg commented Sep 12, 2019 •

edited

Loading

prowseed commented Dec 31, 2019 •

edited

Loading

cdesch commented Jan 2, 2020 •

edited

Loading

carloscuesta commented Jun 19, 2020 •

edited

Loading