### JavaScript Examples for showLocation Function

Source: https://github.com/tschoffelen/react-native-map-link/blob/master/README.md

Practical JavaScript code examples demonstrating various ways to invoke the `showLocation` function, including basic usage with coordinates, a comprehensive example showcasing all available options, and an alternative method using an address string.

```JavaScript
import {showLocation} from 'react-native-map-link';

showLocation({
  latitude: 38.8976763,
  longitude: -77.0387185,
  title: 'Your destination',
});
```

```JavaScript
import {showLocation} from 'react-native-map-link';

showLocation({
  latitude: 38.8976763,
  longitude: -77.0387185,
  sourceLatitude: -8.0870631, // optionally specify starting location for directions
  sourceLongitude: -34.8941619, // required if sourceLatitude is specified
  title: 'The White House', // optional 
  googleForceLatLon: false, // optionally force GoogleMaps to use the latlon for the query instead of the title
  googlePlaceId: 'ChIJGVtI4by3t4kRr51d_Qm_x58', // optionally specify the google-place-id
  alwaysIncludeGoogle: true, // optional, true will always add Google Maps to iOS and open in Safari, even if app is not installed (default: false)
  dialogTitle: 'This is the dialog Title', // optional (default: 'Open in Maps')
  dialogMessage: 'This is the amazing dialog Message', // optional (default: 'What app would you like to use?')
  cancelText: 'This is the cancel button text', // optional (default: 'Cancel')
  appsWhiteList: ['google-maps'], // optionally you can set which apps to show (default: will show all supported apps installed on device)
  appsBlackList: ['uber'], // optionally you can set which apps NOT to show (default: will show all supported apps installed on device)
  naverCallerName: 'com.example.myapp', // to link into Naver Map You should provide your appname which is the bundle ID in iOS and applicationId in android.
  appTitles: {'google-maps': 'My custom Google Maps title'}, // optionally you can override default app titles
  app: 'uber', // optionally specify specific app to use
  directionsMode: 'walk', // optional, accepted values are 'car', 'walk', 'public-transport' or 'bike'
});
```

```JavaScript
import {showLocation} from 'react-native-map-link';

showLocation({
  address: '1600 Pennsylvania Avenue NW, Washington, DC 20500', // Required if replacing latitude and longitude
  app: 'comgooglemaps',  // optionally specify specific app to use
});
```

--------------------------------

### Install React Native Map Link Package

Source: https://github.com/tschoffelen/react-native-map-link/blob/master/README.md

This command installs the `react-native-map-link` package using npm or yarn, adding it as a dependency to your React Native project. This is the first step to integrate the library.

```Shell
npm i -S react-native-map-link      # or yarn add react-native-map-link
```

--------------------------------

### React Native Component to Fetch and Display Available Map Apps

Source: https://github.com/tschoffelen/react-native-map-link/blob/master/README.md

This React Native component uses `react-native-map-link`'s `getApps` function to retrieve installed map applications. It demonstrates fetching apps with location details and various filtering options, then renders them as clickable icons.

```tsx
import {getApps, GetAppResult} from 'react-native-map-link';

const Demo = () => {
  const [availableApps, setAvailableApps] = useState<GetAppResult[]>([]);

  useEffect(() => {
    (async () => {
      const result = await getApps({
        latitude: 38.8976763,
        longitude: -77.0387185,
        address: '1600 Pennsylvania Avenue NW, Washington, DC 20500', // optional 
        title: 'The White House', // optional
        googleForceLatLon: false, // optionally force GoogleMaps to use the latlon for the query instead of the title
        alwaysIncludeGoogle: true, // optional, true will always add Google Maps to iOS and open in Safari, even if app is not installed (default: false)
        appsWhiteList: ['google-maps'], // optionally you can set which apps to show (default: will show all supported apps installed on device)
        appsBlackList: ['uber'], // optionally you can set which apps NOT to show (default: will show all supported apps installed on device)
      });
      setAvailableApps(result);
    })();
  }, []);

  return (
    <React.Fragment>
      {availableApps.map(({icon, name, id, open}) => (
        <Pressable key={id} onPress={open}>
          <Image source={icon} />
          <Text>{name}</Text>
        </Pressable>
      ))}
    </React.Fragment>
  );
};
```

--------------------------------

### Verify AndroidManifest.xml Queries for Map Link Schemes

