компонент таблицы для заполнения своего контейнера

Question

Я использую response-native-table-component и уже задан на странице git, но ответа пока нет. У меня две проблемы. Сначала компонент таблицы не занимает всю ширину своего родительского компонента, в данном случае - scrollview. И тогда flexArr не дает желаемого эффекта, в то время как widthArr, похоже, работает, но это означает, что я должен знать ширину заранее. Поскольку заголовки - это переводы, которые могут быть длинными, я предпочитаю гибкую ширину.

Прокрутка расширяется до заполнения своего контейнера, а таблица - нет. И столбцы и строки не совпадают, даже если они имеют одни и те же значения flexArr и родительский элемент таблицы.

const widths = [1,1,2]

<View style={styles.container}>
        <ScrollView horizontal={true} style={styles.dataWrapper}>
            <Table borderStyle={{borderWidth: 1, padding:6, borderColor: '#fff'}}>
              <Row
                accessibilityHint={translations['ACCESSIBLITY.TableHeader']}
                data={tableHeaders}
                style={styles.header}
                textStyle={styles.text}
                flexArr={widths}
              />

            {tableData.map((rowData, index) => (
                  <Row
                    accessibilityHint={translations['ACCESSIBLITY.TableCell']}
                    key={index}
                    data={rowData}
                    style={[
                      styles.row,
                      index % 2 && {backgroundColor: '#F7F6E7'},
                    ]}
                    textStyle={styles.text}

                    flexArr={widths}
                  />
                ))}
            </Table>

        </ScrollView>
      </View>


const styles = StyleSheet.create({
  container: {flex: 1, padding: 1, backgroundColor: '#f00'},
  header: {height: 50, backgroundColor: '#537791'},
  text: {textAlign: 'center', fontWeight: '100'},
  dataWrapper: {marginTop: -1, flex:1, backgroundColor: '#00f'},
  row: {height: 40, backgroundColor: '#E7E6E1'},
});