responsive width ?

[CyrusZei]

I can't find a way to get the barcode to be responsive. I did try add the style={{transform: [{scale: 0.4}]}} to the parent container, but that does not feel okej.

Is there anyway to make the width adapt to its parent container ?

[acharyatilak]

Made it work with below workaround:

const ResponsiveBarCode =  ({ code, height, style }) => {
  const [width, setWidth] = React.useState(0);
  const calculatedBarWidth = width / (12 * (3 + code.length));
  return (
    <View
      style={[{ alignContent: 'center', justifyContent: 'center', width: '100%' }, style]}
      onLayout={({ nativeEvent }) => setWidth(nativeEvent.layout.width)}
    >
      <Barcode value={`${code}`} width={calculatedBarWidth} height={height} />
    </View>
  );
};

[bouiboui]

Made it work with below workaround:

const ResponsiveBarCode =  ({ code, height, style }) => {
  const [width, setWidth] = React.useState(0);
  const calculatedBarWidth = width / (12 * (3 + code.length));
  return (
    <View
      style={[{ alignContent: 'center', justifyContent: 'center', width: '100%' }, style]}
      onLayout={({ nativeEvent }) => setWidth(nativeEvent.layout.width)}
    >
      <Barcode value={`${code}`} width={calculatedBarWidth} height={height} />
    </View>
  );
};

@acharyatilak Can you explain what 12 and 3 stand for? Or did you find them by trial and error?

[acharyatilak]

Made it work with below workaround:

const ResponsiveBarCode =  ({ code, height, style }) => {
  const [width, setWidth] = React.useState(0);
  const calculatedBarWidth = width / (12 * (3 + code.length));
  return (
    <View
      style={[{ alignContent: 'center', justifyContent: 'center', width: '100%' }, style]}
      onLayout={({ nativeEvent }) => setWidth(nativeEvent.layout.width)}
    >
      <Barcode value={`${code}`} width={calculatedBarWidth} height={height} />
    </View>
  );
};

@acharyatilak Can you explain what 12 and 3 stand for? Or did you find them by trial and error?

It was completely trial and error.

[bouiboui]

Alright, thanks for the quick answer!

[bouiboui]

I found the exact values:

L = (11 C + 35) X where: L = Overall length (not including Quiet Space) C = Number of DATA characters (not including START, CHECK, or STOP) X = length of x-dimension

https://www.precisionid.com/code-128-faq/#:~:text=L%20%3D%20(11%20*%20C%20%2B%2035)%20*%20X

Here's the updated code:

interface ResponsiveBarCodeProps {
  code: string;
  height: number;
  style?: any;
}

const ResponsiveBarCode = ({
  code,
  height,
  style = [],
}: ResponsiveBarCodeProps) => {
  const [width, setWidth] = React.useState(0);
  const calculatedBarWidth = width / (11 * code.length + 35);
  return (
    <View
      onLayout={({ nativeEvent }) => setWidth(nativeEvent.layout.width)}
      style={[
        { alignContent: 'center', justifyContent: 'center', width: '100%' },
        style,
      ]}
    >
      <Barcode
        format="CODE128"
        height={height}
        value={code}
        width={calculatedBarWidth}
      />
    </View>
  );
};