fix: fix PopupProps and improve types (close #282, #285)

docs/popup.md

@@ -17,9 +17,6 @@ import { Popup } from 'react-native-map-link';
     modalProps={{ // you can put all modal props inside.
         animationIn: 'slideInUp'
     }}
-    appsWhiteList={[ /* Array of apps (apple-maps, google-maps, etc...) that you want
-    to show in the popup, if is undefined or an empty array it will show all supported apps installed on device.*/ ]}
-    appTitles: {{ /* Optional: you can override app titles. */ }}
     options={{ /* See `showLocation` method above, this accepts the same options. */ }}
     style={{ /* Optional: you can override default style by passing your values. */ }}
 />

src/components/popup/Popup.tsx

@@ -1,27 +1,21 @@
 import React, {useEffect, useState} from 'react';
-import {
-  StyleSheet,
-  View,
-  Modal,
-  Dimensions,
-  ModalProps,
-  ViewStyle,
-  TextStyle,
-  ImageStyle,
-} from 'react-native';
+import {StyleSheet, View, Modal, Dimensions} from 'react-native';
+import type {ImageStyle, ModalProps, ViewStyle, TextStyle} from 'react-native';
 import {getAvailableApps, checkNotSupportedApps} from '../../utils';
 import {generatePrefixes, generateTitles} from '../../constants';
+import type {MapId, ShowLocationProps} from '../../type';
 import PopupFooter from './PopupFooter';
 import PopupHeader from './PopupHeader';
 import PopupBody from './PopupBody';
 import {showLocation} from '../..';
 
-interface PopupProps {
+export interface PopupProps {
   isVisible: boolean;
+  setIsVisible: (isVisible: boolean) => void;
   showHeader?: boolean;
-  customHeader?: JSX.Element;
-  customFooter?: JSX.Element;
-  onAppPressed: (app: string) => void;
+  customHeader?: React.ReactNode;
+  customFooter?: React.ReactNode;
+  onAppPressed: (app: MapId) => void;
   onCancelPressed: () => void;
   style?: {
     container?: ViewStyle;
@@ -37,19 +31,7 @@ interface PopupProps {
     activityIndicatorContainer?: ViewStyle;
   };
   modalProps?: ModalProps;
-  options: {
-    dialogTitle?: string;
-    dialogMessage?: string;
-    cancelText?: string;
-    appTitles?: Record<string, string>;
-    alwaysIncludeGoogle?: boolean;
-    naverCallerName?: string;
-    latitude: number;
-    longitude: number;
-    title?: string;
-  };
-  appsWhiteList?: string[];
-  setIsVisible: (isVisible: boolean) => void;
+  options: ShowLocationProps;
 }
 
 const SCREEN_HEIGHT = Dimensions.get('screen').height;
@@ -64,10 +46,9 @@ export const Popup: React.FC<PopupProps> = ({
   style = {},
   modalProps,
   options,
-  appsWhiteList,
   setIsVisible,
 }) => {
-  const [apps, setApps] = useState<string[]>([]);
+  const [apps, setApps] = useState<MapId[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [titles, setTitles] = useState<{[key: string]: string}>({});
 
@@ -79,10 +60,10 @@ export const Popup: React.FC<PopupProps> = ({
           naverCallerName: options.naverCallerName,
         }),
       );
-      if (appsWhiteList && appsWhiteList.length) {
-        checkNotSupportedApps(appsWhiteList);
+      if (options.appsWhiteList && options.appsWhiteList.length) {
+        checkNotSupportedApps(options.appsWhiteList);
         appsData = appsData.filter((appName) =>
-          appsWhiteList.includes(appName),
+          options.appsWhiteList?.includes(appName),
         );
       }
       setApps(appsData);
@@ -91,13 +72,13 @@ export const Popup: React.FC<PopupProps> = ({
     loadApps();
     setTitles(generateTitles(options.appTitles));
   }, [
-    appsWhiteList,
     options.alwaysIncludeGoogle,
     options.appTitles,
+    options.appsWhiteList,
     options.naverCallerName,
   ]);
 
-  const _onAppPressed = (app: string) => {
+  const _onAppPressed = (app: MapId) => {
     showLocation({
       ...options,
       app,

src/components/popup/PopupBody.tsx

@@ -1,11 +1,7 @@
 import React from 'react';
-import {
-  ActivityIndicator,
-  StyleSheet,
-  ViewStyle,
-  TextStyle,
-  ImageStyle,
-} from 'react-native';
+import {ActivityIndicator, StyleSheet} from 'react-native';
+import type {ImageStyle, TextStyle, ViewStyle} from 'react-native';
+import type {MapId} from '../../type';
 import PopupItem from './PopupItem';
 import PopupSeparator from './PopupSeparator';
 import PopupFlatList from './PopupFlatList';
@@ -31,8 +27,8 @@ const PopupBody = ({
     image?: ImageStyle;
     itemText?: TextStyle;
   };
-  apps: string[];
-  onAppPressed: (app: string) => void;
+  apps: MapId[];
+  onAppPressed: (app: MapId) => void;
   titles: Record<string, string>;
 }) => {
   if (isLoading) {

src/components/popup/PopupFlatList.tsx

@@ -1,16 +1,18 @@
 import React from 'react';
 import {FlatList} from 'react-native';
+import type {ListRenderItem} from 'react-native';
+import type {MapId} from '../../type';
 
 const PopupFlatList = ({
   separator,
   data,
   renderItem,
   keyExtractor,
 }: {
-  separator: JSX.Element;
-  data: string[];
-  renderItem: ({item}: {item: string}) => JSX.Element;
-  keyExtractor: (item: string) => string;
+  separator: React.ReactNode;
+  data: MapId[];
+  renderItem: ListRenderItem<MapId>;
+  keyExtractor: (item: MapId) => string;
 }) => {
   return (
     <FlatList

src/components/popup/PopupFooter.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import {Text, TouchableOpacity, ViewStyle, TextStyle} from 'react-native';
+import {Text, TouchableOpacity} from 'react-native';
+import type {TextStyle, ViewStyle} from 'react-native';
 
 const PopupFooter = ({
   customFooter,
@@ -10,14 +11,14 @@ const PopupFooter = ({
   },
   options,
 }: {
-  customFooter?: JSX.Element;
+  customFooter?: React.ReactNode;
   onCancelPressed: () => void;
   style: {
     cancelButtonContainer?: ViewStyle;
     cancelButtonText?: TextStyle;
   };
   options: {
-    cancelText?: string;
+    cancelText?: string | null;
   };
 }) => {
   if (customFooter) {

src/components/popup/PopupHeader.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import {StyleSheet, Text, View, ViewStyle, TextStyle} from 'react-native';
+import {StyleSheet, Text, View} from 'react-native';
+import type {TextStyle, ViewStyle} from 'react-native';
 import {colorsPopup} from '../../constants';
 
 const PopupHeader = ({
@@ -13,15 +14,15 @@ const PopupHeader = ({
   options,
 }: {
   showHeader: boolean;
-  customHeader?: JSX.Element;
+  customHeader?: React.ReactNode;
   style: {
     headerContainer?: ViewStyle;
     titleText?: TextStyle;
     subtitleText?: TextStyle;
   };
   options: {
-    dialogTitle?: string;
-    dialogMessage?: string;
+    dialogTitle?: string | null;
+    dialogMessage?: string | null;
   };
 }) => {
   if (!showHeader) {

src/components/popup/PopupItem.tsx

@@ -1,15 +1,8 @@
 import React from 'react';
-import {
-  Image,
-  Text,
-  TouchableOpacity,
-  View,
-  StyleSheet,
-  ViewStyle,
-  TextStyle,
-  ImageStyle,
-} from 'react-native';
+import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import type {ImageStyle, TextStyle, ViewStyle} from 'react-native';
 import {colorsPopup, icons} from '../../constants';
+import type {MapId} from '../../type';
 
 const PopupItem = ({
   item,
@@ -21,14 +14,14 @@ const PopupItem = ({
   onAppPressed,
   titles,
 }: {
-  item: string;
+  item: MapId;
   style: {
     itemContainer?: ViewStyle;
     image?: ImageStyle;
     itemText?: TextStyle;
   };
-  onAppPressed: (app: string) => void;
-  titles: Record<string, string>;
+  onAppPressed: (app: MapId) => void;
+  titles: Record<MapId, string>;
 }) => {
   return (
     <TouchableOpacity

src/components/popup/PopupSeparator.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import {View, StyleSheet, ViewStyle} from 'react-native';
+import {View, StyleSheet} from 'react-native';
+import type {ViewStyle} from 'react-native';
 import {colorsPopup} from '../../constants';
 
 const PopupSeparator = ({

src/constants.ts

@@ -1,4 +1,5 @@
 import {Platform} from 'react-native';
+import type {MapId} from './type';
 
 export const isIOS: boolean = Platform.OS === 'ios';
 
@@ -8,7 +9,7 @@ export const generatePrefixes = ({
 }: {
   alwaysIncludeGoogle?: boolean;
   naverCallerName?: string;
-}): Record<string, string> => {
+}): Record<MapId, string> => {
   return {
     'apple-maps': isIOS ? 'maps://' : 'applemaps://',
     'google-maps': prefixForGoogleMaps(alwaysIncludeGoogle),

src/index.ts

@@ -15,14 +15,12 @@ export type {
   GetAppsProps,
   GetAppsResponse,
   MapId,
-  MapLinkOptions,
-  PopupProps,
-  PopupStyleProp,
   SharedOptions,
   ShowLocationProps,
 } from './type';
 
 export {Popup} from './components/popup/Popup';
+export type {PopupProps} from './components/popup/Popup';
 
 export const showLocation = async ({
   latitude,
@@ -151,7 +149,7 @@ export async function getApps({
   }
 
   const titles = generateTitles({...appTitles});
-  async function open(app: string) {
+  async function open(app: MapId) {
     return showLocation({
       ...rest,
       app,
@@ -165,7 +163,7 @@ export async function getApps({
   const list: GetAppsResponse[] = [];
   for (const app of apps) {
     list.push({
-      id: app as MapId,
+      id: app,
       name: titles[app],
       icon: icons[app],
       open: () => open(app),