How to align item to right

[ghost]

I'm trying to align the rows of the table to right. Nothing I tried works. When I remove flexArr the rows get lost. How can I align them right?

               <Table>
                    <TableWrapper style={styles.tableWrapper}>
                      <Col
                        data= {[t('sale.discount'), t('sale.subtotal'), t('sale.tax'),t('sale.total')]}
                        flexArr={[2]}  style={styles.tableTitle} heightArr={[28,28]} textStyle={styles.tableTitleText}
                      />
                      <Rows data={[
                        [serializeDecimal(values.discount, 'currencytext')],
                        [serializeDecimal(values.subtotal, 'currencytext')],
                        [serializeDecimal(values.tax, 'currencytext')],
                        [serializeDecimal(values.total, 'currencytext')]
                        ]} flexArr={[3]} style={styles.tableRow} textStyle={styles.tableText}
                      />
                    </TableWrapper>
                  </Table>

  tableWrapper: { flexDirection: 'row', marginLeft: 5,alignItems: 'flex-end' },
  tableTitle: { flex: 1, backgroundColor: '#f6f8fa' },
  tableRow: {  height: 28, flexDirection: 'row', justifyContent: 'flex-end'},
  tableTitleText: { textAlign: 'left' },
  tableText: {flexDirection: 'row', justifyContent: 'flex-end'  }

also tried this way

  tableWrapper: { flexDirection: 'row', marginLeft: 5,alignItems: 'flex-end' },
  tableTitle: { flex: 1, backgroundColor: '#f6f8fa' },
  tableRow: {  height: 28, textAlign: 'right'},
  tableTitleText: { textAlign: 'left' },
  tableText: {textAlign: 'right' }