@golfguiders/react-native

Embed an interactive, GPS-enabled golf course explorer into your React Native app. Drop in <GolfGuidersCourseWidget> to get a satellite-view map with hole navigation, shot planner, live weather, and more — works on both iOS and Android.

Features

• 🗺️ Interactive satellite-view golf course maps
• 📍 Real-time GPS positioning on the course
• ⛳ Hole-by-hole navigation with auto-rotation
• 🎯 Shot planner with smart club recommendations
• 🌦️ Live weather with wind direction compass
• 📊 Scorecard, tee details, course rating & slope
• 🏔️ Elevation profile & adjusted distances
• 🎨 Fully configurable — show/hide features as needed

Installation

npm install @golfguiders/react-native react-native-webview
# or
yarn add @golfguiders/react-native react-native-webview

iOS:

cd ios && pod install

Quick start

import { GolfGuidersCourseWidget } from '@golfguiders/react-native';

export default function CourseScreen() {
  return (
    <GolfGuidersCourseWidget
      apiKey="YOUR_API_KEY"
      courseId="chambers-bay-123"
      setDefaultGreenTarget="center"
      style={{ flex: 1 }}
    />
  );
}

Get an API key

Request your API key by emailing at email [email protected] or explore the website golfguiders.com to see what we do.

Props

Required

| Prop | Type | Description | |---|---|---| | apiKey | string | Your GolfGuiders API key |

Optional

| Prop | Type | Default | Description | |---|---|---|---| | baseUrl | string | https://widget.golfguiders.com | CDN URL hosting golfguiders.js | | courseId | string | — | Auto-load a specific course on mount (skips search) | | showSearch | boolean | true | Show the course search bar | | setDefaultGreenTarget | 'front' \| 'center' \| 'back' | 'center' | Default green target | | setFlyover | boolean | true | Animate camera when switching holes | | setShotPlanner | boolean | true | Enable the shot planner | | setElevation | boolean | false | Show elevation profile by default | | setGreenEdges | boolean | false | Show front/center/back distances | | setRatingSlope | boolean | false | Show course rating & slope | | setClubRecommendation | boolean | true | Show club hints on distance labels | | closeRedirectUrl | string | — | URL to redirect to when user closes the course | | hideElevation | boolean | false | Completely hide the elevation feature | | hideWeather | boolean | false | Completely hide the weather feature | | hideShotPlanner | boolean | false | Completely hide the shot planner | | hideGreenEdges | boolean | false | Completely hide front/back green | | hideRatingSlope | boolean | false | Completely hide rating & slope | | hideClubRecommendation | boolean | false | Completely hide club recommendations | | hideFlyover | boolean | false | Completely hide flyover toggle | | hideScorecard | boolean | true | Hide scorecard sidebar button | | gpsSim | boolean | false | Enable GPS simulation mode (testing) | | style | ViewStyle | — | Style for the WebView container |

Permissions

For GPS to work, you need location permissions.

iOS — Info.plist

<key>NSLocationWhenInUseUsageDescription</key>
<string>Used to show your position on the golf course map</string>

Android — AndroidManifest.xml

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

How it works

The widget runs inside a WebView. The wrapper:

1. Renders a WebView with a tiny HTML host page
2. Loads golfguiders.js from the GolfGuiders CDN (or your custom baseUrl)
3. Injects your config (apiKey, courseId, feature toggles) via injectedJavaScriptBeforeContentLoaded so the widget auto-initializes
4. Renders an interactive map with GPS, hole navigation, weather, and shot planning

Troubleshooting

Widget shows "Loading…" forever

• Verify apiKey is correct and active
• Confirm the device has internet access
• Check that your domain is allowed for this API key (contact support if needed)

GPS doesn't work

• Ensure Info.plist (iOS) or AndroidManifest.xml (Android) has location permissions
• Test on a real device — simulators may not provide real GPS

Blank screen

• Ensure react-native-webview is properly installed and linked (run pod install for iOS)

License

MIT — see LICENSE.

Support

• Email: [email protected]
• Bug reports: [email protected]

Maintainer

Saeed Afzal — CTO, GolfGuiders, Inc.

• 📧 [email protected]
• 🌐 saeedafzal.com
• 💬 linkedin.com/in/imsaeedafzal