visioreactnative

Bridge for VisioMoveEssential (using 2.4.3)

visioreactnative library - React Native Module & View

⚠️ Disclaimer: This library is currently in Alpha. It is still under active development, and not all native APIs are exposed yet. Expect potential issues, incomplete functionality, and breaking changes in future updates. Please proceed with caution when using this in production, and report any issues you encounter.

The RNVisioglobeLibraryModule offers a set of functionalities to manage map views, camera controls, routing, points of interest (POIs), and more in your React Native applications. Below is a detailed overview of the available functions.

Installation

npm install visioreactnative

Navigate to the iOS folder:

cd ios

Install the necessary CocoaPods dependencies:

pod install

In your Android folder navigate to your Project's build.gradle and update minSskVersion to 24 :

minSdkVersion = 24

Library Setup Instructions

⚠️ Disclaimer: Not Ready for Production

This library is still under active development and is not yet recommended for use in production environments.

While we are actively testing and improving visioreactnative, there may be:

• Breaking changes in APIs or functionality.
• Bugs or untested edge cases.
• Limited documentation or examples.

If you choose to use this library, please do so with caution and provide feedback to help us improve.

Thank you for your understanding and support as we work to make this library production-ready! 🚀

This library requires integrating a local .aar dependency (VisioMoveEssential.aar) into the host app's Android project. Follow these steps to ensure the library functions correctly, especially for release builds.

Add the .aar File

• Place the VisioMoveEssential.aar file in the android/app/libs/ directory of your React Native project.
• If the libs/ directory does not exist, create it.

Configure the Host App

Update the android/app/build.gradle file in your project to include the .aar file and other required dependencies.

1. Add the Repositories Block Ensure the flatDir repository points to the libs/ folder where the .aar is located:

   repositories {
       flatDir {
           dirs 'libs'
       }
   }

2. Add Dependencies In the dependencies block of the android/app/build.gradle file, include the following:

   dependencies {
       // The version of react-native is set by the React Native Gradle Plugin
       implementation("com.facebook.react:react-android")
          
       api fileTree(include: ['*.jar'], dir: 'libs')
       implementation files("./libs/VisioMoveEssential.aar")
   
       implementation 'org.jetbrains.kotlin:kotlin-reflect:1.8.10'
       implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
       implementation 'androidx.core:core-ktx:1.10.1'
       implementation 'androidx.appcompat:appcompat:1.6.1'
       implementation 'org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.3'
   
       if (hermesEnabled.toBoolean()) {
           implementation("com.facebook.react:hermes-android")
       } else {
           implementation jscFlavor
       }
   }

Testing the Setup

1. Debug Build Build and run your app in debug mode to verify the library is working correctly:

   npx react-native run-android

2. Release Build Test the release build to ensure the .aar integration works:

   cd android
   ./gradlew assembleRelease

Usage

RNVisioglobeLibraryView

The RNVisioglobeLibraryView is a React Native component that bridges the VisioGlobe native view into your JavaScript code. This allows you to display and interact with the map from the VisioGlobe SDK.

⚠️ Disclaimer: The RNVisioglobeLibraryView is part of an Alpha version of the bridge. Not all native functionalities may be available, and there may be issues when integrating this view in production environments. Use with caution and report any bugs you encounter.

Props

| Prop | Type | Description | | -------------- | ---------- | --------------------------------------------------------------------------- | | mapHash | string? | Optional hash string for the map, mandatory if no path | | mapPath | string? | Optional path for the map data, mandatory if no Hash | | mapSecretCode| number | Required secret code to access certain map functionalities. | | loaded | boolean | Indicates whether the map has finished loading. | | style | ViewStyle| Custom styling for the view. This is mandatory for rendering the component. |

Example Usage

To use the RNVisioglobeLibraryView, simply import and render it with the required props.

import { RNVisioglobeLibraryView } from 'visioreactnative';

const MyMapComponent = () => {
  return (
    <RNVisioglobeLibraryView
      mapHash = {"yourmaphash"}
      mapSecretCode={123456}
      loaded={true}
      style={{ width: '100%', height: '100%' }}
    />
  );
};

RNVisioglobeLibraryModule

1. getDataSdkVersion

Fetches the SDK Data version from the native module.

• Parameters:
  • callback: (version: string) => void – Receives the SDK Data version as a string.
• Example:

  RNVisioglobeLibraryModule.getDataSdkVersion((version) => {
    console.log('SDK Version:', version);
  });

2. getCameraContext

Gets the current camera context from the map view.

• Parameters:
  • callback: (context: VMCameraContext) => void – Receives the camera context.
• Example:

  RNVisioglobeLibraryModule.getCameraContext((context) => {
    console.log('Camera Context:', context);
  });

3. updateCamera

Updates the camera position without any animation.

• Parameters:
  • cameraUpdate: VMCameraUpdate – Specifies the next camera position.
• Example:

  RNVisioglobeLibraryModule.updateCamera(cameraUpdate);

4. animateCamera

Animates the camera to a new position.

• Parameters:
  • cameraUpdate: VMCameraUpdate – Specifies the new camera position to animate to.
• Example:

  RNVisioglobeLibraryModule.animateCamera(cameraUpdate);

5. computeRoute

Computes a route on the map based on the specified request.

• Parameters:
  • routeRequest: VMRouteRequest – Describes the route to compute.
  • successCallback: (routeResult: VMRouteResult) => void – Called with the generated route.
  • errorCallback: (error: string) => void – Called if there’s an error during route computation.
• Example:

  RNVisioglobeLibraryModule.computeRoute(routeRequest, (routeResult) => {
    console.log('Route computed:', routeResult);
  }, (error) => {
    console.log('Route computation failed:', error);
  });

6. setExcludedAttributes

Sets attributes to exclude from routing.

