AI Setup

Loading personalized setup details.

Instrument my React Native app with SignalFox.

Project context:
- Package: @asgami-digital/signalfox-react-native
- Use my debug API key in __DEV__ and my production API key otherwise.

Goal:
- Update the app code to integrate SignalFox correctly.
- Reuse the existing app structure instead of creating wrappers or abstractions that are not needed.
- Return the final code changes clearly.

1. Base setup
- Install the SDK with npm or yarn.
- Run cd ios && pod install after installing the SDK or any optional native integration.
- Call applyModalPatch() and applyTouchablePatch() before the app renders.
- Call SignalFox.init({ apiKey, integrations }) once the app can supply the API key and integrations (typically useEffect in the root layout; for Expo Router follow the pattern in examples/expo-rniap with useNavigationContainerRef).

2. Navigation
- Add a navigation integration only if the app uses one of these supported navigation libraries.
- If the app uses React Navigation, use reactNavigationIntegration({ navigationRef }) with the root NavigationContainer ref.
- If the app uses Expo Router, import useNavigationContainerRef from expo-router and use expoRouterIntegration({ navigationRef }) with that ref.
- Do not add both navigation integrations.

3. Purchases
- Add a purchase integration only if the app uses one of these supported purchase libraries.
- If the app uses RevenueCat through react-native-purchases, use revenueCatIntegration({ purchases: Purchases }). If the app also uses react-native-purchases-ui, pass revenueCatUI as well.
- If the app uses react-native-iap, use reactNativeIapIntegration({ reactNativeIap: ReactNativeIap }).
- Nitro support was introduced in react-native-iap@14.4.0. If the app uses react-native-iap before 14.4.0, purchase_started will not be captured automatically by the integration.
- For react-native-iap before 14.4.0, call notifyPurchaseStarted() manually immediately before starting the purchase request:
  import { notifyPurchaseStarted } from '@asgami-digital/signalfox-react-native'
  notifyPurchaseStarted()
  await ReactNativeIap.requestPurchase(...)
- Do not manually send duplicate purchase events for purchase paths already covered by RevenueCat or react-native-iap integration.

4. signalFoxNodeId coverage
- Add stable signalFoxNodeId props to every Modal and every component in the Touchable or Pressable family, except elements that have no analytical importance.
- Each signalFoxNodeId must be unique per component and context. If the same modal can be opened from different places, use different signalFoxNodeId values for each context.
- Use clear but compact signalFoxNodeId values that describe what the component does and where it belongs.
- signalFoxNodeId values must stay stable and must not change between renders or builds.

5. Manual modal-like surfaces
- If the app has modal-like UI that does not use the native React Native Modal component, import trackModalShown from '@asgami-digital/signalfox-react-native' and call trackModalShown({ signalFoxNodeId, signalFoxNodeDisplayName?, visible, timestamp? }).
- Use this only for real modal-like surfaces such as sheets, overlays, drawers, or portal-based dialogs.

6. Funnels
- Track critical in-screen funnels with trackFunnelStep({ funnelName, signalFoxNodeId, signalFoxNodeDisplayName?, stepIndex? }) only when the funnel is made of multiple components, internal views, tabs, panels, or steps inside the same screen.
- Do not add trackFunnelStep for journeys that are already represented by separate screens, because navigation tracking already covers those screen-to-screen transitions.

7. Verification
- After the integration, run the app with the debug key.
- Navigate through the app, open modals, trigger important presses, and test any critical flows.
- To verify the installation, open the Development section in the SignalFox dashboard and confirm that events are arriving there.