React Native nextFocusRight Prop on an TouchableOpacity is not working

Question

I'm trying to stop focus propagating from the last element in React Native using nextFocusRight but still, the focus propagates to the next view. According to this pull request, it should be working but still, I'm facing the same issue

My code: App.js

export default class App extends Component {

  render() {
    const data = [];
    for (let i = 0; i < 10; i++)
      data.push(i);

    return (
      <View>
        <View>
          {[1, 2].map(() => (
            <ScrollView horizontal style={{ height: 210 }}>
              {data.map(i => <Item id={i} buttonRef={this.buttonRef} />)}
            </ScrollView>
          ))}

        </View>
      </View>
    );
  }
}

Item.js

export default class Item extends Component {
    myRef = null;

    componentDidMount() {
        const { id } = this.props;
        if (id == 0) {
            this.myRef.setNativeProps({ nextFocusLeft: findNodeHandle(this.myRef) })
        } else if (id == 9) {
            this.myRef.setNativeProps({ nextFocusRight: findNodeHandle(this.myRef) })
        }
    }

    render() {
        const { id } = this.props;
        return (
            <TouchableOpacity
                key={id}
                ref={(c) => this.myRef = c}
            >
                <View
                    style={{
                        backgroundColor: 'grey',
                        width: 100,
                        height: 100,
                    }}
                >
                    <Text style={{ fontSize: 60 }}>{id}</Text>
                </View>
            </TouchableOpacity>
        )
    }

}

What is wrong here? Does anybody knows?

Answer 1

Yesterday React-Native released 0.60.0 fixing this bug. It's not mentioned in the changelog but they have fixed it in 0.60.0.

For those of you who are using 0.59.9 or lesser, please upgrade your project to 0.60.0.