Incorrect accessibility focus order for nested elements in React Native

Question

I'm working in a mixed-match app where we use React Native components for a few modules. In this case, I've a tableview in which we add RN components in a few of the cells.

I was able to enable accessibility for nested elements in those React Native components but the order of focus seems to be incorrect when added in a UITableView.

The view hierarchy would be like the below:

 <E0>
    <E1 accessible={true}>
       <E11 accessible={true}>
       <E12 accessible={true}>...
    <E2 accessible={true}>
       <E21 accessible={true}>
       <E22 accessible={true}>...

I'm expecting the focus order to be E1, E11, E12, E2, E21, E22

but it's announcing in the order E1, E2, E11, E12, E21, E22 ie, parent elements and then child elements

In iOS we have the accessibilityElements property to set the order. Is there any way to set the focus order like that in React Native, or is there any other way to achieve that?

P.S.: The same component works as expected, (ie. voiceover is announced in the correct order) when I display the particular component in a view controller.

Any timely help / useful suggestions would be greatly appreciated as I've spent more than a couple of days in this issue.

Answer 1

We transitioned our app to more of a green field RN app where we are not facing issues like this again. That might be the only solution AFAIK.