react-native-map-link 2.11.3 → 3.0.0

package/index.d.ts

@@ -1,127 +0,0 @@
-import * as React from 'react';
-import {
-  ViewStyle,
-  StyleProp,
-  ImageStyle,
-  TextStyle,
-  ImageSourcePropType,
-} from 'react-native';
-
-/** id for map application. this is the id that is passed to the `app` option */
-export type MapId =
-  | 'apple-maps'
-  | 'google-maps'
-  | 'citymapper'
-  | 'uber'
-  | 'lyft'
-  | 'transit'
-  | 'truckmap'
-  | 'waze'
-  | 'yandex'
-  | 'moovit'
-  | 'yandex-maps'
-  | 'yandex-taxi'
-  | 'kakaomap'
-  | 'mapycz'
-  | 'maps-me'
-  | 'osmand'
-  | 'gett'
-  | 'navermap'
-  | 'dgis'
-  | 'liftago'
-  | 'petalmaps';
-
-/** options shared across different types */
-interface SharedOptions {
-  /** optionally you can set which apps to show (default: will show all supported apps installed on device) */
-  appsWhiteList?: MapId[];
-  /** custom titles to display for each app instead of using default titles. */
-  appTitles?: Partial<Record<MapId, string>>;
-}
-
-interface Options extends SharedOptions {
-  latitude: number | string;
-  longitude: number | string;
-  /** optionally specify starting location for directions */
-  sourceLatitude?: number;
-  /** not optional if `sourceLatitude` is specified */
-  sourceLongitude?: number;
-  /** optional, true will always add Google Maps to iOS and open in Safari, even if app is not installed (default: false) */
-  alwaysIncludeGoogle?: boolean;
-  googleForceLatLon?: boolean;
-  appleIgnoreLatLon?: boolean;
-  googlePlaceId?: string;
-  title?: string;
-  /** optionally specify specific app to use */
-  app?: MapId;
-  /** optional (default: 'Open in Maps') */
-  dialogTitle?: string;
-  /** optional (default: 'What app would you like to use?') */
-  dialogMessage?: string;
-  cancelText?: string;
-  /** to link into Naver Map You should provide your appname which is the bundle ID in iOS and applicationId in android. */
-  naverCallerName?: string;
-  directionsMode?: 'car' | 'walk' | 'public-transport' | 'bike';
-}
-
-interface PopupStyleProp {
-  container?: StyleProp<ViewStyle>;
-  itemContainer?: StyleProp<ViewStyle>;
-  image?: StyleProp<ImageStyle>;
-  itemText?: StyleProp<TextStyle>;
-  headerContainer?: StyleProp<ViewStyle>;
-  titleText?: StyleProp<TextStyle>;
-  subtitleText?: StyleProp<TextStyle>;
-  cancelButtonContainer?: StyleProp<ViewStyle>;
-  cancelButtonText?: StyleProp<TextStyle>;
-  separatorStyle?: StyleProp<ViewStyle>;
-  activityIndicatorContainer?: StyleProp<ViewStyle>;
-}
-
-interface PopupProps extends SharedOptions {
-  isVisible: boolean;
-  showHeader?: boolean;
-  customHeader?: React.ReactNode;
-  customFooter?: React.ReactNode;
-  onCancelPressed: () => void;
-  onBackButtonPressed: () => void;
-  onAppPressed: (appName: MapId) => void;
-  style?: PopupStyleProp;
-  modalProps?: object;
-  options: Options;
-}
-
-/**
- * Link users to their desired map app.
- *
- * If an `app` option is passed, it will directly link to that map app,
- * else it will prompt user to select map app.
- *
- * Prompts via `ActionSheetIOS` on iOS & `Alert.alert` on Android.
- *
- * If these prompts don't meet your UI use case, checkout the `Popup` component,
- * or use the `getApps` function to build a custom UI.
- */
-export function showLocation(
-  options: Options,
-): Promise<string | undefined | null>;
-
-export type GetAppResult = {
-  id: MapId;
-  name: string;
-  icon: ImageSourcePropType;
-  /** function to link user to map app */
-  open: () => Promise<void>;
-};
-
-/**
- * Get array of map apps on users device.
- *
- * Useful for building custom UIs.
- */
-export function getApps(options: Options): Promise<GetAppResult[]>;
-
-/**
- * A styled popup component that displays icons in the app list
- */
-export class Popup extends React.Component<PopupProps> {}

