Using AndroidFragment inside Compose BottomNavigation gets recreated

I have a MainActivity using Jetpack Compose to set up a Scaffold with a BottomBar. The BottomBar manages a NavHost containing composables, which include AndroidFragment.

When switching between tabs, I notice the fragments are recreated. How can I retain the fragments so they don’t reload their data?

internal fun NavGraph(
    navController: NavHostController,
    modifier: Modifier = Modifier
) {
    NavHost(
        navController = navController,
        modifier = modifier,
        startDestination = Screen.FrontPage
    ) {
        composable<Screen.FrontPage> {
            AndroidFragment(clazz = FrontPageFragment::class.java)
        }
        composable<Screen.LatestPage> {
            AndroidFragment(clazz = LatestPageFragment::class.java)
        }
    }
}

@AndroidEntryPoint
class MainActivity : BaseActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Theme {
                Content()
            }
        }
    }
}

@Composable
private fun Content() {
    val navController = rememberNavController()
    var isSelectedIndex by rememberSaveable { mutableIntStateOf(0) }

    val screens = listOf(
        Screen.FrontPage,
        Screen.LatestPage
    )

    Scaffold(
        bottomBar = {
            NavigationBar() {
                screens.forEach { screen ->
                    val currentIndex = screens.indexOf(screen)
                    NavigationBarItem(
                        icon = {
                            Image(
                                painter = painterResource(screen.icon),
                                contentDescription = null
                            )
                        },
                        label = { Text(screen.title) },
                        selected = isSelectedIndex == currentIndex,
                        onClick = {
                          isSelectedIndex = currentIndex
                          navController.navigate(screen)
                        },
                    )
                }
            }
        },
        content = { innerPadding ->
            NavGraph(
                navController = navController,
                modifier = Modifier.padding(innerPadding)
            )
        }
    )
}

You need to sign in to view this answers