Styling

Knock provides extensive styling capabilities for feed-based components across all supported platforms (Web, iOS, Android, and React Native). This page covers the various ways you can customize the appearance of your in-app feeds to match your application's design system.

For web applications using Knock's React SDK, you have several options for customizing the feed UI:

1. 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.

2. 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.

3. Component customization: You can customize individual components through props:

   • NotificationCell: Customize the rendering of notification cells using the renderItem prop
   • Avatar: Customize the avatar component within notification cells
   • NotificationIconButton: Customize the notification icon and badge count type
   • colorMode: Support for both light and dark modes

For more detailed information about React component customization, see our feed UI/UX override docs.

For iOS applications, Knock provides the InAppFeedTheme class for comprehensive UI customization:

1. Feed theme properties:

   • rowTheme: Customize row items using FeedNotificationRowTheme
   • titleString: Customize or hide the feed title
   • titleFont and titleColor: Customize title appearance
   • upperBackgroundColor and lowerBackgroundColor: Customize feed sections

2. Row theme properties:

   • showAvatarView: Toggle avatar visibility
   • avatarViewTheme: Customize avatar appearance
   • notificationContentCSS: Customize notification body styling
   • backgroundColor: Set row background color
   • markAsReadSwipeConfig and archiveSwipeConfig: Customize swipe actions
   • unreadNotificationCircleColor: Customize unread indicators
   • Customizable action button styles for primary, secondary, and tertiary actions

For more detailed information about iOS customization, see our iOS customization documentation.

For Android applications, Knock provides similar theming capabilities through the InAppFeedTheme class:

1. Feed theme properties:

   • rowTheme: Customize row items using FeedNotificationRowTheme
   • filterTabTheme: Customize filter tabs
   • titleString: Customize or hide the feed title
   • textStyle: Customize title text style
   • upperBackgroundColor and lowerBackgroundColor: Customize feed sections

2. Row theme properties:

   • backgroundColor: Set row background color
   • bodyTextStyle: Customize message body text
   • unreadNotificationCircleColor: Customize unread indicators
   • showAvatarView: Toggle avatar visibility
   • avatarViewTheme: 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 documentation.

For React Native applications, Knock provides style customization through several theme objects:

1. Notification feed cell style:

   • unreadNotificationCircleColor: Customize unread indicators
   • showAvatarView: Toggle avatar visibility
   • avatarViewStyle: Customize avatar appearance
   • Customizable action button styles for primary, secondary, and tertiary actions
   • sentAtDateFormatter and sentAtDateTextStyle: Customize timestamp appearance
   • htmlStyles: Customize HTML content styling

2. Empty notification feed style:

   • Customize empty state appearance with title, subtitle, and icon
   • Customizable text and icon styles

3. Action button style:

   • Customize button container, text, and icon styles

4. Avatar view style:

   • Customize container, image, and text styles for avatars

For more detailed information about React Native customization, see our React Native customization documentation.

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 documentation.