Styling
Learn about how you can style the interface of your in-app feeds.
Knock provides extensive styling capabilities for feed-based components across all supported platforms (Web, iOS, Android, and React Native). This guide covers the various ways you can customize the appearance of your in-app feeds to match your application's design system.
Styling our pre-built components#
Web (React)#
For web applications using Knock's React SDK, you have several options for customizing the feed UI:
-
CSS variables: The feed uses CSS variables that you can override to align with your product's design. All variables are prefixed with
--rnf-
. You can find the complete list of available variables in the theme.css source code. -
Custom CSS: You can completely replace Knock's CSS to tailor the feed's look. All feed classes are unique and start with
rnf-
. View the component source code for class details. -
Component customization: You can customize individual components through props:
NotificationCell
: Customize the rendering of notification cells using therenderItem
propAvatar
: Customize the avatar component within notification cellsNotificationIconButton
: Customize the notification icon and badge count typecolorMode
: Support for both light and dark modes
For more detailed information about React component customization, see our feed UI/UX override docs.
iOS#
For iOS applications, Knock provides the InAppFeedTheme
class for comprehensive UI customization:
-
Feed theme properties:
rowTheme
: Customize row items usingFeedNotificationRowTheme
titleString
: Customize or hide the feed titletitleFont
andtitleColor
: Customize title appearanceupperBackgroundColor
andlowerBackgroundColor
: Customize feed sections
-
Row theme properties:
showAvatarView
: Toggle avatar visibilityavatarViewTheme
: Customize avatar appearancenotificationContentCSS
: Customize notification body stylingbackgroundColor
: Set row background colormarkAsReadSwipeConfig
andarchiveSwipeConfig
: Customize swipe actionsunreadNotificationCircleColor
: Customize unread indicators- Customizable action button styles for primary, secondary, and tertiary actions
For more detailed information about iOS customization, see our iOS customization guide.
Android#
For Android applications, Knock provides similar theming capabilities through the InAppFeedTheme
class:
-
Feed theme properties:
rowTheme
: Customize row items usingFeedNotificationRowTheme
filterTabTheme
: Customize filter tabstitleString
: Customize or hide the feed titletextStyle
: Customize title text styleupperBackgroundColor
andlowerBackgroundColor
: Customize feed sections
-
Row theme properties:
backgroundColor
: Set row background colorbodyTextStyle
: Customize message body textunreadNotificationCircleColor
: Customize unread indicatorsshowAvatarView
: Toggle avatar visibilityavatarViewTheme
: Customize avatar appearance- Customizable action button styles
- Swipe action configurations for mark as read/unread and archive/unarchive
For more detailed information about Android customization, see our Android customization guide.
React Native#
For React Native applications, Knock provides style customization through several theme objects:
-
Notification feed cell style:
unreadNotificationCircleColor
: Customize unread indicatorsshowAvatarView
: Toggle avatar visibilityavatarViewStyle
: Customize avatar appearance- Customizable action button styles for primary, secondary, and tertiary actions
sentAtDateFormatter
andsentAtDateTextStyle
: Customize timestamp appearancehtmlStyles
: Customize HTML content styling
-
Empty notification feed style:
- Customize empty state appearance with title, subtitle, and icon
- Customizable text and icon styles
-
Action button style:
- Customize button container, text, and icon styles
-
Avatar view style:
- Customize container, image, and text styles for avatars
For more detailed information about React Native customization, see our React Native customization guide.
Building your own UI components#
You can build your own UI components and use them with Knock in a headless way. This approach allows you to leverage Knock's powerful in-app messaging infrastructure while maintaining full control over your UI design.
For more information, see our custom UI guide.