ScrollView, список элементов в соответствии с экраном и длиной списка

Question

У меня есть массив массивов, перечисленных с горизонтальной прокруткой. Прямо сейчас это один массив для каждой страницы, а в некоторых массивах есть небольшие элементы, поэтому экран кажется немного пустым. Я хочу перечислить свои элементы в соответствии с размером экрана, и когда экран заполнится, scrollview создаст другую страницу и заполнит ее. Я ищу способ добиться этого, а не полное решение. Это мой текущий код;

<View style={styles.container}>
      <ScrollView
        horizontal={true}
        pagingEnabled={true}
        style={{ flex: 1 }}
      >
        {/* { createCategoryList(categories) } */}
        {categories.map((category, index) => {
          return (
            <View style={styles.pageContainer} key={index}>
              <Text style={styles.headerText}>{category.Name}</Text>
              <FlatList
                style={{ marginLeft: 30, marginRight: 30 }}
                data={category.Children}
                renderItem={({ item }) => {
                  return (
                    <View style={styles.categoryItemContainer}>
                      <Text style={styles.listItemNumberStyle}>{item.Id}</Text>
                      <View style={styles.listItemWrapperStyle}>
                        <ListItem
                          containerStyle={styles.listItemStyle}
                          key={item.Id}
                          title={item.Name}
                          subtitle={setItemDetailText(item.Children)}
                          rightTitle={item.Price.toString()}
                        />
                      </View>
                    </View>
                  );
                }}
                keyExtractor={(categoryItem, index) => index.toString()}
              ></FlatList>
              {/* <Overlay isVisible={visible} onBackdropPress = {toggleOverlay} ModalComponent={Modal}>
                          <Text>{selectedItem.Name}</Text>
                        </Overlay> */}
            </View>
          );
        })}
      </ScrollView>
      <CurrentPriceBar stateProps={props} />
    </View>