Table rows and columns in the response native?

Question

Is it possible to create a table in React native?

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

I created this layout through JS here: https://jsfiddle.net/kws67ajb/

Anyone have experience with this in React Native?

P. S. Some code for the stupid 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, } }); 

Answer 2

try this npm package.

https://www.npmjs.com/package/react-native-data-table

npm install --save response-native-data-table

examples in repo