Dialog box is not closing

Question

I am working on displaying a dropdown list in a dialog box using react-native-modals. After selecting an item from the dropdown list, the dialog box is closing automatically and displays data of the selected item on a screen but some items in a dropdown list don't have their respective data. For these items, I apply a condition to select another item in the list but after applying a condition in a program, a dialog box is not closing, it keeps remain on the screen with selected item's data in the background.

Here is my code

 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;

    }
};