react native: what is the way to narrow column?

Viewed 106

My example has a table of 2 columns with equal size Containers_Count and Containers_Description, I want to narrow the column of Containers_Count only. What is the way to do this? I would be happy for some help with this.

import { Table, Row, Rows } from 'react-native-table-component';

const SikumHamechalim = () => {
  const [sikumVisible, setSikumVisible] = useState([]);
  const [tableData, setTableData] = useState([]);

  const arrangeData = () => {
    let rows = [];
    sikumVisible.forEach(e => {
      let row = [e.Containers_Description, e.Containers_Count];
      rows.push(row);
    });
    setTableData(rows);
  }
  useEffect(() => { arrangeData(); }, [sikumVisible]);

  return (
    <>
      <View style={styles.Secondary_title}>
        <Text style={styles.secondaryTitleText}>
          Choose
    </Text>
      </View>
      <View style={styles.DividerLine}></View>
      <ScrollView style={styles.container}>
        <Table borderStyle={{ borderWidth: 2, borderColor: '#c8e1ff' }}>
          <Row data={tableHead} style={styles.head} textStyle={styles.text} />
          <Rows data={tableData} textStyle={styles.dataText} />
        </Table>
      </ScrollView>
    </>
  )
};

const styles = StyleSheet.create({
  container: { backgroundColor: '#fff' },
  head: { height: 40, backgroundColor: '#f1f8ff' },
  text: { margin: 6, fontWeight: 'bold', fontSize: 16, alignSelf: 'center' },
  dataText: { margin: 10, fontSize: 16, textAlign: 'center' },
});
1 Answers

You can narrow the column by with flexArr prop (See Properties section).

The value of flexArr depends on the ratio you want between the first and the second column. (In the example below the ratio is 1:3)

<Table borderStyle={{borderWidth: 1}}>
  <Rows data={tableData} flexArr={[1, 3]} />
</Table>

https://snack.expo.io/@moshfeu/narrow-column

Related