In-app UI
Feeds
Styling

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:

  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.

iOS

#

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

Android

#

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

React Native

#

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