Source: https://github.com/tschoffelen/react-native-map-link/blob/master/docs/expo.md

This XML snippet demonstrates the necessary `<queries>` block to be added to your `AndroidManifest.xml` file for Android. It allows your application to query for apps that can handle `geo` and `waze` URI schemes, which is essential for opening map links via installed navigation applications.

```xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.app">
  <queries>
    <intent>
      <action android:name="android.intent.action.VIEW" />
      <data android:scheme="geo" />
    </intent>
    <intent>
      <action android:name="android.intent.action.VIEW" />
      <data android:scheme="waze" />
    </intent>
  </queries>
  <!-- Rest of Manifest -->
</manifest>
```

--------------------------------

### Integrate Custom Header and Footer in Popup

Source: https://github.com/tschoffelen/react-native-map-link/blob/master/docs/popup.md

This example demonstrates how to provide custom header and footer components to the `Popup` using the `customHeader` and `customFooter` props. It shows how to define rendering functions for these components and pass their results to the `Popup` component, enabling full control over the popup's top and bottom sections.

```js
renderHeader() {
  return <MyCustomHeaderComponent/>
}

renderFooter() {
  return <MyCustomFooterComponent/>
}

render() {
  return (
    <Popup
      ...
      customHeader={this.renderHeader()}
      customFooter={this.renderFooter()}
    />
  );
}
```

--------------------------------

### Configure iOS Info.plist for LSApplicationQueriesSchemes

Source: https://github.com/tschoffelen/react-native-map-link/blob/master/README.md

To enable the react-native-map-link library to detect installed navigation applications on iOS, you must update your app's `Info.plist` file. Add the `LSApplicationQueriesSchemes` key with an array of URL schemes corresponding to the map and navigation apps your application needs to query. This configuration is crucial for the library to correctly identify and interact with available mapping services.

```XML
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>comgooglemaps</string>
    <string>citymapper</string>
    <string>uber</string>
    <string>lyft</string>
    <string>transit</string>
    <string>truckmap</string>
    <string>waze</string>
    <string>yandexnavi</string>
    <string>moovit</string>
    <string>yandextaxi</string>
    <string>yandexmaps</string>
    <string>kakaomap</string>
    <string>tmap</string>
    <string>szn-mapy</string>
    <string>mapsme</string>
    <string>osmandmaps</string>
    <string>gett</string>
    <string>nmap</string>
    <string>dgis</string>
    <string>lftgpas</string>
    <string>sygic</string>
</array>
```

--------------------------------

### showLocation Function API Reference

Source: https://github.com/tschoffelen/react-native-map-link/blob/master/README.md

Detailed API documentation for the `showLocation` function, outlining all supported parameters, their types, and descriptions for configuring map linking behavior in React Native applications.

```APIDOC
showLocation(options: object):
  latitude: number (optional) - The destination latitude.
  longitude: number (optional) - The destination longitude.
  sourceLatitude: number (optional) - The starting location latitude for directions. Required if sourceLongitude is specified.
  sourceLongitude: number (optional) - The starting location longitude for directions. Required if sourceLatitude is specified.
  title: string (optional) - The title or name of the destination.
  googleForceLatLon: boolean (optional, default: false) - Forces Google Maps to use latitude/longitude for query instead of title.
  googlePlaceId: string (optional) - Google Place ID for the destination.
  alwaysIncludeGoogle: boolean (optional, default: false) - Always adds Google Maps to iOS and opens in Safari, even if the app is not installed.
  dialogTitle: string (optional, default: 'Open in Maps') - Title for the app selection dialog.
  dialogMessage: string (optional, default: 'What app would you like to use?') - Message for the app selection dialog.
  cancelText: string (optional, default: 'Cancel') - Text for the cancel button in the dialog.
  appsWhiteList: string[] (optional) - An array of app identifiers to explicitly show (e.g., ['google-maps']).
  appsBlackList: string[] (optional) - An array of app identifiers to explicitly hide (e.g., ['uber']).
  naverCallerName: string (optional) - The bundle ID (iOS) or application ID (Android) for Naver Map linking.
  appTitles: object (optional) - An object to override default titles for specific apps (e.g., {'google-maps': 'My custom Google Maps title'}).
  app: string (optional) - Specifies a single app to use (e.g., 'uber', 'comgooglemaps').
  directionsMode: 'car' | 'walk' | 'public-transport' | 'bike' (optional) - The mode of transport for directions.
  address: string (optional) - A full address string to query instead of latitude and longitude. Required if latitude and longitude are not provided.
```