• Parameters:
  • attributes: string[] – List of attribute keys to exclude from routing.
• Example:

  RNVisioglobeLibraryModule.setExcludedAttributes(['stairs', 'elevator']);

7. setExcludedModalities

Excludes specific modalities from routing.

• Parameters:
  • modalities: string[] – List of modality keys to exclude.
• Example:

  RNVisioglobeLibraryModule.setExcludedModalities(['walking', 'wheelchair']);

8. getModalities

Retrieves available routing modalities.

• Parameters:
  • callback: (modalities: string[]) => void – Receives the list of modalities.
• Example:

  RNVisioglobeLibraryModule.getModalities((modalities) => {
    console.log('Available modalities:', modalities);
  });

9. getAttributes

Retrieves available attributes for routing.

• Parameters:
  • callback: (attributes: string[]) => void – Receives the list of attributes.
• Example:

  RNVisioglobeLibraryModule.getAttributes((attributes) => {
    console.log('Available attributes:', attributes);
  });

10. setPois

Sets Points of Interest (POIs) on the map.

• Parameters:
  • data: string – The data specifying the POIs.
  • callback: (result: Map<string, string>) => void – Called with the result of setting POIs.
• Example:

  RNVisioglobeLibraryModule.setPois('POIData', (result) => {
    console.log('POIs set:', result);
  });

11. getLocationTrackingMode

Gets the current location tracking mode.

• Parameters:
  • callback: (trackingMode: VMLocationTrackingMode) => void – Receives the tracking mode.
• Example:

  RNVisioglobeLibraryModule.getLocationTrackingMode((mode) => {
    console.log('Tracking mode:', mode);
  });

12. setLocationTrackingMode

Sets the location tracking mode.

• Parameters:
  • trackingMode: VMLocationTrackingMode – The tracking mode to set.
• Example:

  RNVisioglobeLibraryModule.setLocationTrackingMode(newMode);

13. updateLocation

Updates the user's location on the map.

• Parameters:
  • update: VMLocation – New location data to set.
• Example:

  RNVisioglobeLibraryModule.updateLocation(newLocation);

14. getNavigationHeaderViewVisible

Gets the visibility status of the navigation header view.

• Parameters:
  • callback: (viewVisible: boolean) => void – Receives whether the view is visible.
• Example:

  RNVisioglobeLibraryModule.getNavigationHeaderViewVisible((isVisible) => {
    console.log('Header view visible:', isVisible);
  });

15. setNavigationHeaderViewVisible

Sets the visibility of the navigation header view.

• Parameters:
  • viewVisible: boolean – Whether to show or hide the navigation header view.
• Example:

  RNVisioglobeLibraryModule.setNavigationHeaderViewVisible(true);

16. getCompassHeadingMarkerVisible

Gets the visibility of the compass heading marker.

• Parameters:
  • callback: (markerVisible: boolean) => void – Receives the marker visibility status.
• Example:

  RNVisioglobeLibraryModule.getCompassHeadingMarkerVisible((isVisible) => {
    console.log('Compass heading marker visible:', isVisible);
  });

17. setCompassHeadingMarkerVisible

Sets the visibility of the compass heading marker.

• Parameters:
  • markerVisible: boolean – Whether to show or hide the compass heading marker.
• Example:

  RNVisioglobeLibraryModule.setCompassHeadingMarkerVisible(true);

18. showSearchViewWithTitle

Displays a search view with a custom title.

• Parameters:
  • title: string – Title to display in the search view.
  • searchViewDidSelectPoiIDCallback: (poiID: string) => void – Called when a POI is selected.
• Example:

  RNVisioglobeLibraryModule.showSearchViewWithTitle('Search Places', (poiID) => {
    console.log('Selected POI:', poiID);
  });

19. showPoiInfo

Shows information about a specific POI.

• Parameters:
  • poiID: string – The ID of the POI to show.
• Example:

  RNVisioglobeLibraryModule.showPoiInfo('POI-ID');

20. getPoi

Fetches detailed information about a POI.

• Parameters:
  • poiID: string – The POI identifier.
  • callbackPoi: (poi: VMPoi) => void – Called with the POI details.
• Example:

  RNVisioglobeLibraryModule.getPoi('POI-ID', (poi) => {
    console.log('POI Info:', poi);
  });

21. getPoiPosition

Retrieves the position of a POI on the map.

• Parameters:
  • poiID: string – The POI identifier.
  • callback: (position: VMPosition) => void – Receives the POI's position.
• Example:

  RNVisioglobeLibraryModule.getPoiPosition('POI-ID', (position) => {
    console.log('POI Position:', position);
  });

22. setCompass

Sets the visibility of the compass on the map.

• Parameters:
  • value: boolean – Whether to show or hide the compass.
• Example:

  RNVisioglobeLibraryModule.setCompass(true);

23. setCategories

Updates the categories to filter displayed points of interest.

• Parameters:
  • `data: string

` – The category data to set.

• Example:

  RNVisioglobeLibraryModule.setCategories(categoryData);

Troubleshooting

• Make sure the .aar filename matches the name specified in the implementation(name: 'VisioMoveEssential', ext: 'aar') line. Gradle will look for VisioMoveEssential.aar in the libs folder, so ensure there are no typos.

• Ensure the libs folder is in the correct location: It should be inside android/app/ in your React Native project.

• If you encounter errors like Unresolved reference: visioglobe during the build, ensure:

  1. The VisioMoveEssential.aar file is correctly placed in the libs/ folder.
  2. The flatDir repository is added to build.gradle.
  3. The dependencies block includes `implementation files("./libs/VisioMoveEssential.aar").

• For runtime errors indicating missing .aar functionality, check if the .aar is properly included in the release build.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

VIEW LICENSE FILE

Made with create-react-native-library