wonsikin / react-native-barcode-builder

Component for generating barcode in react native app
Other
175 stars 116 forks source link

Issue while creating EAN 13 barcode #17

Open sukhdeep540 opened 6 years ago

sukhdeep540 commented 6 years ago

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

screen shot 2017-08-07 at 2 58 28 am

sukhdeep540 commented 6 years ago

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

andreyvital commented 6 years ago

@sukhdeep540 have you tried adding flat prop?

<Barcode value="..." format="EAN13" flat />
Benjamin-Lin-X commented 6 years ago

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: EAN13 with text

cdesch commented 6 years ago

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  />
screen shot 2017-12-31 at 2 56 38 pm
wumke commented 6 years ago

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!

cdesch commented 6 years ago

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 commented 6 years ago

This is still not fixed.

tablee425 commented 6 years ago

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

cdesch commented 6 years ago

@emzarichab What error did you get?

valerusg commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

prowseed commented 4 years ago

@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:

  1. react-native-svg library

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

  1. 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

cdesch commented 4 years ago

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

In the meantime, you can use my fork

prowseed commented 4 years ago

@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 commented 4 years ago

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

I solved it with webview.

thaiphamvan commented 4 years ago

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>

${jsBarCodeLib} `; return html; }; public render() { return ( ); } }
vksgautam1 commented 4 years ago

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 commented 4 years ago

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: EAN13 with text

i wanna show my barcode like this

wonsikin commented 4 years ago

53

carloscuesta commented 4 years ago

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

carloscuesta commented 4 years ago

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:

Screenshot 2020-06-19 at 09 59 58

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

Screenshot 2020-06-19 at 09 59 34

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.