--------------------------------

### Android Manifest and Gradle Configuration

Source: https://github.com/tschoffelen/react-native-map-link/blob/master/README.md

Configuration steps required for Android, including adding the `<queries>` tag to `AndroidManifest.xml` for proper app discovery and updating the Gradle classpath to resolve common build errors related to the `<queries>` element.

```XML
<action android:name="android.intent.action.VIEW" />
    <data android:scheme="com.sygic.aura" />
  </intent>
</queries>
```

```Java
classpath("com.android.tools.build:gradle:3.5.4")
```

--------------------------------

### Render React Native Map Link Popup Component

Source: https://github.com/tschoffelen/react-native-map-link/blob/master/docs/popup.md

This snippet demonstrates how to import and use the `Popup` component from `react-native-map-link`. It shows essential props like `isVisible` for controlling visibility, `onCancelPressed`, `onAppPressed`, and `onBackButtonPressed` for handling user interactions. It also highlights the use of `modalProps` to pass native modal properties and `options` for map link configuration.

```js
import { Popup } from 'react-native-map-link';

<Popup
    isVisible={this.state.isVisible}
    onCancelPressed={() => this.setState({ isVisible: false })}
    onAppPressed={() => this.setState({ isVisible: false })}
    onBackButtonPressed={() => this.setState({ isVisible: false })}
    modalProps={{ // you can put all modal props inside.
        animationType: 'slide' 
    }}
    options={{ /* See `showLocation` method above, this accepts the same options. */ }}
    style={{ /* Optional: you can override default style by passing your values. */ }}
/>
```

--------------------------------

### Configure react-native-map-link Plugin for Expo Managed Workflow

Source: https://github.com/tschoffelen/react-native-map-link/blob/master/docs/expo.md

This snippet shows how to add the `react-native-map-link` plugin to your Expo app's configuration file (`app.json`, `app.config.js`, or `app.config.ts`) for the managed workflow. This ensures the plugin runs during the prebuild process, automating necessary native configurations.

```json
{
  "plugins": ["react-native-map-link"]
}
```

--------------------------------

### Update AndroidManifest.xml for Package Visibility Queries

Source: https://github.com/tschoffelen/react-native-map-link/blob/master/README.md

For applications targeting Android 11 (API level 30) or higher, the `AndroidManifest.xml` must be updated to comply with new Package Visibility security features. Insert a `<queries>` block within the top-level `<manifest>` tag to explicitly declare the intent filters and schemes that your app needs to query. This modification allows the react-native-map-link library to properly interact with other map and navigation applications on the device.

```XML
<queries>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="http"/>
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="https"/>
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="geo" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="google.navigation" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="applemaps" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="citymapper" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="uber" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="lyft" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="transit" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="truckmap" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="waze" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="yandexnavi" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="moovit" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="yandexmaps://maps.yandex." />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="yandextaxi" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="kakaomap" />
  </intent>
    <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="tmap" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="mapycz" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="mapsme" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="osmand.geo" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="gett" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="nmap" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="dgis" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="lftgpas" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="petalmaps" />
  </intent>
  <intent>
```

--------------------------------

### Customize React Native Map Link Popup Styles

Source: https://github.com/tschoffelen/react-native-map-link/blob/master/docs/popup.md

This code block illustrates the structure of the `style` prop used to customize the appearance of the `Popup` component. It provides an object literal with various keys, each corresponding to a specific part of the popup's UI, allowing developers to override default styling for containers, images, text, and buttons.

```js
{
    container: {},
    itemContainer: {},
    image: {},
    itemText: {},
    headerContainer: {},
    titleText: {},
    subtitleText: {},
    cancelButtonContainer: {},
    cancelButtonText: {},
    separatorStyle: {},
    activityIndicatorContainer: {}
}
```

--------------------------------

### TypeScript Type Definition for GetAppResult in React Native Map Link

Source: https://github.com/tschoffelen/react-native-map-link/blob/master/README.md

Defines the `GetAppResult` type, which specifies the structure for data returned by `getApps`. It includes properties like `id`, `name`, `icon`, and an `open` function for available map applications.

```ts
type GetAppResult = {
  id: string;
  name: string;
  icon: NodeRequire;
  open: () => Promise<void>;
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.