How to constrain the total barcode width

[jordanmkoncz]

I have an app where users can enter their card/member number for various different membership programs. These various programs use different barcode types, and different card/member number lengths; some are under 10 characters while others are up to 30 characters. From the research I've done, there is really no limit to how many characters can be encoded in a Code128 barcode, the barcode itself will just get bigger and bigger (see https://stackoverflow.com/a/31359916/1374827).

Given this, how can I ensure that when displaying a barcode for an arbitrary card/member number which could be 10, 30, 50 (etc.) characters long, that the barcode will actually be fully visible on the screen? I tried displaying a 30 character Code128 barcode and in the iPhone 8 Plus simulator (which is a fairly big screen size) the barcode does not actually fit on the screen, and the left/right edges are cut off, which is obviously a big problem.

What I'd ideally like is to be able to specify the width of the container in which the barcode will be shown, and have the barcode automatically stretch or shrink to fill as much of the container's space as possible. So let's say the container is 300 pixels wide, I'd want a barcode with only a few characters (e.g. 10, which is normally 200 pixels wide given a bar width of 2) to stretch to fill its container, and a barcode with many characters (e.g. 30, which is normally 500 pixels wide given a bar width of 2) to shrink to fit within its container.

It seems like the only thing that this library currently has to help control the width of the barcode is the prop for the width of a single bar, but if I were to choose a smaller value for this (e.g. 1), I still can't guarantee that it will fit within devices with smaller screen widths, and it will also mean that barcodes with only a few characters will be very small.

Any suggestions for how to resolve this?

[wonsikin]

@jordanmkoncz I think you should use matrix barcode (such as QR Code) instead of Code128 barcode.

[stan69b]

Hi, I was having a similar problem (though my barcode size is always the same and is alwayse too big for the screen.) I used scaling to make it fit in the screen <View style={{ transform: [{ scale: 0.9 }] }}> <Barcode value={this.state.barcodeValue} format="CODE128" background="transparent" height={70} /> </View>

I guess this could be enhanced to "try" diffrent scaling and see if the View fits the screen or not. Keep in mind that scaling it down too much will make it unreadable.

Otherwise, you could alwayse make it appear in landscape mode haha

Hope this might help anyone

[jordanmkoncz]

@stan69b thanks for your suggestion. I did try an approach like that initially, but the problem is that there will always be a barcode which will break with this approach. Since the width/size of the barcode just continues to increase as the content of the barcode increases, it will always be possible that a barcode you're displaying does not get scaled down enough to still fit within the screen.

At least that's the case for me where I'm dealing with essentially user-provided / user-generated barcodes which could contain any content, as opposed to only dealing with a limited range of possible barcode values where I can assume that there's some maximum barcode size.

What I would essentially need is a way to specify the exact dimensions I have available to render the barcode (i.e. the dimensions of the screen), and then display a barcode which fills those dimensions but does not exceed them, so it automatically expands or shrinks to stay within those dimensions.

[jordanmkoncz]

And @wonsikin in my case it's a requirement to use a Code128 barcode. The barcodes I display in my app will need to be scanned by scanners which only support barcodes and do not support QR codes or other matrix type formats. So unfortunately I can't simply switch to QR codes, I have to display a Code128 barcode.

[dasoga]

Hey @jordanmkoncz I tried to put a percentage to the container view, but didn't work. Did you figure it out how to solve this?

Thanks!

[dasoga]

Actually I just found something like this:

<Barcode
value="98939c55d93292bb18f1"
format="CODE128"
width={1.25}
height={90}                            
/>

[olingern]

Thanks for the package!

Using produces "invalid prop" errors in Expo 29.0.0

<Barcode width={1.5} />

I'm curious if barCodeWidth could be aliased so that width and barCodeWidth could be supported?

https://github.com/wonsikin/react-native-barcode-builder/blob/master/index.js#L171

[mbaltaks]

I've created a PR (https://github.com/wonsikin/react-native-barcode-builder/pull/37) that allows a solution for this problem. The issue is actually that some barcodes just will not fit on some screens, because you need at least one hardware pixel per barcode line.

So I've added a way to query the required size of a barcode with a specific line width, and then in the app I've implemented a simple negotiation of line width starting from 4, down to 1 (which I think will be 1 iOS point or 1 Android dp, and I'm not sure how well even this will scan, so I'm not going lower) and also including when a barcode can not be shown in a given view, so you can show suitable UI instead of a corrupted barcode that will never scan.

[NooruddinLakhani]

Barcode "width" should be dynamic as per the length of the value of barcode like

<Barcode value="98939c55d93292bb18f1" format="CODE128" width={1} height={90} />