react-native

Setting up a table layout in React Native


I'm transitioning a React project into React Native and need help setting up a grid layout in React Native. I want to set up a 5-col by x-row (number of rows may vary) view. I've played around with the react-native-tableview-simple package, but I can't specify the span of a cell. I've also tried the react-native-flexbox-grid package, which I'm able to set up columns, but I'm still not able to set the span-width of a specific cell. I wonder if there's anything I can use.

For reference, I would like my table to look something along the lines like this:

     |Col 1|Col 2|Col 3|Col 4|Col 5|
     |------------------------------
Row 1|     Text        | Yes |  No | 
     |------------------------------
Row 2|     Text        | Yes |  No | 
     |------------------------------
Row 3|     Text        |  Dropdown | 

Solution

  • You can do this without any packages. If each row is exactly the same doing the following should solve your problem;

    export default class Table extends Component {
        renderRow() {
          return (
                <View style={{ flex: 1, alignSelf: 'stretch', flexDirection: 'row' }}>
                    <View style={{ flex: 1, alignSelf: 'stretch' }} /> { /* Edit these as they are your cells. You may even take parameters to display different data / react elements etc. */}
                    <View style={{ flex: 1, alignSelf: 'stretch' }} />
                    <View style={{ flex: 1, alignSelf: 'stretch' }} />
                    <View style={{ flex: 1, alignSelf: 'stretch' }} />
                    <View style={{ flex: 1, alignSelf: 'stretch' }} />
                    </View>
            );
        }
    
        render() {
            const data = [1, 2, 3, 4, 5];
            return (
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                {
                    data.map((datum) => { // This will render a row for each data element.
                            return this.renderRow();
                        })
                }
                </View>
            );
        }
    }