Skip to content

How to constrain the total barcode width #34

@jordanmkoncz

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions