Is it possible to use a component into anothers without adding it as a child?

[Shahriyar13]

I have a ItemComponent, it's show the list of items and it own a store &...

I want to show it as a bottomsheet or dialog any where in other components without adding ItemComponent as a child because it can called from more than 5 components.

class ItemComponent(
    componentContext: ComponentContext,
    storeFactory: StoreFactory,
    val selectMode: Boolean = false,
    val searchValue: String?,
    private val output: (Output) -> Unit
): ComponentContext by componentContext {

    private val store =
        instanceKeeper.getStore {
            ItemStoreFactory(
                storeFactory = storeFactory,
                searchValue = searchValue,
                selectMode = selectMode,
            ).create()
        }

    @OptIn(ExperimentalCoroutinesApi::class)
    val state: StateFlow<ItemStore.State> = store.stateFlow

    fun onEvent(event: ItemStore.Intent) {
        store.accept(event)
    }

    fun onOutput(output: Output) {
        output(output)
    }

    sealed class Output {
        data class ItemsSelected(val items: List<Item>) : Output()

    }

} 

@Composable
internal fun ItemSelectScreen(component: ItemComponent) {
    val state by component.state.collectAsState()

    ItemSelectContent(
        state = state,
        onEvent = component::onEvent,
        onOutput = component::onOutput
    )
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
internal fun ItemSelectContent(
    state: ItemStore.State,
    onEvent: (ItemStore.Intent) -> Unit,
    onOutput: (ItemComponent.Output) -> Unit,
) {
    val modalBottomSheetState = rememberModalBottomSheetState()

    ModalBottomSheet(
        onDismissRequest = {
            onOutput(ItemComponent.Output.ItemsSelected(state.selected))
        },
        sheetState = modalBottomSheetState,
        dragHandle = { BottomSheetDefaults.DragHandle() },
    ) {
        ...
        SimplePagingVerticalGrid(
            itemList = state.list,
            loadMoreItems = {
                if (state.list.isEmpty()) return@SimplePagingVerticalGrid
                val nextPage = state.page + 1
                onEvent(ItemStore.Intent.LoadByPage(page = nextPage))
            },
            isLoading = state.isLoading,
        ) { item, brush ->
            SimpleListItemContent(
                onClick = {
                    if (state.selectMode) {
                        onEvent(ItemStore.Intent.UpdateSelected(item = item))
                    } else {
                        item.id?.let {
                            onEvent(ItemStore.Intent.Edit(id = item.id))
                        }
                    }
                },
                ....
            )
        }
    }
}

Now I want show this from every where I called, but I don't know what is a best practice to create a component instance and show it in UI.

[arkivanov]

I want to show it ... in other components without adding ItemComponent as a child because it can called from more than 5 components.

What prevents you from adding ItemComponent as a child in all components where it needs to be shown? Do you mean you want to reuse one single instance of ItemComponent everywhere.

[Shahriyar13]

This is a my scenario:

MainComp --> Comp0 --> Comp01 --> CompX
                              \-> CompY

         \-> Comp1 --> Comp11 --> CompX
                              \-> CompY

                   \-> Comp12 --> CompX
                              \-> CompY
                  
         \-> Comp2 --> Comp21 --> CompX
                              \-> CompY

                   \-> Comp22 --> CompX
                              \-> CompY
                   
         \-> Comp3 --> Comp31 --> CompX
                              \-> CompY

                   \-> Comp32 --> CompX
                              \-> CompY

CompX & CompY are showing as a bottomSheet only on other components

should I add CompX & CompY to every of them?
if your answer is yes, what is the best practice?

All components (Except X Y) have their own StackNavigation, configs, child for their functionalities.

should I add a SlotNavigation, bottomSheetConfig, bottomSheetChild for each one to use CompY,X?

[arkivanov]

Thanks for the detailed description. I believe there could be multiple solutions.

1. The first solution that comes to mind is to extract CompX and CompY into a separate component (say CompXY). CompXY would have its own Child Slot, Config and Child sealed classes. Then you could just reuse CompXY in all your Comp01, Comp11, Comp12, etc. You can also have separate CompXYContent Composable function with bottom sheets.
2. Another solution could moving CompX and CompY to MainComp. But this again depends on the use case.
3. It is also possible to extract Config and Child sealed classes for CompX and CompY somewhere in common place. Then you will only need to use childSlot function in hosting components, but the rest will be reused.
4. Having separate Child Slots, Config and Child sealed classes in every hosting component is also an option. There will be duplicated code, but on the other hand there will be no coupling between Comp01, Comp11, Comp12, etc. This may positively impact scalability.