React Native and Expo

@caravela-studio/glancy-react-native is pure JavaScript, so it works in Expo (managed or bare) and plain React Native without any native setup. It sends events, screen views and app lifecycle events, and keeps an offline queue that survives app restarts.

#Install

npm install @caravela-studio/glancy-react-native @react-native-async-storage/async-storage

With Expo, install AsyncStorage with npx expo install @react-native-async-storage/async-storage.

#Set up

Wrap your app in GlancyProvider with the write key from your bucket's Setup page:

import { GlancyProvider } from "@caravela-studio/glancy-react-native";

export default function App() {
  return (
    <GlancyProvider
      writeKey="YOUR_WRITE_KEY"
      host="https://ingest.heyglancy.com"
      app={{ name: "Kitbox", version: "1.4.0", build: "112" }}
    >
      <Navigation />
    </GlancyProvider>
  );
}

app tells Hey Glancy which version of your app sent each event, and lets it send Application Installed and Application Updated. With Expo, take the values from expo-application (Application.nativeApplicationVersion, Application.nativeBuildVersion).

#Screen views

With React Navigation, trackNavigation sends a Screen Viewed for every route change:

import { useGlancy, trackNavigation } from "@caravela-studio/glancy-react-native";
import { NavigationContainer, useNavigationContainerRef } from "@react-navigation/native";

function Navigation() {
  const glancy = useGlancy();
  const ref = useNavigationContainerRef();
  return (
    <NavigationContainer ref={ref} onReady={() => trackNavigation(glancy, ref)}>
      {/* your screens */}
    </NavigationContainer>
  );
}

Without React Navigation, call useScreen("Settings") in a screen component, or glancy.screen("Settings").

#Events and users

function BuyButton() {
  const glancy = useGlancy();
  return <Button title="Buy" onPress={() => glancy.track("Order Completed", { revenue: 42 })} />;
}

glancy.identify(user.id, { name: user.name, email: user.email }); // after sign in
glancy.reset();                                                    // on sign out

#App lifecycle

On by default (trackAppLifecycle={false} turns it off):

Event	When
Application Installed	The first launch
Application Updated	The first launch after app.version or app.build changed
Application Opened	Each launch, and each return to the foreground (from_background: true)
Application Backgrounded	The app goes to the background; the queue is sent right away

#Options

Option	Default
writeKey, host		Required
app		{ name, version, build, namespace }, sent as context.app
storage	AsyncStorage	Anything with async getItem / setItem / removeItem
flushAt / flushInterval	20 / 30000 ms	Batching
maxQueueSize	1000	Events kept while offline
trackAppLifecycle	true
debug	false	Log every event

#Outside React

import AsyncStorage from "@react-native-async-storage/async-storage";
import { GlancyClient } from "@caravela-studio/glancy-react-native";

export const glancy = new GlancyClient({ writeKey: "YOUR_WRITE_KEY", host: "https://ingest.heyglancy.com", storage: AsyncStorage });