wonsikin
Issue while creating EAN 13 barcode
Every time when i choose the format EAN 13, I got the error "undefined is not an object(evaluating binary.length)"
I am facing the same issue with UPC barcode. All other formats are working fine.
@sukhdeep540 have you tried adding flat prop?
<Barcode value="..." format="EAN13" flat />
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 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 />
see https://github.com/bgryszko/react-native-circular-progress/issues/23, dionysiusmarquis answer on 1 Jun 2016:
Add the ART lib, use flat, it will work!
This is the code that worked:
<Barcode value={this.props.session.currentUser.card}
format="EAN13"
flat
width="2"
text={this.props.session.currentUser.card} />
Is there anyone implemented EAN-13 barcode builder by using this library?
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
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-svgand 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?
@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: https://github.com/wonsikin/react-native-barcode-builder/pull/50/commits/892795134374f5534af8989e399d96f375da93a3
@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 What do you do for RN > 60 that is running Expo?
I solved it with webview.
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 (
<View style={this.props.customStyle}>
<WebView
originWhitelist={['*']}
source={{ html: this._getHtml() }}
javaScriptEnabled={true}
/>
</View>
);
}
}
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
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
So basically this library can't render EAN13 without the flat prop 😕 @wonsikin
That's right and have been confirmed by him at:
https://github.com/wonsikin/react-native-barcode-builder/issues/4#issuecomment-279206732
After investigating the issue a little bit:
I found out where's the problem on the code:
https://github.com/wonsikin/react-native-barcode-builder/blob/8705acf7ddd18c3f19ad0338691debb3abb4f709/index.js#L78
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.