@walkk/react-native-sdk

Plug-and-play indoor maps, routing and turn‑by‑turn navigation for React Native apps, powered by Walkk.

About Walkk

Walkk is an indoor intelligence–first company. We help organizations turn complex indoor spaces into intuitive, data‑driven experiences with three core capabilities:

• Indoor navigation: fast, reliable wayfinding with live positioning, multi‑floor routing and turn‑by‑turn guidance.
• Indoor discovery: searchable maps, points of interest, accessibility options and contextual entry points from QR or deep links.
• Indoor intelligence: privacy‑aware analytics to understand traffic, dwell and utilization, powering better operations and design.

Our SDK is built for product teams: predictable APIs, React Native‑friendly primitives, and sensible defaults that work out‑of‑the‑box.

Installation

1. Install the SDK

yarn add @walkk/react-native-sdk
# or
npm i @walkk/react-native-sdk

2. Install required peer dependencies in your application

yarn add @react-native-async-storage/async-storage @tanstack/react-query react-native-uuid react-native-webview
# react and react-native must already be present in your app (React >=17, RN >=0.72)

3. iOS setup

cd ios && pod install && cd -

4. Android setup

• No manual steps are required on modern React Native; autolinking will handle native modules.

Quick start

Wrap your app with the provider to initialize the SDK once and share context across the app.

import React from 'react';
import WalkkSDKProvider from '@walkk/react-native-sdk';
import RootNavigator from './src/navigation/RootNavigator';

export default function App() {
  return (
    <WalkkSDKProvider
      credentials={{ id: 'demo', key: 'demo', secret: 'demo', mapId: 'demo' }}
      language="en"
      onError={(error) => {
        console.error('WalkkSDKProvider error:', error);
      }}
    >
      <RootNavigator />
    </WalkkSDKProvider>
  );
}

Show a map

Render the map anywhere in your app. You can either rely on the provider above or pass credentials directly to the map view.

import React from 'react';
import { SafeAreaView, View, StyleSheet } from 'react-native';
import { WalkkMapView } from '@walkk/react-native-sdk';

export default function MapScreen() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content}>
        <WalkkMapView
          credentials={{ id: 'demo', key: 'demo', secret: 'demo', mapId: 'demo' }}
          language="en"
          appearance={{ width: '100%', height: '100%' }}
          onReady={() => {}}
          onError={(e) => console.warn('Map error', e)}
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  content: { flex: 1 },
});

Credentials

Credentials identify your Walkk project and the map you want to display:

type WalkkCredentials = {
  id: string;       // partner/app id
  key: string;      // public key
  secret: string;   // secret or token
  mapId: string;    // map/building identifier
};

You can provide credentials to WalkkSDKProvider (recommended) or directly to WalkkMapView.

Peer dependencies

• @react-native-async-storage/async-storage (>=2.2.0)
• @tanstack/react-query (>=5.90.2)
• react-native-uuid (>=2.0.3)
• react-native-webview (>=11.0.0)
• react (>=17), react-native (*) should already exist in your app naturally

Troubleshooting

• After installation, if iOS build fails, run pod install in the ios/ directory.
• Ensure you're on React Native >= 0.72 for the versions listed above.

License

MIT