# React Native & Expo

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

Source: https://shipabase.dev/docs/react-native

## Install

`Terminal`

```bash
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`

```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`

```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`

```ts
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.