Блог

В моем проекте у меня есть экран с именем SelectedTimings, в котором я должен показать все выбранные пользователем тайминги. Когда время выбирается более 3 раз, значения исчезают с экрана. Поэтому я использовал flexWrap: wrap, чтобы разбить их на несколько строк. Но прерывистые линии перекрываются с приведенными ниже объектами.

      <View style={styles.cutomTimeContainer}>
     {
      whenAndTotalTimes.type == 'Daily' amp;amp; 
      selectedTimes.map((item, key) =>
      <View style={styles.customTime} key={key}>
              <CustomDailyTime
               mode={whenAndTotalTimes.type}
               showHour={item?.hour}
               showMin={item?.minutes}
               showAmpm={item?.ampm}
               selectedColor={isClicked}
              />
      </View>
      )
   }
   </View>

    cutomTimeContainer:
    {
        flexWrap: 'wrap',
        flexDirection: 'row',
        justifyContent: 'center',
        marginVertical: 10,
        alignContent: 'stretch',
        // height: 100
    },

    customTime:
    {
        alignItems: 'center',
        marginTop: 10
    },
 

Есть ли какой-либо способ установить автоматическую высоту для flexWrap? Пожалуйста, найдите изображение ниже для ссылки. Заранее спасибо.