Skip to content

feat: add backgroundColor property to CourierInboxTheme#43

Draft
mikemilla wants to merge 1 commit intomainfrom
cursor/add-inbox-background-color-d185
Draft

feat: add backgroundColor property to CourierInboxTheme#43
mikemilla wants to merge 1 commit intomainfrom
cursor/add-inbox-background-color-d185

Conversation

@mikemilla
Copy link
Copy Markdown
Collaborator

Summary

Adds a new optional backgroundColor property to CourierInboxTheme that allows users to customize the background color of the entire inbox view on both iOS and Android.

Resolves #32

Problem

Users cannot set the background color of the inbox. The issue reporter tried various approaches including components.messageList.container.backgroundColor but nothing works because the theme has no backgroundColor field.

Solution

Added backgroundColor?: string to the CourierInboxTheme TypeScript interface and bridged it to both native platforms:

  • TypeScript (src/models/CourierInboxTheme.tsx): Added backgroundColor?: string to the CourierInboxTheme interface
  • iOS bridge (ios/CourierInboxReactNativeManager.swift): Maps the backgroundColor string from the RN theme dictionary to the native CourierInboxTheme constructor
  • Android bridge (android/src/main/java/com/courierreactnative/CourierInboxViewManager.kt): Maps the backgroundColor string from the RN theme ReadableMap to the native CourierInboxTheme constructor
  • Docs (Docs/2_Inbox.md): Updated the styled inbox example to show the new property

Usage

const theme: CourierInboxTheme = {
  backgroundColor: '#0C111D',
  // ...other properties
};

<CourierInboxView
  theme={{ light: theme, dark: theme }}
/>

Dependencies

This PR requires corresponding changes in the native SDKs to add the backgroundColor property to CourierInboxTheme:

  • courier-ios: Add backgroundColor: UIColor? to CourierInboxTheme and apply it to the inbox's stack view, scroll view, table view, and tab bar. Changes are prepared in branch cursor/add-inbox-background-color-d185 (pending push access).
  • courier-android: Add @ColorInt backgroundColor: Int? to CourierInboxTheme and apply it to the root layout, tab layout, recycler view, and swipe refresh layout. Changes are prepared in branch cursor/add-inbox-background-color-d185 (pending push access).

The native SDK versions referenced by this package (Courier_iOS 5.8.0 and courier-android 5.3.0) will need to be updated to versions that include the backgroundColor property.

Files Changed

File Change
src/models/CourierInboxTheme.tsx Added backgroundColor?: string to interface
ios/CourierInboxReactNativeManager.swift Bridge backgroundColor to native iOS theme
android/src/main/java/com/courierreactnative/CourierInboxViewManager.kt Bridge backgroundColor to native Android theme
Docs/2_Inbox.md Updated styled example with backgroundColor
Open in Web Open in Cursor 

Adds a new optional backgroundColor property to the CourierInboxTheme TypeScript
interface and bridges it to both native iOS and Android implementations.

Usage:
  const theme: CourierInboxTheme = {
    backgroundColor: '#0C111D',
    // ...other theme properties
  };

This allows users to customize the background color of the entire inbox view,
including tabs, message lists, and scroll areas on both platforms.

Requires corresponding changes in:
- trycourier/courier-ios (backgroundColor on CourierInboxTheme)
- trycourier/courier-android (backgroundColor on CourierInboxTheme)

Resolves #32

Co-authored-by: Mike Miller <mike@mikemiller.design>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

You cannot set background color for your inbox

2 participants