React Native

npm install gatlio-react-native

import { GatlioGate } from 'gatlio-react-native'

export function App() {
  return (
    <GatlioGate
      apiBase="https://api.gatlio.io"
      tenantSlug="acme"
      customerId={currentUser.stripeCustomerId}
      publishableKey="pk_live_abc123"
    >
      <YourApp />
    </GatlioGate>
  )
}

interface GatlioGateProps {
  // Required
  apiBase: string
  tenantSlug: string
  customerId: string        // Stripe customer ID (cus_…)
  publishableKey: string    // Gatlio publishable key

  // Optional
  pollInterval?: number     // ms, default 600_000 (10 min), minimum 60_000

  // Lifecycle callbacks — fire on transitions, not every poll tick
  onLockout?: (customerId: string) => void
  onWarning?: (customerId: string) => void
  onActive?: (customerId: string) => void
  onRecovered?: (customerId: string) => void
  onError?: (error: Error) => void

  // UI overrides
  lockoutScreen?: React.ReactNode
  warningBanner?: React.ReactNode

  children: React.ReactNode
}

import { useGatlio } from 'gatlio-react-native'

function MyScreen() {
  const { status, cardUpdateUrl, triggerCardUpdate, dismissWarning } = useGatlio({
    apiBase: 'https://api.gatlio.io',
    tenantSlug: 'acme',
    customerId: currentUser.stripeCustomerId,
    publishableKey: 'pk_live_abc123',
  })

  if (status === 'lockout') {
    return (
      <View>
        <Text>Payment method needs updating.</Text>
        <Pressable onPress={triggerCardUpdate}>
          <Text>Update now</Text>
        </Pressable>
      </View>
    )
  }

  return <YourContent />
}

const config = useMemo(() => ({
  apiBase: 'https://api.gatlio.io',
  tenantSlug: 'acme',
  customerId: user.stripeCustomerId,
  publishableKey: 'pk_live_abc123',
}), [user.stripeCustomerId])

const state = useGatlio(config)

<GatlioGate {...config} forcedStatus="lockout">
  <App />
</GatlioGate>

import { GatlioSandbox } from 'gatlio-react-native'

export function DevScreen() {
  return (
    <GatlioSandbox
      onLockout={(id) => console.log('locked out:', id)}
      onWarning={(id) => console.log('warning:', id)}
      onActive={(id) => console.log('active:', id)}
    >
      <YourApp />
    </GatlioSandbox>
  )
}

import type {
  GatlioConfig,
  GatlioState,
  GatlioStatus,
  GatlioGateProps,
} from 'gatlio-react-native'