selectedIndex not working properly in iOS

[evrrnv]

it's working fine in index 0, but when I set different index, it appears as the video shows

ScreenRecording_12-22-2024.22-31-14_1.MP4

[kristof-kovacs]

Yup, experiencing the same, it is selecting an in between index on initial render if we do not render index 0

[lorenc-tomasz]

Try to change:
const [scrollY] = useState(new Animated.Value(0));

into:

const [scrollY] = useState(new Animated.Value((selectedIndex ?? 0) * itemHeight));

inside WheelPicker.tsx

[blue86321]

I have the similar issue when switch to React Native hermes engine.

Possible Root Cause

I doubt it's because in WheelPicker.tsx, the useEffect for scrollToIndex finishes before animated attributes (e.g. scale) in WheelPickerItem.tsx ready.

react-native-wheely/src/WheelPicker.tsx

Lines 105 to 114 in 4a13bfb

	/**
	* If selectedIndex is changed from outside (not via onChange) we need to scroll to the specified index.
	* This ensures that what the user sees as selected in the picker always corresponds to the value state.
	*/
	useEffect(() => {
	flatListRef.current?.scrollToIndex({
	index: selectedIndex,
	animated: false,
	});
	}, [selectedIndex]);

react-native-wheely/src/WheelPickerItem.tsx

Lines 76 to 94 in 4a13bfb

	const scale = relativeScrollIndex.interpolate({
	inputRange: (() => {
	const range = [0];
	for (let i = 1; i <= visibleRest + 1; i++) {
	range.unshift(-i);
	range.push(i);
	}
	return range;
	})(),
	outputRange: (() => {
	const range = [1.0];
	for (let x = 1; x <= visibleRest + 1; x++) {
	const y = scaleFunction(x);
	range.unshift(y);
	range.push(y);
	}
	return range;
	})(),
	});

Potential Solution

Therefore, I add a setTimeout in useEffect to put this method into microtask queue, which solves my problem.

Here is the patch:

diff --git a/lib/WheelPicker.js b/lib/WheelPicker.js
index 575325b00e392692a69016b0e66b08c57825b229..9171f6d218b927fb5cc1517cd4267a9fe42ec8f9 100644
--- a/lib/WheelPicker.js
+++ b/lib/WheelPicker.js
@@ -67,11 +67,15 @@ const WheelPicker = ({ selectedIndex, options, onChange, selectedIndicatorStyle
      * This ensures that what the user sees as selected in the picker always corresponds to the value state.
      */
     (0, react_1.useEffect)(() => {
-        var _a;
-        (_a = flatListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex({
-            index: selectedIndex,
-            animated: false,
-        });
+        var timer = setTimeout(() => {
+            var _a;
+            
+            (_a = flatListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex({
+                index: selectedIndex,
+                animated: false,
+            });
+        }, 0);
+        return () => clearTimeout(timer);
     }, [selectedIndex]);
     return (react_1.default.createElement(react_native_1.View, Object.assign({ style: [WheelPicker_styles_1.default.container, { height: containerHeight }, containerStyle] }, containerProps),
         react_1.default.createElement(react_native_1.View, { style: [

Result

Before	After

[lorenc-tomasz]

I initially used timer fix, but on some devices and cases it was not working at the end. I guess it can be combined with what I proposed. Nevertheless interesting case :)

[blue86321]

I initially used timer fix, but on some devices and cases it was not working at the end. I guess it can be combined with what I proposed. Nevertheless interesting case :)

@lorenc-tomasz
sad to hear that :(
I firstly tried your solution, but it does not work for my usecase.

I wrapped WheelPicker to make component easier to use. I init with 0 at first, then I use a useEffect to update it.

If I use your solution, which does not make any difference since it's initial value is 0. that's why I think from the useEffect part.

export default function MyWheelPicker({ value, ... }) {
  const [selectedIndex, setSelectedIndex] = useState(0);

  useEffect(() => {

    // get index by value...

    setSelectedIndex(index);
  }, [indexDataMap, value]);

  ...

  return (
    <WheelPicker
      selectedIndex={selectedIndex}
      ...
    />
  );
}

[lorenc-tomasz]

So it depends on the use case. Good to know.

[enrickdaltro]

I don't have a solution yet, but I wanted to +1 on having this issue not only when loading the list but also when onChange is called. I've tried the solutions mentioned in here (and also this one), as well as trying to figure it out myself, but no success so far. I'll update the thread with a solution if I find one

Edit: The fix @lorenc-tomasz suggested solved the issue for me! Thanks

Screen.Recording.2025-08-29.at.15.55.55.mov