React Native flex не дает высоты компоненту

Question

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

Разделы, помеченные 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> s похожими на таблицу, в которой есть 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>