React Native Rich Media

​

Supported Formats

​

Lottie Animations

• Remote URL — provide a URL to a .json Lottie file
• Inline JSON — embed the animation JSON directly in the config
• Controls — autoplay, loop, speed, play-on-scroll, play-on-tap
• Color overrides — remap colors in the animation without re-exporting

​

Rive Animations

• Remote URL — provide a URL to a .riv file
• Artboard selection — choose which artboard to display
• State machine — drive interactive animations with state machine inputs
• Trigger on completion — fire a state machine trigger when the step or flow completes

​

Video

• Remote URL — provide a URL to an MP4 or HLS video
• Thumbnail — optional poster image shown before playback
• Controls — autoplay, loop, muted, show/hide controls
• Sizing — configurable height and corner radius

​

Images

• Remote URL — standard JPEG, PNG, and WebP supported on both platforms
• GIF — animated GIFs are supported in in-app message hero areas and push notification rich content
• SVG — supported on both platforms with native rasterization
• Corner radius, sizing, content mode — configured in the Console

​

Asset URL Conventions

​

Embedding Rich Media in Paywalls

import { AppDNA } from '@appdna/react-native-sdk';

try {
  await AppDNA.paywall.present('premium_upgrade', { placement: 'settings' });
} catch (e) {
  console.log('Paywall not available:', e);
}

• Hero Lottie — attach a Lottie URL to the paywall_header section to play a looping product animation while the user reads features.
• Feature illustrations — inside paywall_features, each feature row can carry an inline icon (Lucide / SF Symbols / Material / emoji) or a remote image.
• Video proof — a short looping product demo can be embedded into a section with paywall_video style.
• CTA pulse — the paywall_cta section supports CTA animations (pulse, glow, bounce) configured entirely from the Console.

​

Embedding Rich Media in Onboarding

try {
  await AppDNA.onboarding.present('main_flow');
} catch (e) {
  console.log('Flow config not available:', e);
}

​

Embedding Rich Media in In-App Messages

• An image (with optional GIF playback)
• A Lottie animation
• A short looping video

import { AppDNA, AppDNAInAppMessageDelegate } from '@appdna/react-native-sdk';

const messageObserver: AppDNAInAppMessageDelegate = {
  onMessageShown(messageId, trigger) {
    console.log(`Message shown: ${messageId}`);
  },

  onMessageAction(messageId, action, data) {
    console.log(`Message action: ${action}`);
  },

  onMessageDismissed(messageId) {
    console.log(`Message dismissed: ${messageId}`);
  },

  shouldShowMessage(messageId) {
    // Return false to suppress display.
    return true;
  },
};

AppDNA.inAppMessages.setDelegate(messageObserver);

​

Animation Playback Control

​

Local Asset Embedding

• iOS — drop the .json / .riv / video file into your iOS host project’s asset catalog or main bundle.
• Android — drop the asset into app/src/main/assets/ (or res/raw/ for video).
• Console — reference the bundled asset with an asset:// URL (e.g. asset://intro.json).

​

Fallback Behavior

• Lottie / Rive — if the file is missing, malformed, or the network request fails, the block is skipped (no empty space, no crash). The next block in the layout takes its slot.
• Video — if the video URL is unreachable, the optional thumbnail_url is shown instead. If no thumbnail is configured, the block is skipped.
• Image — if the image URL is unreachable, the block is skipped. There is no broken-image placeholder.
• Inline JSON Lottie — if the inline JSON is malformed, the block is skipped and a debug log is emitted.

​

Performance Notes

• Lazy loading — rich-media blocks are loaded on demand. A Lottie / Rive / video asset is only fetched when its block enters the visible viewport.
• Asset caching — remote assets are cached by the native HTTP stack (URLCache on iOS, OkHttp disk cache on Android). Subsequent presentations reuse the cached file.
• Memory — the native renderers tear down decoded animations when the host view is dismissed, so animations do not accumulate memory across flows.
• Cold start — avoid placing large video files on the very first onboarding step. Use a Lottie or static image for the welcome step and put video on later steps so playback starts after configuration is fully loaded.
• Inline JSON — inline Lottie payloads add to the config bundle size. Prefer remote URLs for animations larger than ~50 KB to keep config refreshes fast.

​

Icons

​

Visual Effects

​

Haptic Feedback

• Step advances (onboarding)
• Button taps
• Plan selection (paywalls)
• Option selection (surveys, forms)
• Toggle changes
• Form submission
• Error and success states

​

Particle Effects

​

Blur / Glassmorphism

• Radius — blur intensity
• Tint — overlay color tint
• Saturation — color saturation adjustment

​

Styling

• Text styles — font family, size, weight, color, alignment, line height, letter spacing, opacity
• Backgrounds — solid color, linear/radial gradient, or remote image with overlay
• Borders — width, color, style, and per-corner radius
• Shadows — offset, blur, spread, and color
• Spacing — per-side padding and margin
• Animations — entry animations (slide, fade, scale), section stagger, CTA pulse/glow/bounce, dismiss animations

​

Dynamic Content Templates

​

No TypeScript Code Required