package/index.js

@@ -1,8 +0,0 @@
-/**
- * React Native Map Link
- */
-
-import Popup from './src/components/Popup';
-import {showLocation, getApps} from './src';
-
-export {showLocation, getApps, Popup};

package/src/components/Popup.js

@@ -1,298 +0,0 @@
-/**
- * React Native Map Link
- */
-
-import React from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  Image,
-  TouchableOpacity,
-  Dimensions,
-  FlatList,
-  ActivityIndicator,
-} from 'react-native';
-import PropTypes from 'prop-types';
-import Modal from 'react-native-modal';
-
-import {getAvailableApps, checkNotSupportedApps} from '../utils';
-import {showLocation} from '../index';
-import {generateTitles, icons, generatePrefixes} from '../constants';
-
-const SCREEN_HEIGHT = Dimensions.get('screen').height;
-
-const colors = {
-  black: '#464646',
-  gray: '#BBC4CC',
-  lightGray: '#ACBBCB',
-  lightBlue: '#ECF2F8',
-};
-
-export default class Popup extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      apps: [],
-      loading: true,
-      titles: generateTitles(props.appTitles),
-    };
-
-    this._renderAppItem = this._renderAppItem.bind(this);
-  }
-
-  componentDidMount() {
-    this.loadApps();
-  }
-
-  async loadApps() {
-    const {appsWhiteList, options} = this.props;
-    let apps = await getAvailableApps(generatePrefixes(options));
-    if (appsWhiteList && appsWhiteList.length) {
-      checkNotSupportedApps(appsWhiteList);
-      apps = apps.filter((appName) =>
-        this.props.appsWhiteList.includes(appName),
-      );
-    }
-
-    this.setState({apps, loading: false});
-  }
-
-  _renderHeader() {
-    const {showHeader, customHeader, options} = this.props;
-    if (!showHeader) {
-      return null;
-    }
-    if (customHeader) {
-      return customHeader;
-    }
-
-    const dialogTitle =
-      options.dialogTitle && options.dialogTitle.length
-        ? options.dialogTitle
-        : 'Open in Maps';
-    const dialogMessage =
-      options.dialogMessage && options.dialogMessage.length
-        ? options.dialogMessage
-        : 'What app would you like to use?';
-
-    return (
-      <View style={[styles.headerContainer, this.props.style.headerContainer]}>
-        <Text style={[styles.titleText, this.props.style.titleText]}>
-          {dialogTitle}
-        </Text>
-        {dialogMessage && dialogMessage.length ? (
-          <Text style={[styles.subtitleText, this.props.style.subtitleText]}>
-            {dialogMessage}
-          </Text>
-        ) : null}
-      </View>
-    );
-  }
-
-  _renderApps() {
-    return (
-      <FlatList
-        ItemSeparatorComponent={() => (
-          <View
-            style={[styles.separatorStyle, this.props.style.separatorStyle]}
-          />
-        )}
-        data={this.state.apps}
-        renderItem={this._renderAppItem}
-        keyExtractor={(item) => item}
-      />
-    );
-  }
-
-  _renderAppItem({item}) {
-    return (
-      <TouchableOpacity
-        key={item}
-        style={[styles.itemContainer, this.props.style.itemContainer]}
-        onPress={() => this._onAppPressed({app: item})}>
-        <View>
-          <Image
-            style={[styles.image, this.props.style.image]}
-            source={icons[item]}
-          />
-        </View>
-        <Text style={[styles.itemText, this.props.style.itemText]}>
-          {this.state.titles[item]}
-        </Text>
-      </TouchableOpacity>
-    );
-  }
-
-  _renderCancelButton() {
-    const {options} = this.props;
-    const cancelText =
-      options.cancelText && options.cancelText.length
-        ? options.cancelText
-        : 'Cancel';
-    return (
-      <TouchableOpacity
-        style={[
-          styles.cancelButtonContainer,
-          this.props.style.cancelButtonContainer,
-        ]}
-        onPress={this.props.onCancelPressed}>
-        <Text
-          style={[styles.cancelButtonText, this.props.style.cancelButtonText]}>
-          {cancelText}
-        </Text>
-      </TouchableOpacity>
-    );
-  }
-
-  _renderFooter() {
-    const {customFooter} = this.props;
-    if (customFooter) {
-      return customFooter;
-    }
-    return this._renderCancelButton();
-  }
-
-  _onAppPressed({app}) {
-    showLocation({...this.props.options, app});
-    this.props.onAppPressed(app);
-  }
-
-  render() {
-    const {loading} = this.state;
-    return (
-      <Modal
-        isVisible={this.props.isVisible}
-        backdropColor={colors.black}
-        animationIn="slideInUp"
-        hideModalContentWhileAnimating
-        useNativeDriver
-        onBackButtonPress={this.props.onBackButtonPressed}
-        {...this.props.modalProps}>
-        <View style={[styles.container, this.props.style.container]}>
-          {this._renderHeader()}
-          {loading ? (
-            <ActivityIndicator
-              style={[
-                styles.activityIndicatorContainer,
-                this.props.style.activityIndicatorContainer,
-              ]}
-            />
-          ) : (
-            this._renderApps()
-          )}
-          {this._renderFooter()}
-        </View>
-      </Modal>
-    );
-  }
-}
-
-Popup.propTypes = {
-  isVisible: PropTypes.bool,
-  showHeader: PropTypes.bool,
-  customHeader: PropTypes.element,
-  customFooter: PropTypes.element,
-  onBackButtonPressed: PropTypes.func,
-  onAppPressed: PropTypes.func,
-  onCancelPressed: PropTypes.func,
-  style: PropTypes.object,
-  modalProps: PropTypes.object,
-  options: PropTypes.object.isRequired,
-  appsWhiteList: PropTypes.array,
-};
-
-Popup.defaultProps = {
-  isVisible: false,
-  showHeader: true,
-  customHeader: null,
-  customFooter: null,
-  style: {
-    container: {},
-    itemContainer: {},
-    image: {},
-    itemText: {},
-    headerContainer: {},
-    titleText: {},
-    subtitleText: {},
-    cancelButtonContainer: {},
-    cancelButtonText: {},
-    separatorStyle: {},
-    activityIndicatorContainer: {},
-  },
-  modalProps: {},
-  options: {},
-  appsWhiteList: null,
-  onBackButtonPressed: () => {},
-  onCancelPressed: () => {},
-  onAppPressed: () => {},
-};
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'white',
-    borderRadius: 10,
-    overflow: 'hidden',
-    maxHeight: SCREEN_HEIGHT * 0.6,
-  },
-  itemContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingTop: 10,
-    paddingBottom: 10,
-    paddingLeft: 20,
-    paddingRight: 20,
-  },
-  image: {
-    width: 50,
-    height: 50,
-    borderRadius: 25,
-  },
-  itemText: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    color: colors.black,
-    marginLeft: 15,
-  },
-  headerContainer: {
-    borderWidth: 1,
-    borderColor: 'transparent',
-    borderBottomColor: colors.lightBlue,
-    padding: 15,
-  },
-  titleText: {
-    fontSize: 16,
-    textAlign: 'center',
-    color: colors.black,
-  },
-  subtitleText: {
-    fontSize: 12,
-    color: colors.lightGray,
-    textAlign: 'center',
-    marginTop: 10,
-  },
-  cancelButtonContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 20,
-    borderWidth: 1,
-    borderColor: 'transparent',
-    borderTopColor: colors.lightBlue,
-  },
-  cancelButtonText: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    color: colors.gray,
-  },
-  separatorStyle: {
-    flex: 1,
-    height: 1,
-    backgroundColor: colors.lightBlue,
-  },
-  activityIndicatorContainer: {
-    height: 70,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});

