Common API/types between analytics-next and analytics-react-native

[robbieaverill]

Hi team,

I'm looking to centralise a set of hooks for tracking certain events between our website (Next.js) and our mobile app (React Native). We use @segment/analytics-next on the web and @segment/analytics-react-native on mobile.

I have a shared library between both of them, and in order to write a hook that tracks something for both platforms in the shared library, I'd need to install both packages in my shared library. This would result in making the React Native SDK a dependency on my web project, and vice-versa.

This is an example of what I would like to do:

const useTrackQuantityChanged = () => {
  const { track } = useAnalytics();

  return useCallback((newQuantity: number) => {
    track('Quantity changed', { quantity: newQuantity });
  });
};

Ideally my website creates an AnalyticsBrowser instance and my mobile app creates a SegmentClient instance, and they both provide the client to the app using a context provider. After this I would like my write all my tracking hooks in one place and pull the client from context.

Currently this would only be possible if I define my own types for the useAnalytics() hook, track method, identify method, etc, since I can't use AnalyticsBrowser | SegmentClient without introducing unwanted dependency.

In my mind, a good solution to this would be:

• Create a set of types that both analytics-next and analytics-react-native can implement for the analytics object/client
• Create a new package e.g. analytics-react which defines the AnalyticsProvider and useAnalytics() hook for React/React Native users
• Update analytics-next and analytics-react-native so AnalyticsBrowser and SegmentClient both implement the new shared interface
• Deprecate RN's context provider and hook in favour of the new one in the centralised React package

Keen for some feedback on this suggestion. I think it would be an improvement for devs, like me, wanting to build reusable logic for multiple platforms, as well as reducing the likelihood of the SDK's API changing between platforms (assumption that you want it to be the same).

My solution for now (I think) is to build the hooks anyway and define my own TypeScript interfaces for the track/identify methods.