PaywallView

<PaywallView /> embeds a Superwall paywall directly inside a React Native layout — for example, inline within a scroll view, as a bottom overlay, or inside your own full-screen Modal. It's an alternative to the default full-screen presentation triggered by registerPlacement/usePlacement.

Give the view an explicit width and height, and unmount it when the surrounding content no longer needs it. Each mounted PaywallView owns its own native paywall, so use different placements for paywalls that are mounted at the same time.

Props

<PaywallView /> also accepts the standard React Native ViewProps (except children), such as style, which are forwarded to the wrapping View.

PaywallFallbackState

renderFallback is called with one of the following states:

While the paywall is presented, renderFallback is not called (PaywallView renders the native paywall instead).

Example

import { PaywallView } from "expo-superwall";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";

function InlinePaywall() {
  return (
    <PaywallView
      placement="campaign_trigger"
      style={styles.paywallFrame}
      renderFallback={(state) => {
        if (state.status === "loading") {
          return (
            <View style={styles.placeholder}>
              <ActivityIndicator />
            </View>
          );
        }

        if (state.status === "error") {
          return (
            <View style={styles.placeholder}>
              <Text>Unable to load this offer.</Text>
            </View>
          );
        }

        // Skipped or dismissed: render nothing so no empty native view is left behind.
        return null;
      }}
      onPresent={(paywallInfo) => console.log("Presented", paywallInfo.name)}
      onDismiss={(paywallInfo, result, shouldDismiss) => {
        if (shouldDismiss) {
          console.log("Dismissed with result", result.type);
        }
      }}
      onSkip={(reason) => console.log("Skipped", reason.type)}
      onError={(error) => console.log("Error", error)}
    />
  );
}

const styles = StyleSheet.create({
  paywallFrame: {
    height: 330,
    borderRadius: 20,
    overflow: "hidden",
  },
  placeholder: {
    ...StyleSheet.absoluteFillObject,
    alignItems: "center",
    justifyContent: "center",
  },
});

Presenting a second paywall from an embedded one

An embedded paywall can trigger a custom action (configured in the paywall editor) to present a second, full-screen paywall — for example an "or, view all plans" button on an inline paywall. Listen for the action with useSuperwallEvents's onCustomPaywallAction, then mount a second PaywallView (for example inside a React Native Modal) for the full-screen placement. See the article-paywall example in the SDK repo for a complete inline-article pattern with both an inline paywall and a full-screen follow-up paywall.

Related Components

• <SuperwallProvider /> - Required root component that configures the SDK
• useSuperwallEvents - Subscribe to custom paywall actions and other SDK events