Table rows and columns in React Native?

Question

Is it possible to create table in React Native?

I mean that case when width of 1st column in 1st row equal to width of 1st column in 2nd row?

I've created that layout via JS here: https://jsfiddle.net/kws67ajb/

Anyone have an experience with that in React Native?

P. S. Some code for the StackOverflow validator:

<div class="table">
    <div class="row">
        <div class="col col-left"><span>Some text</span></div>
        <div class="col"><span>1.123</span></div>
    </div>
    <div class="row">
        <div class="col col-left"><span>text</span></div>
        <div class="col"><span>1.432</span></div>
    </div>
</div>

Answer 1

import React, { Component } from 'react';
import {
  StyleSheet, Text, View,
} from 'react-native';
export default class DenemeGameScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      labels: ['Label 1', 'Label 2', 'Label 3'],
      values: [
        [1, 2, 3],
        [11, 22, 33],
        [111, 222, 333],
      ]
    };
  }
  renderValues = (values, key) => {
    return values.map((item, key) => {
      return this.renderCell(item, key)
    })
  }
  getStyle = (index) => {
    switch (index) {
      case 0:
        return [styles.row_1, styles.rowDefault]
      case 1:
        return [styles.row_2, styles.rowDefault]
      case 2:
        return [styles.row_3, styles.rowDefault]
    }
  }
  renderCell = (value, key) => {
    return <View style={this.getStyle(key)} key={key}><Text key={key} style={styles.valueStyle}>{value}</Text></View>
  }

  renderRow = (choice) => {
    return choice === "label" ? <View style={styles.row}>
      {this.state.labels.map((item, key) => (
        this.renderCell(item, key)
      ))}</View> : <View>
        {this.state.values.map((item, key) => (
          <View style={styles.row} key={key}>
            {this.renderValues(item, key)}
          </View>
        ))}</View>
  }
  render() {
    return (
      <View style={{ flex: 1, backgroundColor: "white" }}>
        {this.renderRow("label")}
        {this.renderRow("val")}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
    height: 30,
  },
  rowDefault: {
    padding: 2,
    borderColor: "black",
    borderWidth: 1
  },
  row_1: {
    flex: 1,
  },
  row_2: {
    flex: 2,
  },
  row_3: {
    flex: 3,
  },
  valueStyle: {
    flex: 1,
  }
});