You cannot set background color for your inbox

[absmugz]

This is our code, we simply want to make the inbox background color a certain color - in this instance : "#0C111D"

Nothing seems to work, so I have reopened the issue @mikemilla what you explained does not work.

`import React from "react"
import {
Modal,
View,
TouchableOpacity,
Platform,
ActionSheetIOS,
Alert,
StyleSheet,
StatusBar,
} from "react-native"
import Ionicons from "react-native-vector-icons/Ionicons"
import {
CourierInboxView,
CourierInboxTheme,
InboxMessage,
} from "@trycourier/courier-react-native"
import { colors } from "../theme"
import { Styles } from "./Styles"
import { useNavigation } from "@react-navigation/native"

interface CourierInboxModalProps {
visible: boolean
onClose: () => void
onGoDashboard?: () => void
onClickMessage?: (message: any) => void
}

const s = Styles(true)

const lightTheme = {
tabIndicatorColor: s.Colors.action,
tabStyle: {
selected: {
font: { family: s.Fonts.title, size: s.TextSizes.title, color: s.Colors.heading },
indicator: { font: { family: s.Fonts.title, size: 14, color: "#FFFFFF" }, color: s.Colors.action },
},
unselected: {
font: { family: s.Fonts.title, size: s.TextSizes.title, color: s.Colors.subtitle },
indicator: { font: { family: s.Fonts.title, size: 14, color: "#000000" }, color: s.Colors.subtitle },
},
},
readingSwipeActionStyle: {
read: { icon: "icon_undo", color: s.Colors.subtitle },
unread: { icon: "icon_check", color: s.Colors.action },
},
archivingSwipeActionStyle: { archive: { icon: "icon_archive", color: s.Colors.warning } },
unreadIndicatorStyle: { indicator: "dot", color: s.Colors.action },
titleStyle: {
unread: { family: s.Fonts.title, size: s.TextSizes.title, color: s.Colors.title },
read: { family: s.Fonts.title, size: s.TextSizes.title, color: s.Colors.subtitle },
},
timeStyle: {
unread: { family: s.Fonts.subtitle, size: s.TextSizes.subtitle, color: s.Colors.title },
read: { family: s.Fonts.subtitle, size: s.TextSizes.subtitle, color: s.Colors.subtitle },
},
bodyStyle: {
unread: { family: s.Fonts.subtitle, size: s.TextSizes.subtitle, color: s.Colors.subtitle },
read: { family: s.Fonts.subtitle, size: s.TextSizes.subtitle, color: s.Colors.subtitle },
},
buttonStyle: {
unread: {
font: { family: s.Fonts.subtitle, size: s.TextSizes.subtitle, color: "#FFFFFF" },
backgroundColor: s.Colors.action, cornerRadius: s.Corners.button,
},
read: {
font: { family: s.Fonts.subtitle, size: s.TextSizes.subtitle, color: s.Colors.title },
backgroundColor: s.Colors.option, cornerRadius: s.Corners.button,
},
},
infoViewStyle: {
font: { family: s.Fonts.title, size: s.TextSizes.title, color: s.Colors.title },
button: {
font: { family: s.Fonts.subtitle, size: s.TextSizes.subtitle, color: s.Colors.action },
backgroundColor: s.Colors.title, cornerRadius: s.Corners.button,
},
},
components: {
messageList: {
container: {
backgroundColor: "#0C111D",
},
message: {
backgroundColor: "#0C111D,
},
},
},
iOS: {
messageAnimationStyle: "right",
cellStyles: {
separatorStyle: "singleLineEtched",
separatorInsets: { top: 0, left: 0, right: 0, bottom: 0 },
},
},
android: { dividerItemDecoration: "vertical" },
} as unknown as CourierInboxTheme

const darkTheme = {
tabIndicatorColor: s.Colors.action,
tabStyle: {
selected: {
font: { family: s.Fonts.title, size: s.TextSizes.title, color: s.Colors.heading },
indicator: { font: { family: s.Fonts.title, size: 14, color: "#FFFFFF" }, color: s.Colors.action },
},
unselected: {
font: { family: s.Fonts.title, size: s.TextSizes.title, color: s.Colors.subtitle },
indicator: { font: { family: s.Fonts.title, size: 14, color: "#000000" }, color: s.Colors.subtitle },
},
},
readingSwipeActionStyle: {
read: { icon: "icon_undo", color: s.Colors.subtitle },
unread: { icon: "icon_check", color: s.Colors.action },
},
archivingSwipeActionStyle: { archive: { icon: "icon_archive", color: s.Colors.warning } },
unreadIndicatorStyle: { indicator: "dot", color: s.Colors.action },
titleStyle: {
unread: { family: s.Fonts.title, size: s.TextSizes.title, color: s.Colors.title },
read: { family: s.Fonts.title, size: s.TextSizes.title, color: s.Colors.subtitle },
},
timeStyle: {
unread: { family: s.Fonts.subtitle, size: s.TextSizes.subtitle, color: s.Colors.title },
read: { family: s.Fonts.subtitle, size: s.TextSizes.subtitle, color: s.Colors.subtitle },
},
bodyStyle: {
unread: { family: s.Fonts.subtitle, size: s.TextSizes.subtitle, color: s.Colors.subtitle },
read: { family: s.Fonts.subtitle, size: s.TextSizes.subtitle, color: s.Colors.subtitle },
},
buttonStyle: {
unread: {
font: { family: s.Fonts.subtitle, size: s.TextSizes.subtitle, color: "#FFFFFF" },
backgroundColor: s.Colors.action, cornerRadius: s.Corners.button,
},
read: {
font: { family: s.Fonts.subtitle, size: s.TextSizes.subtitle, color: s.Colors.title },
backgroundColor: s.Colors.option, cornerRadius: s.Corners.button,
},
},
infoViewStyle: {
font: { family: s.Fonts.title, size: s.TextSizes.title, color: s.Colors.title },
button: {
font: { family: s.Fonts.subtitle, size: s.TextSizes.subtitle, color: s.Colors.action },
backgroundColor: s.Colors.title, cornerRadius: s.Corners.button,
},
},
components: {
messageList: {
container: {
backgroundColor: "#0C111D,
},
message: {
backgroundColor: "#0C111D,
},
},
},
iOS: {
messageAnimationStyle: "right",
cellStyles: {
separatorStyle: "singleLineEtched",
separatorInsets: { top: 0, left: 0, right: 0, bottom: 0 },
},
},
android: { dividerItemDecoration: "vertical" },
} as unknown as CourierInboxTheme

export const CourierInboxModal: React.FC = ({
visible,
onClose,
onGoDashboard,
onClickMessage,
}) => {
const navigation = useNavigation()

const showMessageActions = (message: InboxMessage) => {
if (Platform.OS === "android") {
Alert.alert("Message Actions", "", [
{
text: message.isRead ? "Mark as Unread" : "Mark as Read",
onPress: () => { message.isRead ? message.markAsUnread() : message.markAsRead() },
},
{
text: message.isArchived ? "Unarchive" : "Archive",
onPress: () => { if (!message.isArchived) message.markAsArchived() },
},
{ text: "Cancel", style: "cancel" },
])
} else {
ActionSheetIOS.showActionSheetWithOptions(
{
options: [
message.isRead ? "Mark as Unread" : "Mark as Read",
message.isArchived ? "Unarchive" : "Archive",
"Cancel",
],
cancelButtonIndex: 2,
destructiveButtonIndex: 1,
},
(i) => {
if (i === 0) message.isRead ? message.markAsUnread() : message.markAsRead()
else if (i === 1 && !message.isArchived) message.markAsArchived()
}
)
}
}

return (

<StatusBar barStyle="light-content" backgroundColor={"#0C111D} />

  <View style={styles.modalContainer}>
    <TouchableOpacity onPress={onClose} style={styles.closeButton}>
      <Ionicons name="close" size={24} color="#ffffff" />
    </TouchableOpacity>

    <View style={{ flex: 1 }}>
      <CourierInboxView
        style={{ flex: 1, backgroundColor: "#0C111D}}
        theme={{
          light: lightTheme,
          dark: darkTheme,
        }}
        onClickInboxMessageAtIndex={async (message, index) => {
          __DEV__ && console.tron.log("📩 Inbox message clicked:", {
            index,
            id: message.messageId,
            title: message.title,
            body: message.body,
            read: message.isRead,
            archived: message.isArchived,
          })
          message.isRead ? await message.markAsUnread() : await message.markAsRead()
        }}
        onLongPressInboxMessageAtIndex={(message) => {
          showMessageActions(message)
        }}
        onClickInboxActionForMessageAtIndex={(action, message, index) => {
          __DEV__ && console.tron.log("🎯 Action clicked:", action)
          __DEV__ && console.tron.log("📩 Action clicked:", {
            index,
            id: message.messageId,
            title: message.title,
            body: message.body,
            read: message.isRead,
            archived: message.isArchived,
          })
          onClose?.()
          onClickMessage?.(message)
        }}
      />

      {/* footer mask, also dark */}
      <View style={{ position: "absolute", bottom: 0, height: 60, left: 0, right: 0, backgroundColor: "#0C111D }} />
    </View>
  </View>
</Modal>

)
}

const styles = StyleSheet.create({
modalContainer: {
flex: 1,
backgroundColor: "#0C111D,
paddingTop: 50,
},
closeButton: {
padding: 10,
alignSelf: "flex-end",
},
})`