chore(example): match UI with native android example

examples/RNOneSignalTS/.gitignore

@@ -41,6 +41,11 @@ node_modules/
 npm-debug.log
 yarn-error.log
 
+# Environment variables
+.env
+.env.local
+.env.*.local
+
 # fastlane
 #
 # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the

examples/RNOneSignalTS/BEFORE_AFTER.md

@@ -0,0 +1,324 @@
+# React Native OneSignal Demo App - Before & After Comparison
+
+## BEFORE (Old Design)
+
+### Layout
+```
+┌─────────────────────────────────────┐
+│         OneSignal (Title)           │
+├─────────────────────────────────────┤
+│                                     │
+│    Console Output (Scrollable)     │ 50% height
+│          [X] Clear Button           │
+│          [Input Field]              │
+│                                     │
+├─────────────────────────────────────┤
+│                                     │
+│   ┌───────────────────────────┐    │
+│   │ InAppMessages (Header)    │    │
+│   ├───────────────────────────┤    │
+│   │ [Get paused]              │    │
+│   │ [Pause IAM]               │    │
+│   │ [Unpause IAM]             │    │
+│   │ [Remove trigger for key]  │    │ 50% height
+│   │ [Add trigger...]          │    │
+│   │ ... (48 more buttons)     │    │
+│   └───────────────────────────┘    │
+│                                     │
+└─────────────────────────────────────┘
+```
+
+### Characteristics
+- **53 flat blue buttons** (#007bff)
+- **8 category headers** with dividers
+- **Minimal styling** - basic flat design
+- **No visual hierarchy** - all buttons same size
+- **No grouping** - just a vertical list
+- **No state visualization** - buttons only
+- **Single input field** at top for all features
+- **No empty states**
+
+### User Experience Issues
+- Overwhelming number of buttons
+- Hard to find specific features
+- No context for what each button does
+- No feedback on current state (e.g., is IAM paused?)
+- No way to see what aliases/tags are currently set
+- Console takes up too much space (50%)
+
+---
+
+## AFTER (New Design)
+
+### Layout
+```
+┌─────────────────────────────────────┐
+│         OneSignal (Title)           │
+├─────────────────────────────────────┤
+│                                     │
+│    Console Output (Scrollable)     │ 30% height
+│          [X] Clear Button (RED)     │
+│          [Input Field]              │
+├─────────────────────────────────────┤
+│  ╔═════════════════════════════╗   │
+│  ║ App Info                    ║   │
+│  ║ App ID: 77e32082...        ║   │
+│  ║ [Login] [Logout]           ║   │
+│  ║ [Revoke Consent]           ║   │
+│  ╚═════════════════════════════╝   │
+│                                     │
+│  ╔═════════════════════════════╗   │
+│  ║ Aliases                     ║   │
+│  ║ • my_alias: value123        ║   │ 70% height
+│  ║ • test: user_test       [×] ║   │ (scrollable)
+│  ║ (No Aliases Added)          ║   │
+│  ║ [Add Alias]                 ║   │
+│  ╚═════════════════════════════╝   │
+│                                     │
+│  ╔═════════════════════════════╗   │
+│  ║ Push Subscription           ║   │
+│  ║ ID: abc123...               ║   │
+│  ║ Push Notifications [ON/OFF] ║   │
+│  ║ [Prompt Permission]         ║   │
+│  ╚═════════════════════════════╝   │
+│                                     │
+│  ╔═════════════════════════════╗   │
+│  ║ Notification Demos          ║   │
+│  ║ ┌────────┐  ┌────────┐     ║   │
+│  ║ │  🔔    │  │  👋    │     ║   │
+│  ║ │General │  │Greeting│     ║   │
+│  ║ └────────┘  └────────┘     ║   │
+│  ║ ... (8 types in 2x4 grid)  ║   │
+│  ╚═════════════════════════════╝   │
+└─────────────────────────────────────┘
+```
+
+### Characteristics
+- **Card-based Material Design** with shadows
+- **OneSignal red (#E9444E)** for all primary actions
+- **15 organized sections** with clear headers
+- **Toggle switches** for binary states (on/off)
+- **FlatLists** for managing collections (aliases, tags, etc.)
+- **Empty state messages** ("No Aliases Added")
+- **Modal dialogs** for input (Add Alias, Add Email, etc.)
+- **Demo grids** for notifications (8 types) and IAMs (4 types)
+- **Visual feedback** - see current state at a glance
+- **Professional polish** - consistent spacing, shadows, elevation
+
+### User Experience Improvements
+✅ **Clear visual hierarchy** - cards make sections obvious
+✅ **Reduced cognitive load** - 15 sections instead of 53 buttons
+✅ **State visibility** - see what aliases, tags, emails are set
+✅ **Contextual actions** - delete buttons next to items
+✅ **Binary toggles** - switch on/off for push/location/IAM
+✅ **Empty states** - "No X Added" guides users
+✅ **Modal inputs** - focused data entry experience
+✅ **Demo showcase** - attractive grid of notification types
+✅ **More content space** - 70% vs 50% for features
+✅ **Better branding** - OneSignal red throughout
+
+---
+
+## Detailed Section Comparison
+
+### Old: Flat Button List
+```
+┌─────────────────────────┐
+│ InAppMessages           │
+├─────────────────────────┤
+│ [Get paused]            │
+│ [Pause IAM]             │
+│ [Unpause IAM]           │
+│ [Remove trigger...]     │
+│ [Add trigger...]        │
+│ [Add list of triggers]  │
+│ [Remove list...]        │
+│ [Clear all triggers]    │
+└─────────────────────────┘
+```
+
+### New: Card with State
+```
+╔══════════════════════════════╗
+║ In-App Messaging             ║
+║                              ║
+║ Pause IAM       [OFF]  <--Toggle
+║                              ║
+╚══════════════════════════════╝
+
+╔══════════════════════════════╗
+║ Triggers                     ║
+║ • trigger_1: value1      [×] ║
+║ • trigger_2: value2      [×] ║
+║ (No Triggers Added)          ║
+║                              ║
+║ [Add Trigger] [Clear All]    ║
+╚══════════════════════════════╝
+```
+
+**Benefits:**
+- Current state visible (toggle shows on/off)
+- List shows what triggers are currently set
+- Contextual delete buttons
+- Empty state when no triggers
+- All related actions in one card
+
+---
+
+## Color Comparison
+
+### Old
+- Primary buttons: **#007bff** (Bootstrap blue)
+- Background: **#ffffff** (White)
+- Text: **#000000** (Black)
+- Dividers: **#cccccc** (Gray)
+
+### New
+- Primary buttons: **#E9444E** (OneSignal Red) 🔴
+- Background: **#ECECEC** (Light gray)
+- Card background: **#FFFFFF** (White)
+- Text: **#3A3A3A** (Dark gray)
+- Accent: **#A12F36** (Dark red)
+
+**Benefits:**
+- Matches OneSignal brand identity
+- Professional color palette
+- Better visual contrast
+- Cards pop against gray background
+
+---
+
+## Feature Organization
+
+### Old: 8 Categories, 53 Buttons
+1. InAppMessages (8 buttons)
+2. Location (4 buttons)
+3. Notifications (5 buttons)
+4. Live Activities (5 buttons)
+5. Session (3 buttons)
+6. User (19 buttons)
+7. Push Subscription (5 buttons)
+8. Privacy Consent (4 buttons)
+
+### New: 15 Sections, Grouped by Purpose
+1. **Privacy Consent** (modal, one-time)
+2. **App Info** (login/logout, app ID)
+3. **Aliases** (collection management)
+4. **Email** (collection management)
+5. **SMS** (collection management)
+6. **Tags** (collection management)
+7. **Push Subscription** (toggle + info)
+8. **Outcomes** (session tracking)
+9. **In-App Messaging** (toggle)
+10. **Triggers** (collection management)
+11. **Location** (toggle + permission)
+12. **Live Activities** (iOS-specific)
+13. **Notification Demos** (8-type grid)
+14. **IAM Demos** (4-type grid)
+15. **Navigation** (go to Details)
+
+**Benefits:**
+- Grouped by purpose, not SDK namespace
+- Collections (aliases, tags, triggers) use same pattern
+- Toggles (push, location, IAM) use same pattern
+- Demos showcased in attractive grids
+- More intuitive organization
+
+---
+
+## Details Screen
+
+### Old
+```
+┌─────────────────────────────┐
+│                             │
+│    Details Screen           │
+│                             │
+│  This is a simple extra     │
+│  screen.                    │
+│                             │
+└─────────────────────────────┘
+```
+
+### New
+```
+┌─────────────────────────────┐
+│ ╔═════════════════════════╗ │
+│ ║ User Information        ║ │
+│ ║ OneSignal User ID:      ║ │
+│ ║ abc123...        [View] ║ │
+│ ║ External User ID:       ║ │
+│ ║ user_ext_id      [View] ║ │
+│ ║ Push Subscription ID:   ║ │
+│ ║ sub_456...       [View] ║ │
+│ ║ Push Token:             ║ │
+│ ║ token_789...     [View] ║ │
+│ ╚═════════════════════════╝ │
+│                             │
+│ ╔═════════════════════════╗ │
+│ ║ Device Information      ║ │
+│ ║ Platform: ios           ║ │
+│ ║ OS Version: 17.2        ║ │
+│ ╚═════════════════════════╝ │
+│                             │
+│ ╔═════════════════════════╗ │
+│ ║ App Information         ║ │
+│ ║ App ID: 77e32082...     ║ │
+│ ╚═════════════════════════╝ │
+│                             │
+│      [Refresh]              │
+└─────────────────────────────┘
+```
+
+**Benefits:**
+- Actually useful debug information
+- View buttons to see full IDs
+- Refresh button to reload data
+- Matches main screen design
+- Helpful for developers testing
+
+---
+
+## Implementation Stats
+
+### Code Organization
+- **Old:** 2 files (OSDemo.tsx, OSButtons.tsx)
+- **New:** 42 files across organized directories
+  - 4 constants files
+  - 1 types file
+  - 1 context file
+  - 6 common components
+  - 5 dialog components
+  - 15 section components
+  - 3 modified screens
+
+### TypeScript Coverage
+- **Old:** Partial typing
+- **New:** Full TypeScript with interfaces for all props and state
+
+### State Management
+- **Old:** Local component state only
+- **New:** Context API with reducer pattern for global state
+
+### Reusability
+- **Old:** Helper function for buttons
+- **New:** 11 reusable components (Card, Button, Toggle, Dialogs, etc.)
+
+---
+
+## Summary
+
+The redesign transforms the React Native OneSignal demo app from a **simple button list** into a **professional, branded, Material Design experience** that matches the quality of the Android SDK demo app while preserving all 53 SDK features and enhancing the developer experience with better state visualization and organization.
+
+**Key Wins:**
+✅ Modern card-based UI
+✅ OneSignal red branding
+✅ Better space utilization (30/70 vs 50/50)
+✅ State visibility (see aliases, tags, triggers)
+✅ Intuitive organization (15 sections vs 53 buttons)
+✅ Professional polish (shadows, spacing, typography)
+✅ Enhanced Details screen (debug info)
+✅ All SDK features preserved
+✅ TypeScript throughout
+✅ Reusable components
+✅ Scalable architecture