I want to share a component in another, whats the ...

# decompose

[Vaibhav Jaiswal]

I want to share a component in another, whats the best way of doing it?

- home component
---- news component
- filter component

I want to use the news component in filter, how can i do it?
News component is a part of the navigation created in home

i want to use the same instance in filter news

[Arkadii Ivanov]

If you want to use the same instance of News component in Filter component, then that instance has to be created in the common parent component hosting both Home And Filter components.

[Arkadii Ivanov]

If News component is part of the navigation in Home component, then this means that News is not always available, right? Then how it can be used in any other component outside of Home?

[Vaibhav Jaiswal]

The feature is like
Filters component sets the data to a stateflow of NewsComponent

Filters is navigated from HomeScreen when NewsTab is visible

[Vaibhav Jaiswal]

What ive done, is in HomeComponent
After creating NewsComponent. Saving it in a lateinit var inside the CompanionObject of HomeComponent

And accessing it inside RootComponent like HomeComponent.newsComponent

Is this the correct approach?

[Vaibhav Jaiswal]

As NewsComponent uses some internal properties of HomeComponent, so creating its instance in RootComponent is not possible

[Arkadii Ivanov]

After creating NewsComponent. Saving it in a lateinit var inside the CompanionObject of HomeComponent

I strongly advice against this approach. With Decompose we can leverage DI (i.e. passing objects via constructors).

It looks like you can pass a callback to Filter component, and once new filters are confirmed and the screen is closed you can send an event to News to apply the new filters.

[Vaibhav Jaiswal]

I tried that by passing a lambda function to FilterComponent but it did not work

Ill try by passing callback using interface, that should work

[Arkadii Ivanov]

Usually you just pass it via constructor, like

FilterComponent(onConfirmed= {...})

No need to put the callback into a configuration class, just pass directly via constructor.

[Vaibhav Jaiswal]

Understood
Thanks, ill try it out

[Vaibhav Jaiswal]

Even like this
I still have to keep the instance of NewsComponent in the companion object of HomeComponent

[Vaibhav Jaiswal]

Only then i can pass callback to FilterComponent's constructor

[Vaibhav Jaiswal]

I tried like this initially, this way keeping instance of NewsComponent was not required, but it did not work

https://kotlinlang.slack.com/archives/C03H3N51SKT/p1704275845221209?thread_ts=1704275845.221209&cid=C03H3N51SKT

[Arkadii Ivanov]

I believe you are doing something incorrect, definitely. It should be possible to communicate via callbacks.

[Arkadii Ivanov]

You can pass a callback to Home component like this:

HomeComponent(onFiltersRequested= {})

Then push filters when the callback is called.

Then when Filters confirmed, just call a method directly on Home component.

See https://arkivanov.github.io/Decompose/navigation/stack/overview/#delivering-a-result-when-navigating-back

[Vaibhav Jaiswal]

For this, I have to keep the filters stateFlow in RootComponent, and pass it to HomeComponent/NewsComponent and FilterComponent,


What i was saying is to achieve
FilterComponent(onSelected = {newsComponent.select(...) })
I'd need reference to the HomeComponent/NewsComponent in RootComponent

[Arkadii Ivanov]

I'd need reference to the HomeComponent/NewsComponent in RootComponent

This looks correct, since RootComponent is the hosting component for both.