React native Flatlist внутри модала иногда не показывает данные

Question

Я пытаюсь данные с помощью Flatlist внутри модального. Но иногда (не всегда) данные вообще не отображаются. Просто пустой экран. Я использую выставочный клиент для тестирования. Ниже мой код. Этот метод render () фактически находится в пользовательском компоненте. Итак, Modal находится внутри пользовательского компонента. Я не уверен, что Модал должен вызывать какие-либо проблемы здесь.

// sometime flatlist does not work when inside a modal
  render(){
    return (
          <View>
            { this.props.visible && this.renderChildModal()}
            { this.props.visible &&
            <Modal
                animationType="slide"
                transparent={false}
                visible={true}
                onRequestClose={() => {
                  //Alert.alert('Modal has been closed.');
                }}>
                <View>
                  <View style={this.styles.buttonContainer}>
                    <TouchableOpacity style={this.styles.button}
                      onPress={this.props.onDone}>
                      <Text style={styles.labelButton}>Done</Text>
                    </TouchableOpacity>
                  </View>
                  <FlatList
                    data={this.state.items}
                    extraData ={this.state}
                    renderItem={({ item }) => (
                        <CheckBox
                            title={item.name}
                            checked={item.checked}
                            onPress={()=>this.onSelect(item.id-1)}  
                        />
                    )}
                    keyExtractor={item => item.id.toString()}
                  />
                </View>
              </Modal>

              }          
          </View>   
    )
  }

Answer 1

С модалом проблем не было. Я вызывал компонент с именем MultiSelect на экране, как показано ниже,

   <MultiSelect
      items={specialities}
      selectedItems={profile.specialities}
      onItemSelected={this.onSelectedSpecialitiesChange}
      visible={this.state.specialitiesModalVisible}
      onDone={this.specialityMultiSelectDone}
    >
    </MultiSelect>

Иногда специальности пустые, так как они получены с сервера асинхронно.

Итак, я изменил свой код, как показано ниже,

{specialities.length>0 && 
 <MultiSelect
   items={specialities}
   selectedItems={profile.specialities}
   onItemSelected={this.onSelectedSpecialitiesChange}
   visible={this.state.specialitiesModalVisible}
   onDone={this.specialityMultiSelectDone}
 >
</MultiSelect> } 

Это решает проблему.