react-pdf/renderer small gap between views

Small gap appears between Views when using nested Views

<PDFViewer style={{ width: '100%', height: '100%' }}>
  <Document>
    <Page size="A4">
      <View style={{padding: 20}}>

         {/* main content */}
         <View style={styles.container}>
            <View style={styles.item}>
                <View style={styles.inner}>
                    {/* example content */}
                    <View style={{height: '20px'}}></View>
                </View>
            </View>
            <View style={styles.item}>
                <View style={styles.inner}>
                    {/* example content */}
                    <View style={{height: '20px'}}></View>
                </View>
            </View>
        </View>

    </View>
  </Page>
 </Document>
</PDFViewer>

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
    },
    item: {
        flexGrow: 1,
        flexBasis: 0,
        backgroundColor: '#ff0000'
    },
    inner: {
        backgroundColor: '#00ff00',
        border: '1px solid black'
    },
})

When I remove the border:

There is no gap when zoomed to 150%

When I move the border/bg-color to the item, instead of the inner, the gap disappears. Seems like a problem with nesting Views. Can’t move the border, it should be on the inner. Setting margin: -1 to inner removes the gap, but it leads to layout problems, not an ideal solution

Why that gap appears? How to remove it?

• react version: 18.3.1
• react-pdf/renderer version: 4.0.0

You need to sign in to view this answers