How can I use React Native flex to create a table, where column are stretched to fit the widest content?
<View style={styles.container}><View style={styles.row}><View style={styles.column1}><View style={styles.column2}></View><View style={styles.row}><View style={styles.column1}><View style={styles.column2}></View></View>How would the styles look like, so that column1 has the width of the widest element, same for column2?
I tried to apply flex: 1 and created a style per column with flex-shrink: 0 to shrink the column to its contents. I hoped applying the same style to all elements in a given column, I'd be able to size these somehow. What do I miss?
import React from 'react';import { View, Text, StyleSheet } from 'react-native';const App = () => { return (<View style={styles.container}><View style={styles.row}><View style={styles.column1}><Text>Column 1 Row 1</Text></View><View style={styles.column2}><Text>Column 2 Row 1 (long)</Text></View></View><View style={styles.row}><View style={styles.column1}><Text>Column 1 Row 2 (long)</Text></View><View style={styles.column2}><Text>Column 2 Row 2</Text></View></View></View> );};const styles = StyleSheet.create({ container: { flex: 1, }, row: { flexDirection: 'row', alignItems: 'flex-start', }, column1: { flexShrink: 0, }, column2: { flexShrink: 0, },});export default App;Is my approach of using flexbox correct?
