Handling interactivity

Knock enables you to build engaging in-app feed experiences with a rich set of interactivity features across all supported platforms (Web, iOS, Android, and React Native). This guide covers the various ways you can handle user interactions with your feed components.

All Knock feed components support handling user interactions through click/tap events:

1<NotificationFeed
2  onNotificationClick={(item) => {
3    // Handle notification cell click
4  }}
5  onNotificationButtonClick={(item, button) => {
6    // Handle button click within notification
7  }}
8/>

1KnockInAppFeedView()
2    .onReceive(viewModel.didTapFeedItemButtonPublisher) { actionString in
3        // Handle button tap
4    }
5    .onReceive(viewModel.didTapFeedItemRowPublisher) { item in
6        // Handle row tap
7    }

1feedViewModel.didTapFeedItemRowPublisher
2    .onEach { feedItem ->
3        // Handle feed item row tap
4    }
5    .launchIn(this)
6
7feedViewModel.didTapFeedItemButtonPublisher
8    .onEach { feedItemButtonEvent ->
9        // Handle button tap
10    }
11    .launchIn(this)

1<NotificationFeed
2  onRowTap={(item) => {
3    // Handle row tap
4  }}
5  onCellActionButtonTap={({ button, item }) => {
6    // Handle button tap
7  }}
8/>

Knock supports automatic URL handling for notifications:

1. Action URLs. You can specify an action_url in your notification template, and Knock will automatically handle redirects when users interact with the notification.

2. Custom URL handling. You can implement custom URL handling logic in your click handlers to control navigation behavior.

Knock provides built-in state management for notification interactions:

1. Mark as read. Notifications can be automatically marked as read when:

   • The feed is opened
   • A notification is clicked
   • A button within a notification is clicked

2. Mark as seen. Notifications are automatically marked as seen when they appear in the feed viewport.

3. Archiving. Users can archive notifications through swipe actions or dedicated buttons.

For more detailed information about implementing interactivity in your specific platform, refer to the platform-specific docs:

• Web (React) feed docs
• iOS customization
• Android customization
• React Native customization