Example app UI overhaul #282
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
There was a problem hiding this comment.
Pull Request Overview
This PR modernizes the example app's user interface by replacing the simple button list with a structured, section-based layout using custom components and a comprehensive theming system.
Key Changes:
- Introduced a centralized theme system with color, spacing, typography, and border radius constants
- Created reusable UI components (ActionButton, ProfileTextField, SectionHeader, ToggleButtons)
- Redesigned the main App screen with form-based profile management and grouped sections
Reviewed Changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| example/src/theme.ts | New file defining theme constants (colors, spacing, typography, border radius) for consistent styling |
| example/src/components/ToggleButtons.tsx | New component for toggle button pairs with active state indication |
| example/src/components/SectionHeader.tsx | New component for section headers with consistent styling |
| example/src/components/ProfileTextField.tsx | New component combining label, text input, and inline action button |
| example/src/components/ActionButton.tsx | New component for styled buttons with optional destructive/disabled states |
| example/src/Styles.ts | Comprehensive style overhaul integrating theme constants and new component styles |
| example/src/KlaviyoReactWrapper.ts | Refactored SDK wrapper with improved documentation, removed random data generation, and added input validation |
| example/src/AppViewInterface.ts | Removed legacy interface file that defined the old button-based UI structure |
| example/src/App.tsx | Complete redesign with state management, form inputs, validation, and section-based layout |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
evan-masseau
force-pushed
the
ecm/example-app-overhaul
branch
from
82caa52 to
d43e96b
Compare
evan-masseau
force-pushed
the
ecm/example-app-overhaul
branch
from
d43e96b to
774b7be
Compare
evan-masseau
force-pushed
the
feat/geofencing
branch
from
f3e58b5 to
a8cf4db
Compare
evan-masseau
force-pushed
the
ecm/example-app-overhaul
branch
from
774b7be to
1dc6587
Compare
evan-masseau
force-pushed
the
feat/geofencing
branch
from
997e6ed to
4de9eef
Compare
- Create theme.ts with comprehensive color palette, spacing, typography, and border radius constants - Update Styles.ts with production-ready styles for all app components (sections, buttons, inputs, toggles) - Add helper functions to KlaviyoReactWrapper for user input (setEmailValue, setPhoneNumberValue, setExternalIdValue) - Add sendViewedProductEvent() for demo product tracking event - Maintain backward compatibility with existing random data generators This foundation sets up the visual design system and data handling needed for the production-quality example app. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- SectionHeader: Section title with bottom border styling - ProfileTextField: Label + TextInput + inline "Set" button with disabled state - ActionButton: Primary/destructive styled button with optional disabled state - ToggleButtons: Register/Unregister style toggle pair with active state indication All components use centralized theme and styles for consistency. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Complete overhaul of the example app with state management, organized sections, and professional UI: **State Management:** - useState hooks for email, phoneNumber, externalId, pushToken, formsRegistered - useEffect to initialize SDK and load current profile values on mount - Maintains deep linking handler for universal tracking links **Profile Section:** - Three ProfileTextField components (External ID, Email, Phone) - Individual "Set" buttons with validation (email regex check) - Batch "Set Profile" button to update all fields at once - "Reset Profile" destructive action with confirmation dialog - Real-time validation and disabled states **Events Section:** - "Create Test Event" button (random event with test data) - "Viewed Product" button (sample product with Klaviyo metric) **In-App Forms Section:** - ToggleButtons for Register/Unregister - Visual state indication (active/inactive) - Updates formsRegistered state **Push Notifications Section:** - Read-only push token display (styled like disabled input) - "Set Badge Count" button (iOS only, uses Platform check) **UX Improvements:** - Alert dialogs for user feedback on all actions - Email validation before setting - Confirmation dialog for destructive actions - Disabled states for empty inputs - SafeAreaView and ScrollView for proper layout - Cross-platform compatibility (iOS/Android) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
**Visual Enhancements:** - Add subtle shadows to section cards (iOS shadowOpacity/shadowRadius, Android elevation) - Increase scrollContent bottom padding for better last item visibility - Consistent minHeight (44-48px) across all interactive elements for better touch targets **Cross-Platform Improvements:** - Platform.select for iOS/Android shadow differences - Platform-specific font families (Courier for iOS, monospace for Android) in push token display - Smaller font size (12px) for long push tokens with proper line height **Accessibility:** - All buttons meet iOS recommended 44px minimum touch target - Standalone action buttons use 48px for even better usability - Input fields match button heights for visual consistency These refinements ensure the app looks professional and functions well on both iOS and Android. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
evan-masseau
force-pushed
the
ecm/example-app-overhaul
branch
from
1dc6587 to
465fd64
Compare
evan-masseau
commented
Nov 28, 2025
| // Initialize SDK and load current state on mount | ||
| useEffect(() => { | ||
| // Initialize the SDK with public key | ||
| Klaviyo.initialize('TRJ3wp'); |
Contributor
Author
There was a problem hiding this comment.
Eek, lets not commit that now...
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Wanted to make the sample app here a bit more user friendly, so I tasked Claude with adapting the example app recently added to the Android SDK to react native.
Due Diligence
Release/Versioning Considerations
PatchContains internal changes or backwards-compatible bug fixes.MinorContains changes to the public API.MajorContains breaking changes.Changelog / Code Overview
Test Plan
Related Issues/Tickets