package/src/constants.js

@@ -1,92 +0,0 @@
-/**
- * React Native Map Link
- */
-
-import {Platform} from 'react-native';
-
-export const isIOS = Platform.OS === 'ios';
-
-export function generatePrefixes(options) {
-  return {
-    'apple-maps': isIOS ? 'maps://' : 'applemaps://',
-    'google-maps': prefixForGoogleMaps(options.alwaysIncludeGoogle),
-    citymapper: 'citymapper://',
-    uber: 'uber://',
-    lyft: 'lyft://',
-    transit: 'transit://',
-    truckmap: 'truckmap://',
-    waze: 'waze://',
-    yandex: 'yandexnavi://',
-    moovit: 'moovit://directions',
-    'yandex-maps': 'yandexmaps://maps.yandex.ru/',
-    'yandex-taxi': 'yandextaxi://',
-    kakaomap: 'kakaomap://',
-    mapycz: isIOS ? 'szn-mapy://' : 'mapycz://',
-    'maps-me': 'mapsme://',
-    osmand: isIOS ? 'osmandmaps://' : 'osmand.geo://',
-    gett: 'gett://',
-    navermap: options.naverCallerName ? 'nmap://' : 'nmap-disabled://',
-    dgis: 'dgis://2gis.ru/',
-    liftago: 'lftgpas://',
-    petalmaps: 'petalmaps://',
-  };
-}
-
-export function prefixForGoogleMaps(alwaysIncludeGoogle) {
-  return isIOS && !alwaysIncludeGoogle
-    ? 'comgooglemaps://'
-    : 'https://www.google.com/maps/';
-}
-
-export function generateTitles(titles) {
-  return {
-    'apple-maps': 'Apple Maps',
-    'google-maps': 'Google Maps',
-    citymapper: 'Citymapper',
-    uber: 'Uber',
-    lyft: 'Lyft',
-    transit: 'The Transit App',
-    truckmap: 'TruckMap',
-    waze: 'Waze',
-    yandex: 'Yandex.Navi',
-    moovit: 'Moovit',
-    'yandex-taxi': 'Yandex Taxi',
-    'yandex-maps': 'Yandex Maps',
-    kakaomap: 'Kakao Maps',
-    mapycz: 'Mapy.cz',
-    'maps-me': 'Maps Me',
-    osmand: 'OsmAnd',
-    gett: 'Gett',
-    navermap: 'Naver Map',
-    dgis: '2GIS',
-    liftago: 'Liftago',
-    petalmaps: 'Petal Maps',
-    ...(titles || {}),
-  };
-}
-
-export const icons = {
-  'apple-maps': require('./images/apple-maps.png'),
-  'google-maps': require('./images/google-maps.png'),
-  citymapper: require('./images/citymapper.png'),
-  uber: require('./images/uber.png'),
-  lyft: require('./images/lyft.png'),
-  transit: require('./images/transit.png'),
-  truckmap: require('./images/truckmap.png'),
-  waze: require('./images/waze.png'),
-  yandex: require('./images/yandex.png'),
-  moovit: require('./images/moovit.png'),
-  'yandex-taxi': require('./images/yandex-taxi.png'),
-  'yandex-maps': require('./images/yandex-maps.png'),
-  kakaomap: require('./images/kakao-map.png'),
-  mapycz: require('./images/mapycz.png'),
-  'maps-me': require('./images/maps-me.png'),
-  osmand: require('./images/osmand.png'),
-  gett: require('./images/gett.png'),
-  navermap: require('./images/naver-map.png'),
-  dgis: require('./images/dgis.png'),
-  liftago: require('./images/liftago.png'),
-  petalmaps: require('./images/petalmaps.png'),
-};
-
-export const appKeys = Object.keys(icons);