message: Integrates with CityPicker component.
diff: import { Box, color, Flex, Sans, Separator, Serif, space } from "@artsy/palette"
  import { CircleWhiteCheckIcon } from "lib/Icons/CircleWhiteCheckIcon"
  import React, { Component } from "react"
  -import { Modal, ScrollView, TouchableOpacity } from "react-native"
  +import { Modal, NativeModules, ScrollView, TouchableOpacity } from "react-native"
  import styled from "styled-components/native"
  +import { cityList as cities } from "./cities"
  interface State {
  - overlayVisible: boolean
  selectedCity: string
  }
  -interface Props {
  - overlayVisible: boolean
  -}
  -
  -const cityList = ["New York", "Los Angeles", "London", "Berlin", "Paris", "Hong Kong"]
  -export class CityPicker extends Component<Props, State> {
  +const cityList = cities.map(city => city.name)
  +export class CityPicker extends Component<{}, State> {
  state = {
  - overlayVisible: null,
  selectedCity: null,
  }
  - _mounted = null
  -
  - componentDidMount() {
  - this._mounted = true
  - }
  -
  - componentWillUnmount() {
  - this._mounted = false
  - }
  -
  - selectCity(city) {
  - const isCityPickerMounted = this._mounted
  -
  + selectCity(city: string, index: number) {
  this.setState({ selectedCity: city })
  -
  - // checks that comp is mounted before calling timeout method here to prevent timer
  - // from firing after component is unmounted
  - if (isCityPickerMounted) {
  - setTimeout(() => {
  - this.setState({ overlayVisible: false })
  - }, 1000)
  - }
  + NativeModules.ARNotificationsManager.postNotificationName("ARLocalDiscoveryUserSelectedCity", { cityIndex: index })
  }
  render() {
  - const { overlayVisible, selectedCity } = this.state
  + const { selectedCity } = this.state
  return (
  - <Modal visible={overlayVisible} animationType="slide" transparent={true}>
  <Overlay>
  <ScrollView>
  <Box mt={2} ml={2}>
  @@ -58,7 +33,7 @@ export class CityPicker extends Component<Props, State> {
  </Box>
  {cityList.map((city, i) => (
  <Box key={i} mt={2} mx={2}>
  - <TouchableOpacity onPress={() => this.selectCity(city)}>
  + <TouchableOpacity onPress={() => this.selectCity(city, i)}>
  <Flex flexDirection="row" justifyContent="space-between" alignItems="flex-start">
  <Serif size="8" lineHeight={45}>
  {city}
  @@ -79,7 +54,6 @@ export class CityPicker extends Component<Props, State> {
  </Flex>
  </LogoContainer>
  </Overlay>
  - </Modal>
  )
  }
  }
  