Exporting focusableComponents object from SpatialNavigation about react-spatial-navigation HOT 7 CLOSED

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.

from react-spatial-navigation.

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.

from react-spatial-navigation.

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.

from react-spatial-navigation.

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.

from react-spatial-navigation.

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

from react-spatial-navigation.

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!

from react-spatial-navigation.

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.

from react-spatial-navigation.