@safercity/sdk-react-native

React Native adapter for SaferCity SDK with expo-fetch streaming support.

Installation

npm install @safercity/sdk-react-native @safercity/sdk-react @tanstack/react-query
# or
bun add @safercity/sdk-react-native @safercity/sdk-react @tanstack/react-query

Requirements

• React Native >= 0.72.0
• React >= 18.0.0
• Expo SDK 52+ (recommended for streaming support)

Quick Start

import { createReactNativeClient, isStreamingSupported } from '@safercity/sdk-react-native';
import { SaferCityProvider } from '@safercity/sdk-react';

// Create client with React Native optimizations
const client = createReactNativeClient({
  baseUrl: 'https://api.safercity.com',
  token: userToken,
  tenantId: 'tenant-123',
});

function App() {
  return (
    <SaferCityProvider {...client.getConfig()}>
      <Navigation />
    </SaferCityProvider>
  );
}

Streaming Support

This package automatically uses expo-fetch for streaming when available (Expo SDK 52+).

import { isStreamingSupported } from '@safercity/sdk-react-native';

// Check if streaming is supported
if (isStreamingSupported()) {
  console.log('SSE streaming is available');
} else {
  console.log('Streaming not available, consider polling');
}

Using Streaming

import { usePanicStream } from '@safercity/sdk-react';

function PanicTracker({ panicId }: { panicId: string }) {
  const { data, isConnected, error } = usePanicStream(panicId, {
    onEvent: (event) => {
      console.log('Panic update:', event.data);
    },
  });
  
  if (!isStreamingSupported()) {
    // Fallback to polling
    return <PollingPanicTracker panicId={panicId} />;
  }
  
  return (
    <View>
      <Text>Connected: {isConnected ? 'Yes' : 'No'}</Text>
      <Text>Latest: {data?.data}</Text>
    </View>
  );
}

Without Expo

For bare React Native projects without Expo, streaming will fall back to standard fetch. SSE may have limited support depending on your React Native version.

import { createReactNativeClient } from '@safercity/sdk-react-native';

// You can provide a custom fetch implementation
const client = createReactNativeClient({
  baseUrl: 'https://api.safercity.com',
  token: userToken,
  customFetch: myCustomFetch,
});

Using with React Hooks

All hooks from @safercity/sdk-react work seamlessly:

import { useUsers, usePanics, useCreatePanic } from '@safercity/sdk-react';

function UserList() {
  const { data, isLoading, error } = useUsers();
  
  if (isLoading) return <ActivityIndicator />;
  if (error) return <Text>Error: {error.message}</Text>;
  
  return (
    <FlatList
      data={data?.data.users}
      renderItem={({ item }) => <UserItem user={item} />}
      keyExtractor={(item) => item.id}
    />
  );
}

API Reference

createReactNativeClient(options)

Creates a SaferCity client optimized for React Native.

interface ReactNativeClientOptions {
  baseUrl: string;
  token?: string;
  tenantId?: string;
  timeout?: number;
  headers?: Record<string, string>;
  customFetch?: typeof fetch;
}

isStreamingSupported()

Returns true if expo-fetch is available and streaming is supported.

getReactNativeFetch(customFetch?)

Returns the best available fetch implementation for the current environment.

Troubleshooting

Streaming not working

1. Ensure you're using Expo SDK 52 or later
2. Check that expo-fetch is properly installed
3. Use isStreamingSupported() to check availability
4. Fall back to polling if streaming is not supported

Type errors

Make sure you have the correct peer dependencies:

npm install react@^18.0.0 react-native@^0.72.0 @tanstack/react-query@^5.0.0

License

MIT