Я пытаюсь создать что-то вроде этого:

В разделы, помеченные Dates, Time, пойдут мои данные из моих dates и timeSpan. Красная область — это место, где будет размещен мой календарь.

Я пытался подогнать Views так, чтобы они выглядели как столы, но это не очень хорошо получалось. Вот мой код:

<ScrollView>
      <View>...</View>
      <View **
          style = {{
              marginHorizontal: 10,
              marginTop: 10,
              flex: 1,
              borderColor: Colors.separatorColor,
              borderWidth: StyleSheet.hairlineWidth}}>
                  <View style = {{
                      flex: 1, 
                      flexDirection: 'row', 
                      borderBottomWidth: StyleSheet.hairlineWidth,
                      borderBottomColor: '#EDEDED'}}>
                          <View style = {{1, backgroundColor: '#ff0000'}}/>
                        {
                            dates.map((date, i) => {
                                <View key = {i} style = {{
                                    flex:1, 
                                    backgroundColor: '#00fff0', 
                                    borderRightColor: '#EDEDED', 
                                    borderRightWidth: StyleSheet.hairlineWidth}}>
                                    <Text>{date}</Text>
                                </View>
                            })
                        }
                        <View style = {{flex: 1, backgroundColor: '#ff0000'}}/>
                    </View>
                    {
                        timeSpan.map((time,i) => {
                            <View style = {{
                                flex: 1, 
                                flexDirection: 'row', 
                                borderBottomWidth: StyleSheet.hairlineWidth,
                                borderBottomColor: '#EDEDED'}}>
                                <View style = {{flex: 1, backgroundColor: '#ff0000'}}/>
                                <View style = {{flex: 1, backgroundColor: '#ff0000'}}/>
                            </View>
                        })
                    }
                </View>
                <View>...</View>
            </ScrollView>

<View>...</View> — это код для Other Stuff, из-за которого мой вопрос будет выглядеть намного длиннее, поэтому я его вырезал. Я пытаюсь сделать так, чтобы <View> выглядели как таблица с dates.length столбцами и timeSpan.length строками.

Проблема сейчас в том, что на моем экране ничего не появляется, когда я даю flex: 1 своему View, который я отметил в коде с помощью **. Однако, если я задаю ему фиксированную высоту, такую ​​как height: 260, то я получаю один большой толстый красный прямоугольник вместо множества View, которые составили бы мой собственный календарь.

Я поместил статические данные в dates и timeSpan и проверил путем регистрации, что итерации выполняются над этими массивами, поэтому я уверен, что строки и столбцы создаются, но они не отображаются на экране.

Как мне решить эту проблему, которая, как мне кажется, вызвана ценностями flex?

Обновлено:

вот пример закуски моего приложения:

<div data-snack-id = "@ohnu93/tenacious-marshmallows" data-snack-platform = "ios" data-snack-preview = "true" data-snack-theme = "light" style = "overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"></div>
<script async src = "https://snack.expo.io/embed.js"></script>