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'
},
})
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