Issues with borders

Hi, I noticed some strange issues with borders. Sometimes they are not visible at all, sometimes are of different width even if I set the same width to all borders, sometimes they stretch after the end of the View (See image below)

This is the table component that I made to render tables:

import React from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, Text } from '@react-pdf/renderer';

const tableBorderWidth = '1px';
const tableBorderColor = 'grey';

const styles = StyleSheet.create({
    rowsContainer: {
        flex: 0,
        flexDirection: 'column',
        borderTop: `${tableBorderWidth} solid ${tableBorderColor}`
    },
    row: {
        flex: 0,
        flexDirection: 'row',
        borderLeft: `${tableBorderWidth} solid ${tableBorderColor}`,
        borderBottom: `${tableBorderWidth} solid ${tableBorderColor}`
    },
    defaultText: {
        padding: 0,
        fontSize: 7
        // marginTop: 2 // hack to center text vertically,
    },
    defaultCell: {
        paddingVertical: 1,
        paddingHorizontal: 3,
        borderRight: `${tableBorderWidth} solid ${tableBorderColor}`
    }
});

export default class PDFTable extends React.PureComponent {
    renderSingleCell = ({ cellStyle, textStyle, value }, columnIndex) => (
        <View
            key={columnIndex}
            style={[styles.defaultCell, cellStyle, { width: this.props.columnWidths[columnIndex] }]}
        >
            <Text style={[styles.defaultText, textStyle]}>{value}</Text>
        </View>
    );

    renderSingleRow = (row, rowIndex) => {
        return (
            <View key={rowIndex} style={styles.row}>
                {row.map(this.renderSingleCell)}
            </View>
        );
    }

    render = () => {
        return (
            <View style={styles.rowsContainer}>
                {this.props.rows.map(this.renderSingleRow)}
            </View>
        );
    }
}

const CellShape = PropTypes.shape({
    cellStyle: PropTypes.objectOf(PropTypes.any),
    textStyle: PropTypes.objectOf(PropTypes.any),
    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
});

PDFTable.propTypes = {
    columnWidths: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
    rows: PropTypes.arrayOf(PropTypes.arrayOf(CellShape)).isRequired
};

Btw, I was only able to set border in pixels, is there any other unit I can use to define border? Thanks.

[klis87]

@diegomura I also confirm it. see table example here: https://codesandbox.io/s/6xzq3rw8rk

[jani789]

increase table height