Manual setup

Use this guide when you want to add SignalFox manually instead of using the AI setup prompt.

Install the SDK

npm install @asgami-digital/signalfox-react-native

For iOS apps, run CocoaPods after installing the package or any optional native integration.

cd ios && pod install

Add the startup patches

Add the Modal and Touchable patches before your app renders. A common place is your app entry file.

import { AppRegistry } from 'react-native';
import {
  applyModalPatch,
  applyTouchablePatch,
} from '@asgami-digital/signalfox-react-native';
import App from './src/App';
import { name as appName } from './app.json';

applyModalPatch();
applyTouchablePatch();

AppRegistry.registerComponent(appName, () => App);

Initialize SignalFox

Call SignalFox.init() once your app can supply the API key and the integrations array (for example from your root component in a useEffect, after navigationRef is ready).

Use the debug key in development and the production key in release builds.

import { SignalFox, reactNavigationIntegration } from '@asgami-digital/signalfox-react-native';

const signalFoxApiKey = __DEV__
  ? 'YOUR_DEBUG_API_KEY'
  : 'YOUR_PRODUCTION_API_KEY';

void SignalFox.init({
  apiKey: signalFoxApiKey,
  integrations: [reactNavigationIntegration({ navigationRef })],
});

Add signalFoxNodeId

Add signalFoxNodeId to every Modal, Pressable, and Touchable-family component that matters analytically. You can skip components that have no meaningful product value, such as purely decorative or layout-only controls.

Each ID should be unique for the component and context. If the same modal can open from different places, give each context a different ID.

<Pressable signalFoxNodeId="checkout-pay-button" onPress={handlePay}>
  <Text>Pay now</Text>
</Pressable>

<Modal signalFoxNodeId="checkout-paywall-modal" visible={isOpen}>
  <Paywall />
</Modal>

Use compact names that describe what the element does and where it belongs, such as checkout-pay-button or settings-delete-account-modal.

You can also add signalFoxNodeDisplayName when you want a more readable label in the dashboard.

Verify the installation

Run the app with the debug API key. Navigate between screens, open a modal, and press an instrumented control.

Then open the Development section in the SignalFox dashboard and confirm the events are arriving. If they are not, check that SignalFox.init runs with the correct key, that the startup patches run before the app renders, and that your navigation integration receives a valid root navigation ref.