New Arch - iOS scroll issue

[Alaa-Ben]

Hey again !

Just reporting an issue I've encountered after enabling new arch on iOS:

https://github.com/user-attachments/assets/e29d64cf-b6c7-40a6-bd6c-83da2d4368cf

As you can see, the middle one is behaving nicely, whilst the other two are having some troubles stoping on the closest element.

The following error is also being printed to the console:

  let props = {key: someKey, item: ..., index: ..., faces: ..., renderItem: ..., itemTextStyle: ...};
  <PickerItemContainer {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {item: ..., index: ..., faces: ..., renderItem: ..., itemTextStyle: ...};
  <PickerItemContainer key={someKey} {...props} />

Don't have time to investigate this right now (hopefully fixing the error logged above fixes the issue), but wanted to report this anyways, thanks a lot !

[rozhkovs]

Thanks for the issue!

A very interesting problem... I have a suspicion that this is related to ScrollView itself. As soon as I have time, I will try to watch it.

The warning in the console should not affect this behavior in theory.

[Alaa-Ben]

Well hopefully it's a quick one to fix 🤞

[rozhkovs]

@Alaa-Ben What is the version of react-native?

[Alaa-Ben]

rn: 0.75.2 expo: 51.0.32

[rozhkovs]

rn: 0.75.2

expo: 51.0.32

I think this problem may be React Native. Have you tried version 0.76.0? Since this version, the new architecture is considered stable.

[Alaa-Ben]

Hmm I'm using Expo for now, so gotta wait for v52. I'll post here as soon as it's out !

[Alaa-Ben]

Just tried on 0.76, same issue :/ (again iOS only, Android works as expected) So a bit blocking for anyone trying to use the new arch (which as you said will be the default option starting from 0.76)

[rozhkovs]

@Alaa-Ben Thank you for checking it out! This, of course, is not the best news itself.) Do you use virtualization? How can this problem be easily reproduced? Are you using the latest version of the library (1.2.1)? There were changes that could potentially fix this. I'll try to sort it out this weekend.

[rozhkovs]

I did a quick experiment... Very strange behavior. It depends on which flexDirection is set for the parent View.

• column — does not work
• row — works.

If you delete the width property, 2 options work.)

<View style={{flexDirection: 'row'}}> // or column
  <WheelPicker
      onValueChanged={onValueChangedEx}
      value={value}
      width={100}
      data={items}
   />
   <Text>1</Text>
</View>

[rozhkovs]

The behavior depends on the combinations of flexDirection, width and <Text>1</Text> (whether there is or not).

UPD: the behavior depends on the layout...

[Alaa-Ben]

Do you use virtualization?

Yes

How can this problem be easily reproduced?

Yes, I'm not doing much. Judging by your comment above, you managed to reproduce it as well.

Are you using the latest version of the library (1.2.1)?

Yes.