shipabase/docs
Docs/Frameworks
.md

React Native & Expo

Track screens and events in a mobile app built with Expo or React Native.

Install#

Terminal
npx expo install @shipabase/js

Works in Expo and bare React Native: the SDK uses fetch and stores nothing on the device.

Expo Router#

Call init once, then record a screen view each time the route changes:

app/_layout.tsx
import { useEffect } from "react";import { Stack, usePathname } from "expo-router";import { init, trackPageview } from "@shipabase/js"; init(process.env.EXPO_PUBLIC_SHIPABASE_KEY!); export default function RootLayout() {  const pathname = usePathname();  useEffect(() => trackPageview(pathname), [pathname]);  return <Stack />;}

React Navigation#

App.tsx
import { NavigationContainer, useNavigationContainerRef } from "@react-navigation/native";import { init, trackPageview } from "@shipabase/js"; init(process.env.EXPO_PUBLIC_SHIPABASE_KEY!); export default function App() {  const ref = useNavigationContainerRef();  return (    <NavigationContainer ref={ref} onStateChange={() => trackPageview(ref.getCurrentRoute()?.name)}>      {/* … */}    </NavigationContainer>  );}

Track events#

anywhere
import { trackEvent } from "@shipabase/js"; trackEvent("workout_completed", { minutes: 25 });

Screens show up in the Pages card, and every event is attached to the screen it happened on.