Modal not showing in ios simulator and devices

[tejEtrix]

`render() {
const data = [
{ value: '1', label: 'Channel info' },
{ value: '2', label: 'Invite Members' },
]

return (
  <ThemeProvider uiTheme={uiTheme}>
    <BusyIndicator style={{zIndex: 99}}/>
    <Modal
      animationType="slide"
      transparent={false}
      visible={this.state.modalVisible}
      onRequestClose={() => { this.setModalVisible(false);}}>

      <View style={styles.modalNav}>
        <TouchableOpacity
          style={{flex:2}}
          onPress={() => {
            this.cancelModal()
          }}>
          <MaterialIcons
            name="close"
            size={22}
            style={{color:'white'}}
          />
        </TouchableOpacity>

        <Text style={{flex: 12,marginLeft: 10, color: 'white', fontSize: 20}}>Group Members</Text>

        <TouchableOpacity
          style={{flex:2, right:0, marginLeft:0}}
          onPress={() => {
            this.saveMembersModal()
          }}>
          <MaterialIcons
            name="check"
            size={22}
            style={{color:'white'}}
          />
        </TouchableOpacity>
      </View>

      <View style={{padding:20, paddingTop:10, marginBottom:40}}>
        <MemberViewScreen mainState={this}/>
      </View>
    </Modal>

    <View style={{backgroundColor: '#fff', flex: 1}}>
      <Toolbar
        leftElement={
          <TouchableOpacity style={{justifyContent: 'flex-start'}} onPress={() => this.props.navigation.goBack()}>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <MaterialIcons
                name={Platform.OS==="ios"?"chevron-left":"arrow-back"}
                size={Platform.OS==="ios"?40:25}
                color="#fff"
              />
              {(Platform.OS==="ios")?<Text style={{color: "white", textAlign: 'left', marginLeft: -10}}>Back</Text>:<Text></Text>}
            </View>
          </TouchableOpacity>
        }

        rightElement={
          <Dropdown
            data={data}
            visible={this.state.isGroup}
            onChangeText={(text) => {
             
              if(text == 1){
               alert('Channel Info')
              }
              if(text == 2){
                this.setModalVisible(true);
              }
            }}
            renderBase={() => (
              <MaterialIcons
                name="more-vert"
                color="#fff"
                size={24}
                style={{
                  paddingTop: 8,
                  paddingBottom: 8,
                  paddingLeft: 8,
                  paddingRight: 8,
                  display: (this.state.isGroup) ? 'flex' : 'none'
                }}
              />
            )}
            rippleInsets={{ top: 0, bottom: 0, left: 0, right: 0 }}
            containerStyle={{ width: 40, height: 40 }}
            dropdownPosition={1}
            itemColor="rgba(0, 0, 0, .87)"
            pickerStyle={{
              width: 140,

              left: null,
              right: 0,

              marginRight: 8,
              marginTop: 24
            }}
          />
        }

        
      />
      <GiftedChat
        messages={this.state.messages}
        placeholder='Type message here'
        onSend={this.onSend}
        loadEarlier={this.state.loadEarlier}
        onLoadEarlier={this.onLoadEarlier}
        isLoadingEarlier={this.state.isLoadingEarlier}
        bottomOffset={50}
       
        user={{
          _id: this.state.myId, // sent messages should have same user._id
        }}
       
        renderAvatarOnTop={true}
        renderActions={this.renderCustomActions}
        renderBubble={this.renderBubble}
        renderCustomView={this.renderCustomView}
        renderFooter={this.renderFooter}
        parsePatterns={linkStyle => [
          {
            pattern: /#(\w+)/,
            style: { ...linkStyle, color: '#951dfe' },
            onPress: props => alert(`press on ${props}`),
          },
          {
            pattern: /\[(@[^:]+):([^\]]+)\]/i,
            style: styles.username,
            onPress: this.handleNamePress,
            renderText: this.renderText
          },
          {
            type: 'phone',
            style: styles.phone,
            onPress: this.handlePhonePress
          },
          {
            type: 'email',
            style: styles.email,
            onPress: this.handleEmailPress,
          }
        ]}
      />
    </View>
  </ThemeProvider>
);

}`

when i click on 1st action of Dropdown then Alert freezes the screen and 2nd option does not show Modal in ios simulator as well as devices. Any Help please?

[hugonugraM]

I have the same problem

[hugonugraM]

I have solved it
on the method where you set visible your Modal component you should sorround it inside a timeout

setTimeout(() => { this.setInfoModalVisible(!this.state.infoModalVisible) }, 450)

this is because the animation of the dropdown is active, so after the timeout the Modal can be showed