Диалоговое окно не закрывается

Question

Я работаю над отображением выпадающего списка в диалоговом окне, используя act-native-modals . После выбора элемента из раскрывающегося списка диалоговое окно автоматически закрывается и отображает данные выбранного элемента на экране, но некоторые элементы в раскрывающемся списке не имеют соответствующих данных. Для этих элементов я применяю условие для выбора другого элемента в списке, но после применения условия в программе диалоговое окно не закрывается, оно остается на экране с данными выбранного элемента в фоновом режиме.

Вот мой код

 constructor(props) {
    super(props);
    this.state = {
      visible: true
    }
  }

_onCityChange = city => {
    const { uid, date } = this.props;
    this.setState({
        visible: false
      });
      this.props.citiesShow({ uid, city, date })
  }

render() {
  console.log(this.props);
    let dropdownData = () => {
      let cities = this.props.cities;
      let count = Object.keys(cities).length;
      let cityList = [];
      for (let i = 0; i < count; i++) {
        cityList.push({ value: cities[i].city });
      }
      return cityList;
    }
    const dropdownCity = dropdownData();

if ((this.props.cityName.length > 0) && (this.props.cityData == '')) //THIS IS CONDITION
    {
      return (
        <View style={{ alignItems: "center", justifyContent: 'center' }}>
        <Text>No data for this location yet.</Text>
        <TouchableHighlight>
          <Text style={{ fontSize: 20 }}>Select another city.</Text>
        </TouchableHighlight>
      </View>
      );
    }
    else{
      return (
        <View>

          <View>
            <Dialog
              visible={this.state.visible}
              dialogAnimation={new SlideAnimation({ slideFrom: 'bottom' })}
              dialogStyle={{ opacity: 0.9 }}>
              <DialogContent>
                <View>
                  <Dropdown
                    label='Select your city..'
                    labelFontSize={14}
                    selectedItemColor={'black'}
                    baseColor={'black'}
                    style={{ fontSize: 22, fontWeight: 'bold' }}
                    containerStyle={{ width: 300, height: 83 }}
                    data={dropdownCity}
                    onChangeText={this._onCityChange} />
                </View>
              </DialogContent>
            </Dialog>
          </View>


          <FlatList
            data={this.props.prayer}
            keyExtractor={(item, index) => index.toString()}
            renderItem={this.renderItem} />

        </View>
      );
  }
  }

const mapStateToProps = state => {
  return {
    mainData: state.city.main,
    uid: state.city.uid,
    date: state.city.date,
    cities: state.city.cities,
    cityName: state.city.cityName
    //loading: state.city.loading
  };
};

//Make the component available to other parts of app
export default connect(mapStateToProps, { citiesShow, city, citiesToggle, getCity })(CityData);

CityReducer. js file

import { MAIN_DATA, UPDATE_HOME, DATE, CITY_DATA, CITY_NAME} from '../actions/types';
import moment from 'moment';

const INITIAL_STATE = {
    main: '',date: moment('01/01/2019', 'DD/MM/YYYY').format('DD MMMM YYYY'), cities: '', city: '',
    loading: false,
    selectedItem: ''
};
export default (state = INITIAL_STATE, action) => {
    console.log(action);
    switch (action.type) {
        case UPDATE_HOME:
            return { ...state, uid: action.payload };
        case CITY_DATA:
            return { ...state, cities: action.payload  };
        case CITY_NAME:
            return { ...state, city: action.payload };
        case MAIN_DATA:
            return { ...state, main: action.payload };
        default:
            return state;

    }
};