react-native-responsive-table-view v1.4.0

React Native Responsive Table View

A simple and responsive layout component for table views pretty similar to the HTML DOM table element.

Installation

yarn add react-native-responsive-table-view

Motivation

React native doesn't provide native elements for table layout like HTML, so using the three components Table, Row and Cell we can have a similar UI experience.

Usage

import Table from 'react-native-responsive-table-view'

const App = () => {
  return (
    <SafeAreaView >
      <View>
        <Table>
          <Table.Row>
            <Table.Cell><Text>text 1</Text></Table.Cell>
            <Table.Cell><Text>text 2</Text></Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell><Text>text 3</Text></Table.Cell>
            <Table.Cell><Text>text 4</Text></Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell><Text>text 5</Text></Table.Cell>
            <Table.Cell><Text>text 6</Text></Table.Cell>
          </Table.Row>
        </Table>
      </View>
    </SafeAreaView>
  )
}

export default App

How it works

Table

Table represents the container for all our rows, it has some default stylings

{
    width: '100%',
    borderRadius: 4,
    borderStyle: 'solid',
    borderWidth: 1,
    display: 'flex',
    flexDirection: 'column',
    borderColor: BORDER_COLOR,
    backgroundColor: '#FFFFFF',
}

Props

Row

The row element in the table, each of it's children will have equal width and the sum of their total width will equal to the container width (if it has 4 children each will have width of 25% and height of the maximum child's height). It also comes with some default styles

{
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderStyle: 'solid',
    borderColor: BORDER_COLOR,
  },

Props

Cell

The cell element in each row. Also has default stylings

 {
    flexGrow: 1,
    flexShrink: 1,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 4,
    paddingHorizontal: 4,
 }

Props

General Notes

• Check out the examples here

Future Improvements

• add is last style and is first style to Row element to provide different styling for the last or first row as in some cases they might be handled differently.

• add is last style and is first style to Cell element to provide different styling for the last or first cell as in some cases they might be handled differently.

• add refs to all the components

• add onPress prop for rows and cells