Navigation | Chat Jetpack Compose SDK

Chat UIKit Jetpack Compose v3

Chat UIKit Jetpack Compose

Chat UIKit

Jetpack Compose

Version 3

Navigation in Sendbird UIKit for Jetpack Compose controls the transition between screens. This document explains how to use UIKit for Jetpack Compose's navigation.

Integrate with your screen

UIKit for Jetpack Compose provides Nested navigation graph to insert UIKit for Jetpack Compose screens in the middle of your screen transition.

To use it, initialize navigation using NavHost and insert the screens you've created with UIKit for Jetpack Compose through sendbirdGroupChannelNavGraph.

Kotlin

val navController = rememberNavController()
NavHost(
    navController = navController,
    startDestination = "YourStartDestination"
) {
    // Add Sendbird UIKit for Jetpack Compose nested navigation graph.
    sendbirdGroupChannelNavGraph(navController)

    composable("YourRoute1") {
        YourScreen1(
            // Navigate to Sendbird channels screen.
            onSendbirdChannelsRoute = {
                navController.navigateToChannels()
            }
        )
    }

    composable("YourRoute2") {
        YourScreen2()
    }
}

How to change the starting screen

To change the starting screen of UIKit for Jetpack Compose, change startDestination. The starting screen of the UIKit is SendbirdNavigationRoute.Channels, which displays a list of channels. In this example, the starting screen is changed to SendbirdNavigationRoute.Channel.

Kotlin

val navController = rememberNavController()
NavHost(
    navController = navController,
    // Change the start destination to Sendbird GroupChannel Navigation graph route.
    startDestination = SendbirdNavigation.GroupChannel.route
) {
    sendbirdGroupChannelNavGraph(
        navController,
        // Change the start destination to Sendbird Channel screen route.
        startDestination = SendbirdNavigationRoute.Channel(
            // Channel URL to navigate to.
            channelUrl = "channelUrl"
        ),
    )

    composable("YourRoute1") {
        YourScreen1()
    }

    composable("YourRoute2") {
        YourScreen2()
    }
}

How to customize a screen in UIKit

To customize a specific screen in UIKit for Jetpack Compose, use sendbirdGroupChannelNavGraph to insert the screen and customize it. This example customizes ChannelScreen. For further customization, refer to the Messages guide.

Kotlin

val navController = rememberNavController()
NavHost(
    navController = navController,
    startDestination = "YourStartDestination"
) {
    sendbirdGroupChannelNavGraph(
        navController = navController,
        channelScreen = { channelUrl ->
            // Define your custom ChannelScreen.
            CustomChannelScreen(
                navController, 
                channelUrl
            )
        }
    )

    composable("YourRoute1") {
        YourScreen1()
    }

    composable("YourRoute2") {
        YourScreen2()
    }
}

// Customize the ChannelScreen.
@Composable
fun CustomChannelScreen(
    navController: NavController,
    channelUrl: String
) {
    ChannelScreen(
        navController = navController,
        channelUrl = channelUrl
    )
}

Routes

UIKit for Jetpack Compose provides the following Routes:

Route	Description
SendbirdNavigation.GroupChannel	Sendbird GroupChannel Navigation graph route
SendbirdNavigationRoute.Channel	Sendbird Channel screen route
SendbirdNavigationRoute.Channels	Sendbird Channels screen route
SendbirdNavigationRoute.ChannelCreation	Sendbird Create Channel screen route
SendbirdNavigationRoute.UserInvitation	Sendbird Invite Users screen route
SendbirdNavigationRoute.Members	Sendbird Member List screen route
SendbirdNavigationRoute.ChannelSettings	Sendbird Channel Settings screen route

Extension functions

To use UIKit for Jetpack Compose's Routes in your code, you can use the following extension functions:

Extension function	Description
NavGraphBuilder.sendbirdGroupChannelNavGraph()	Add Sendbird GroupChannel Navigation graph
NavController.navigateToChannel(channelUrl: String)	Move to Sendbird Channel screen
NavController.navigateToChannels()	Move to Sendbird Channels screen
NavController.navigateToChannelCreation()	Move to Sendbird Channel creation screen
NavController.navigateToUserInvitation(channelUrl: String)	Move to Sendbird Invite users screen
NavController.navigateToMembers(channelUrl: String)	Move to Sendbird Members screen
NavController.navigateToChannelSettings(channelUrl: String)	Move to Sendbird Channel settings screen

Migrate UIKit for Jetpack Compose in Views

To use UIKit for Jetpack Compose screens in your Activity or Fragment, you need to wrap the UIKit's Nested navigation graph with Activity or Fragment and initialize the screens through it.

The following codes show how to migrate the UIKit's screen into Activity and Fragment.

Into Activity

Kotlin

class SendbirdGroupChannelActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()
            NavHost(
                navController = navController,
                startDestination = SendbirdNavigation.GroupChannel.route
            ) {
                sendbirdGroupChannelNavGraph(navController)
            }
        }
    }
}

Into Fragment

Kotlin

class SendbirdGroupChannelFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            // Dispose of the Composition when the view's 
            // LifecycleOwner is destroyed.
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                val navController = rememberNavController()
                NavHost(
                    navController = navController,
                    startDestination = SendbirdNavigation.GroupChannel.route
                ) {
                    sendbirdGroupChannelNavGraph(navController)
                }   
            }
        }
    }
}

On this page

Integrate with your screen

How to change the starting screen How to customize a screen in UIKit Routes Extension functions

Migrate UIKit for Jetpack Compose in Views

Into Activity Into Fragment

Sample app