Border Radius with slash is not working in React-pdf

Question

I know that we can set border-radius: 4px/2px in CSS for semi rounded circles. but it is not working in react pdf.

i tried these.

<View style={{borderRadius:"4px/2px", backgroundColor:"red"}} > Hello

and i imported all react pdf elements. but when i am trying above design i am getting error in console.

the error is

@react-pdf_renderer.js?v=e8b1cced:113701 Error: unsupported number: NaN
at number2 (@react-pdf_renderer.js?v=e8b1cced:58798:11)
at PDFDocument2.lineTo (@react-pdf_renderer.js?v=e8b1cced:59998:28)
at clipNode2 (@react-pdf_renderer.js?v=e8b1cced:32924:7)
at renderBackground3 (@react-pdf_renderer.js?v=e8b1cced:34087:5)
at renderNode3 (@react-pdf_renderer.js?v=e8b1cced:34139:3)
at renderChild2 (@react-pdf_renderer.js?v=e8b1cced:34123:12)
at Array.forEach (<anonymous>)
at renderChildren2 (@react-pdf_renderer.js?v=e8b1cced:34125:12)
at renderNode3 (@react-pdf_renderer.js?v=e8b1cced:34145:5)
at renderChild2 (@react-pdf_renderer.js?v=e8b1cced:34123:12)

can anybody help for this

Answer 1

The easiest way to test such syntax is in the repl https://react-pdf.org/repl

Short answer is 4px/2 is not a single px value thus = NAN

Use any other single silly number and it works.

The single value radius is itself a "maximum" OR half the narrowest edge.

You may wish to set to a higher value, than 4px, here is 30px for the view. (Click Link below)

const styles = StyleSheet.create({
  page: { backgroundColor: 'blue' },
  views: { color: 'yellow', textAlign: 'center', borderRadius: '30px', backgroundColor: 'red'},
});

const doc = (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.views}>
        <Text>Hello</Text>
        <Text>and</Text>
        <Text>Welcome</Text>
        <Text> </Text>
        <Text>To</Text>
        <Text>My</Text>
        <Text>World</Text>
      </View>
    </Page>
  </Document>
);
ReactPDF.render(doc);

https://react-pdf.org/repl?code=3187b0760ce02e004d09e01b02984605e18194a4e5600b6592803a6002764043299002806f00a06180076a0736402e1918c0046d58006b2e144005730004c0308844202bf00e443134e4ea6005f0034ac600370096c803b847e8340ab531d7c6488555f58661d001e50010511ccb8c0358190c0e828bd8554e590280095a8e5cda56d9c01980019d97d6245c52465e4951c34a8e5d48d99f4012801b99999412160e441803061e84c00780044bba4016d22a000f84cd9fa0015b990e1cc00bd91d0008802005836e17051d118105021493879f5a6d86e61fa00d52cadf6f08e4f51482dac20ae676eee002ac87f24c00126e153f400f440905fd6efd5854da8f268523aeff59ba200ea6e5038cd1c0a9bc26e88a264cee30f2492b1e4804810970cc6d24100597823389ccc0793b1aa441c93918845431ed661652163c0c74386c03184da64d6612468c0281cd06003152151e4897a275804d200000