Exporting focusableComponents object from SpatialNavigation

[AdamWu91]

I was trying to create navigation for my product. The case was to have two navigation elements highlighted (one of them focused). I needed to have access to all of navigation components to do that. However it was missing in my context. I came up with the solution to export focusableComponents from SpatialNavigation in index.js file. Please consider introducing this idea in your master branch or show me another way to achieve my goal.

The attached animation shows working solution with exported focusableComponents. As you can see element on left list is focused and the corresponding element on the right is highlighted.

[asgvard]

Hi.

If I understand the problem, it can be solved by subscribing to "onBecameFocused" callback of each Category and then updating the local state in your parent component to save the "currently focused Category" index or ID to highlight the corresponding item to the left.

[AdamWu91]

Thanks for a quick response. I thought about that but its not working as the element on the right never gets focused. When the left navigation element is active the focus is set on it allowing to navigate up and down the list.

[asgvard]

So you have one list that contains focusable elements (list to the left) and another scrolling view on the right that kind of "reacts" to focus changes when you move between items to the left? I still think it's enough to just subscribe to onBecameFocused and then highlight/scroll to the Category on the right side. There is one list that is "leading", and another one is "following" the focus changes if I understand correctly.

[AdamWu91]

I think you understand the problem correctly. However I want to be clear that the right column is also a navigation element. When I move to the right column there should be a separate navigation logic which is not the case of this problem.

I'm attaching the animation where first I move up and down the navigation on left and then I move to right navigation to navigate in items in categories.

[predikament]

I think you understand the problem correctly. However I want to be clear that the right column is also a navigation element. When I move to the right column there should be a separate navigation logic which is not the case of this problem. ...

Hello @AdamWu91!

Did you manage to resolve this issue?

We've implemented more or less a verbatim copy of what your animation shows in several applications and have not experienced the same problem, so I hope @asgvard's input above was clarification enough to get it working for you as intended.

If you are still stuck then please let us know and we'll do our best to help. It might be we are somehow misunderstanding the issue at hand.

Thanks, @predikament

[AdamWu91]

Hi,

The propose solution is not working for me. Could you send a code snippet of your implementation? This may clarify more what you had in mind, maybe I'm doing something wrong.

Thanks for your time!

[predikament]

Hi,

The propose solution is not working for me. Could you send a code snippet of your implementation? This may clarify more what you had in mind, maybe I'm doing something wrong.

Thanks for your time!

Hello again, @AdamWu91,

Sorry the solution does not seem to be working for you.

I would share a code-snippet, but our implementations are used primarily in proprietary customer solutions that we cannot really share openly.

Could we perhaps ask you to share a snippet of your current solution and we will do our best to point out what might need to be done to get it working as you intend?

Thanks in advance.