Smart BanneriOS

Web-to-app promo strip — springs down over the top edge, app icon + rating stars + CTA, dismissable with upward exit

$ npx lumioui add smart-banner

import { SmartBanner } from "@/components/ui/smart-banner/smart-banner";

Props8

appName	string	App name shown next to the icon.
tagline?	string	Line under the name — defaults to star rating + store label.
rating?	number	0–5 rating shown as stars in the default tagline.
ctaLabel?	string	CTA text — "Open", "Get", "Install". Default "Open".
onPress?	() => void	CTA tap — deep-link into the app, store page, etc.
onDismiss?	() => void	X tap — parent unmounts; if unset the X is hidden.
iconSource?	ImageSourcePropType	Custom app icon. Falls back to a branded initial tile.
className?	string

Smart Bannerweb.tsx

smart-banner/variants/web.tsx open

Web-to-app promo strip — springs down over the top edge, app icon + rating stars + CTA, dismissable with upward exit

import { SmartBannerWeb } from "@/components/ui/smart-banner/variants/web";

export function Example() {
  return (
    <SmartBannerWeb />
  );
}

import * as React from "react";
import { View } from "react-native";
import { SmartBanner } from "../smart-banner";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** SmartBannerWeb — the strip springing down over a fake mobile web page. */
export function SmartBannerWeb() {
  const [bannerKey, setBannerKey] = React.useState(1);
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 overflow-hidden rounded-2xl">
          {bannerKey ? (
            <SmartBanner
              key={bannerKey}
              appName="Lumio Wallet"
              rating={4.9}
              ctaLabel="Open"
              onPress={() => {}}
              onDismiss={() => setBannerKey(0)}
            />
          ) : null}

          <View className="gap-2 p-4">
            <Text variant="small" className="font-semibold">lumio.app — web</Text>
            <View className="gap-1.5">
              {["Home · Send · Request", "Cards · Rewards · Support"].map((t) => (
                <Glass interactive key={t} curvature="edge" className="rounded-lg px-3 py-2.5">
                  <Text variant="muted" className="text-xs">{t}</Text>
                </Glass>
              ))}
            </View>
            <Text variant="muted" className="text-xs">
              {bannerKey ? "Dismiss or tap Open — the banner springs away." : "Banner dismissed ✓"}
            </Text>
            {!bannerKey ? (
              <Text
                variant="small"
                className="font-medium text-primary"
                onPress={() => setBannerKey(1)}
                accessibilityRole="button"
              >
                Show it again
              </Text>
            ) : null}
          </View>
        </Glass>
      </View>
  );
}