SuperwallLoaded

<SuperwallLoaded /> is a component that renders its children only when Superwall has finished loading and is configured. This component is useful for conditionally rendering parts of your UI that depend on Superwall being ready.

If Superwall is still loading, has not been configured, or has a configuration error, this component will render null.

Props

`children`

The content to render once Superwall is loaded and configured.

Example

import {
  SuperwallProvider,
  SuperwallLoading,
  SuperwallLoaded,
  SuperwallError,
} from "expo-superwall";
import { ActivityIndicator, View, Text } from "react-native";

const API_KEY = "YOUR_SUPERWALL_API_KEY";

export default function App() {
  return (
    <SuperwallProvider apiKeys={{ ios: API_KEY }}>
      <SuperwallLoading>
        <ActivityIndicator style={{ flex: 1 }} />
      </SuperwallLoading>
      <SuperwallError>
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
          <Text>Failed to load Superwall</Text>
        </View>
      </SuperwallError>
      <SuperwallLoaded>
        {/* Your main app screen or component */}
        <MainAppScreen />
      </SuperwallLoaded>
    </SuperwallProvider>
  );
}

function MainAppScreen() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Superwall SDK is ready!</Text>
      {/* Rest of your app's UI */}
    </View>
  );
}

Notes

This component will not render if there's a configuration error. Use <SuperwallError /> to handle error states.
This component will not render while Superwall is loading. Use <SuperwallLoading /> to show loading states.
Use this component alongside <SuperwallLoading /> and <SuperwallError /> to provide a complete loading/error/success UI flow.

SuperwallLoaded

Props

children

Example

Notes

On this page

`children`