react-native-native-select 1.2.1 → 2.0.2

package/README.md

@@ -30,7 +30,7 @@ There is no JS rendering logic in this package. When your user opens the list, t
 | :--- | :--- | :--- | :--- |
 | iOS | `dropdown` | A real `UIMenu` built from `UIAction`s, attached to a `UIButton` with `showsMenuAsPrimaryAction = YES` (iOS 14+). The selected row carries `UIMenuElementStateOn`, so the system draws its own checkmark. | `ios/RTNSelect.mm` |
 | iOS | `dialog` (default) | `UIPickerView`, the classic wheel, with this view as its own dataSource and delegate. | `ios/RTNSelect.mm` |
-| Android | any | `AppCompatSpinner` with an `ArrayAdapter` over the platform `simple_spinner_item` and `simple_spinner_dropdown_item` layouts. | `android/src/main/java/com/rtnselect/SelectView.java` |
+| Android | any | `AppCompatSpinner`, pinned to `MODE_DROPDOWN` so the host app's theme cannot switch it to a dialog, with an `ArrayAdapter` over the platform `simple_spinner_item` and `simple_spinner_dropdown_item` layouts. | `android/src/main/java/com/rtnselect/SelectView.java` |
 
 On iOS a single `RCTViewComponentView` holds both the picker and the button, and `mode` decides which one is hidden. Nothing is custom-drawn on either platform: no `Modal`, no `FlatList`, no wheel re-implemented in JS.
 
@@ -59,7 +59,7 @@ If you need any of the features in the right-hand columns, use one of those libr
 
 ## Requirements
 
-* **React Native:** `>= 0.71.0` (declared as a peer dependency, along with `react`).
+* **React Native:** `>= 0.80.0` (declared as a peer dependency, along with `react`). The codegen spec imports `codegenNativeComponent` and the `CodegenTypes` namespace from the `react-native` root, which only re-exports them from 0.80 onward. On 0.71-0.79, use `1.2.1`.
 * **Architecture:** the New Architecture, enabled. `RCT_NEW_ARCH_ENABLED=1` must have been set when you ran `pod install`.
 * **iOS:** 14.0+ for `dropdown` mode, since `UIMenu` and `showsMenuAsPrimaryAction` are gated behind an availability check. The podspec deployment target is 11.0, and `dialog` mode works all the way down.
 * **Android:** `compileSdkVersion` and `targetSdkVersion` default to 31 and `minSdkVersion` to 21, each read through `safeExtGet` so your root `ext` values win.
@@ -238,8 +238,8 @@ Three details make the difference between this working and nearly working:
 | Prop | Type | Required | Description |
 | :--- | :--- | :---: | :--- |
 | **`options`** | `ReadonlyArray<string>` | **Yes** | The rows to display. Strings only. |
-| **`selectedIndex`** | `number` | No | Index of the selected row. The native views start at `0`. Behaves as a controlled value on iOS; see the Android caveat below. |
-| **`mode`** | `'dialog' \| 'dropdown'` | No | **iOS only.** `dialog` (the codegen default) uses `UIPickerView`, the classic wheel. `dropdown` uses the iOS 14+ `UIMenu` pull-down. Ignored on Android, which always draws its spinner. |
+| **`selectedIndex`** | `number` | No | Index of the selected row. The native views start at `0`. A negative index means "nothing selected yet" and is ignored rather than applied. |
+| **`mode`** | `'dialog' \| 'dropdown'` | No | **iOS only.** `dialog` (the codegen default) uses `UIPickerView`, the classic wheel. `dropdown` uses the iOS 14+ `UIMenu` pull-down. Ignored on Android, which always draws its spinner dropdown. |
 | **`textColor`** | `ColorValue` | No | **iOS only.** Overrides the text color of both the wheel and the button title. Defaults to `UIColor.labelColor`, which already follows light and dark mode, so set this only when you need to override the system. |
 | **`onValueChange`** | `(event) => void` | No | Fired on selection. Read `event.nativeEvent.value` (`string`) and `event.nativeEvent.index` (`number`). |
 | **`style`** | `ViewStyle` | No | Standard style prop. Give it a `width` and a `height`, or Flexbox constraints that produce them. |
@@ -255,9 +255,8 @@ onValueChange={(e) => {
 
 Nothing here is a bug to be fixed later, it is what wrapping two different OS widgets behind one component costs. Better said out loud.
 
-* **`mode` and `textColor` do nothing on Android.** In `SelectViewManager`, `setMode` has an empty body and `setTextColor` carries a comment saying so. They exist only because the codegen-generated `RTNSelectManagerInterface` requires them, and a missing method there is a build failure (that is exactly what v1.1.1 fixed). Style Android text through the overlay pattern instead.
-* **Android does not reliably reflect a controlled `selectedIndex`.** `AppCompatSpinner` owns its own selection state and the manager pushes the prop through `setSelection`, which posts the update to the next frame. Treat the Android widget as uncontrolled and render the current value yourself, which is the overlay pattern again.
-* **Writing `selectedIndex` on Android emits a change event.** `setSelection` reports back through `topValueChange` as well as the adapter's own `onItemSelected`, so a state update driven from JS can echo. If your handler does more than `setState`, guard it against the value it already holds.
+* **`mode` and `textColor` do nothing on Android.** In `SelectViewManager` both setters carry a comment saying so. They exist only because the codegen-generated `RTNSelectManagerInterface` requires them, and a missing method there is a build failure (that is exactly what v1.1.1 fixed). Style Android text through the overlay pattern instead.
+* **Android pins its spinner to `MODE_DROPDOWN`.** The mode an `AppCompatSpinner` takes otherwise comes from the host app theme's `spinnerStyle`. AppCompat's own sets `dropdown`, but a vendor theme can hand back `dialog`, where the popup is an `AlertDialog` built on the React context. Since 2.0.2 the view constructs itself in dropdown mode so the widget behaves the same on every device.
 * **Below iOS 14, `dropdown` degrades to an inert button.** Both `showsMenuAsPrimaryAction` and the menu construction sit behind `@available(iOS 14.0, *)`, so on iOS 11 to 13 the button renders with no menu attached. Use `dialog` if you still support those versions.
 * **iOS applies props on the main queue.** `updateProps` diffs `options`, `selectedIndex`, `mode` and `textColor`, then dispatches the UIKit work asynchronously. A `selectedIndex` change animates the wheel; expect the visual update one turn later, not synchronously with your `setState`.
 
@@ -368,7 +367,7 @@ Its `opacity` is `0` (or below `0.02`). See the overlay pattern section.
 Expected, they are iOS only. See Platform differences.
 
 **Android fires `onValueChange` when I set `selectedIndex` from JS.**
-Expected too, and documented in Platform differences. Guard your handler against a value that has not changed.
+Fixed in 2.0.2. A selection this component makes on your behalf no longer travels back as a change, and neither does the row-0 selection the adapter takes when it attaches.
 
 ## Contributing
 

package/android/src/main/java/com/rtnselect/SelectView.java

@@ -1,128 +1,162 @@
 package com.rtnselect;
 
 import android.content.Context;
-import android.util.AttributeSet;
-import android.util.Log;
 import android.view.View;
 import android.widget.AdapterView;
 import android.widget.ArrayAdapter;
-import androidx.annotation.Nullable;
+import android.widget.Spinner;
+
 import androidx.appcompat.widget.AppCompatSpinner;
 
-import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.bridge.WritableMap;
-import com.facebook.react.uimanager.events.RCTEventEmitter;
+import com.facebook.react.uimanager.UIManagerHelper;
+import com.facebook.react.uimanager.events.EventDispatcher;
 
+import java.util.ArrayList;
 import java.util.List;
 
 public class SelectView extends AppCompatSpinner implements AdapterView.OnItemSelectedListener {
 
-	private final String TAG = "RTNSelect";
+	/** No index yet. Distinct from 0, which is a legitimate selection. */
+	private static final int NO_SELECTION = -1;
+
+	private final List<String> options = new ArrayList<>();
+
+	/**
+	 * The index JS asked for. Fabric writes props in whatever order RawProps yields, so
+	 * `selectedIndex` regularly lands before `options` and there is no adapter to apply it to
+	 * yet. Holding it here and replaying it once the adapter exists makes prop order irrelevant.
+	 */
+	private int requestedIndex = NO_SELECTION;
+
+	/** The last index announced to JS, so an unchanged selection stays quiet. */
+	private int announcedIndex = NO_SELECTION;
+
+	/**
+	 * Set when the user opens the list. It is what tells a person's pick apart from a prop write,
+	 * and the two are otherwise indistinguishable: the spinner's popup reports the row the user
+	 * chose by calling this view's own `setSelection`, the very method the `selectedIndex` prop
+	 * arrives through. Emitting from `setSelection` unconditionally is why writing the prop used
+	 * to echo an onValueChange straight back to JS.
+	 */
+	private boolean openedByUser = false;
+
+	/**
+	 * React Native drives layout from the shadow tree and swallows a requestLayout() raised by a
+	 * child, so AbsSpinner.setAdapter's own request never produces a measure pass and the spinner
+	 * keeps drawing its previous row. Re-running measure and layout on our own frame is the
+	 * standard workaround on this platform; ReactPicker and ReactSwitch both carry it.
+	 */
+	private final Runnable measureAndLayout = new Runnable() {
+		@Override
+		public void run() {
+			measure(
+				MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),
+				MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY)
+			);
+			layout(getLeft(), getTop(), getRight(), getBottom());
+		}
+	};
 
 	public SelectView(Context context) {
-		super(context);
-		init();
-	}
-
-	public SelectView(Context context, @Nullable AttributeSet attrs) {
-		super(context, attrs);
-		init();
-	}
-
-	public SelectView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
-		super(context, attrs, defStyleAttr);
-		init();
-	}
-
-	private void init() {
-		this.setOnItemSelectedListener(this);
-		this.setBackground(null);
+		// MODE_DROPDOWN is pinned rather than inherited. An AppCompatSpinner fixes its mode at
+		// construction, and the mode it would otherwise take comes from the host app theme's
+		// spinnerStyle: AppCompat's own sets `dropdown`, but a vendor theme can hand back
+		// `dialog`, where the popup is an AlertDialog built on the React context. Pinning it makes
+		// the widget behave the same whatever theme it is dropped into.
+		super(context, null, androidx.appcompat.R.attr.spinnerStyle, Spinner.MODE_DROPDOWN);
+		setOnItemSelectedListener(this);
+		// The overlay pattern this component is built for puts an invisible Select on top of
+		// app-drawn chrome, so the platform spinner background and its arrow must not show through.
+		setBackground(null);
 	}
 
 	@Override
-	public boolean performClick() {
-		boolean result = super.performClick();
-		return result;
+	public void requestLayout() {
+		super.requestLayout();
+		post(measureAndLayout);
 	}
 
-	@Override
-	protected void onAttachedToWindow() {
-		super.onAttachedToWindow();
-	}
-
-	@Override
-	protected void onDetachedFromWindow() {
-		super.onDetachedFromWindow();
-	}
-
-	public void setOptions(List<String> options) {
+	public void setOptions(List<String> next) {
+		// Fabric re-applies every prop whenever any one of them changes, and callers routinely
+		// build this array inline, so an identical list arrives on most renders. Rebuilding the
+		// adapter for it would reset the spinner's own selection for nothing.
+		if (options.equals(next)) {
+			return;
+		}
+		options.clear();
+		options.addAll(next);
 
 		ArrayAdapter<String> adapter = new ArrayAdapter<>(getContext(), android.R.layout.simple_spinner_item, options);
 		adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
+		setAdapter(adapter);
 
-		this.setAdapter(adapter);
+		applyRequestedSelection();
 	}
 
 	@Override
 	public void setSelection(int position) {
+		boolean userPick = openedByUser;
+		openedByUser = false;
 
-		this.post(new Runnable() {
-			@Override
-			public void run() {
-				SelectView.super.setSelection(position);
-			}
-		});
-
-		ReactContext reactContext = (ReactContext) getContext();
-		if (reactContext != null) {
-			String val = "unknown";
-			if (getAdapter() != null && getAdapter().getCount() > position) {
-				Object item = getAdapter().getItem(position);
-				if (item != null) val = item.toString();
-			}
-
-			WritableMap event = Arguments.createMap();
-			event.putString("value", val);
-			event.putInt("index", position);
-
-			try {
-				reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
-					getId(),
-					"topValueChange",
-					event
-				);
-			} catch (Exception e) {
-			}
+		if (!userPick && requestedIndex == position) {
+			return;
+		}
+		requestedIndex = position;
+		applyRequestedSelection();
+
+		if (position < 0 || position == announcedIndex) {
+			return;
+		}
+		announcedIndex = position;
+		if (userPick) {
+			emitValueChange(position);
 		}
 	}
 
 	@Override
-	public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
-		String val = "null";
-		if (parent != null && parent.getItemAtPosition(position) != null) {
-			val = parent.getItemAtPosition(position).toString();
-		}
+	public boolean performClick() {
+		openedByUser = true;
+		return super.performClick();
+	}
 
-		ReactContext reactContext = (ReactContext) getContext();
-		if (reactContext != null) {
-			WritableMap event = Arguments.createMap();
-			event.putString("value", val);
-			event.putInt("index", position);
-
-			try {
-				reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
-					getId(),
-					"topValueChange",
-					event
-				);
-			} catch (Exception e) {
-			}
-		} else {
+	private void applyRequestedSelection() {
+		// A -1 is how callers spell "nothing selected yet" after an indexOf, and a spinner has no
+		// empty state. Forwarding it used to reach ArrayAdapter.getItem and take the host app down
+		// with IndexOutOfBoundsException.
+		if (requestedIndex < 0 || getAdapter() == null || requestedIndex >= getAdapter().getCount()) {
+			return;
 		}
+		if (getSelectedItemPosition() != requestedIndex) {
+			super.setSelection(requestedIndex);
+		}
+	}
+
+	@Override
+	public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
+		// Deliberately silent, and it leaves announcedIndex alone. Every selection that matters to
+		// JS already came through setSelection above, while this callback also fires for the row 0
+		// an attaching adapter picks on its own, which iOS never reports.
 	}
 
 	@Override
 	public void onNothingSelected(AdapterView<?> parent) {
 	}
+
+	private void emitValueChange(int index) {
+		if (index < 0 || index >= options.size()) {
+			return;
+		}
+		Context context = getContext();
+		if (!(context instanceof ReactContext)) {
+			return;
+		}
+		EventDispatcher dispatcher = UIManagerHelper.getEventDispatcher((ReactContext) context);
+		if (dispatcher == null) {
+			return;
+		}
+		dispatcher.dispatchEvent(
+			new ValueChangeEvent(UIManagerHelper.getSurfaceId(this), getId(), options.get(index), index)
+		);
+	}
 }

package/android/src/main/java/com/rtnselect/SelectViewManager.java

@@ -77,7 +77,11 @@ public class SelectViewManager extends SimpleViewManager<SelectView>
 
 	@Override
 	@ReactProp(name = "mode")
-	public void setMode(SelectView view, @Nullable String value) {}
+	public void setMode(SelectView view, @Nullable String value) {
+		// iOS-only feature: Android has one widget for both modes, and the view pins it to
+		// MODE_DROPDOWN so the host app's theme cannot change it. The method must exist to
+		// satisfy the interface generated by TypeScript.
+	}
 
 	@Override
 	@ReactProp(name = "textColor", customType = "Color")

package/android/src/main/java/com/rtnselect/ValueChangeEvent.java

@@ -0,0 +1,41 @@
+package com.rtnselect;
+
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.Event;
+
+/**
+ * The `onValueChange` payload, dispatched through the EventDispatcher so it reaches both
+ * architectures. The legacy `RCTEventEmitter` path this replaces only still worked under
+ * bridgeless through the `useFabricInterop` shim, which logs a soft exception per event and
+ * dispatches with a surface id of -1.
+ */
+public class ValueChangeEvent extends Event<ValueChangeEvent> {
+
+	public static final String EVENT_NAME = "topValueChange";
+
+	private final String value;
+	private final int index;
+
+	public ValueChangeEvent(int surfaceId, int viewId, String value, int index) {
+		super(surfaceId, viewId);
+		this.value = value;
+		this.index = index;
+	}
+
+	@Override
+	public String getEventName() {
+		return EVENT_NAME;
+	}
+
+	@Nullable
+	@Override
+	protected WritableMap getEventData() {
+		WritableMap event = Arguments.createMap();
+		event.putString("value", value);
+		event.putInt("index", index);
+		return event;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-native-select",
-	"version": "1.2.1",
+	"version": "2.0.2",
 	"description": "react-native-native-select is a strictly native, performant Select component for React Native built exclusively for the New Architecture.",
 	"main": "src/index.ts",
 	"react-native": "src/index.ts",
@@ -12,6 +12,7 @@
 		"ios",
 		"react-native-native-select.podspec",
 		"!android/build",
+		"!android/.gradle",
 		"!ios/build",
 		"!tests",
 		"!**/__tests__",
@@ -46,7 +47,7 @@
 	"homepage": "https://github.com/wneel/react-native-native-select#readme",
 	"peerDependencies": {
 		"react": "*",
-		"react-native": ">=0.71.0"
+		"react-native": ">=0.80.0"
 	},
 	"codegenConfig": {
 		"name": "RTNSelectSpec",

package/src/RTNSelectNativeComponent.ts

@@ -1,20 +1,18 @@
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import { codegenNativeComponent } from 'react-native';
 
-import type { ColorValue, HostComponent } from 'react-native';
-import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type { Int32, DirectEventHandler, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+import type { CodegenTypes, ColorValue, HostComponent, ViewProps } from 'react-native';
 
 type OnChangeEvent = Readonly<{
 	value: string;
-	index: Int32;
+	index: CodegenTypes.Int32;
 }>;
 
 export interface NativeProps extends ViewProps {
 	options: ReadonlyArray<string>;
-	selectedIndex?: Int32;
-	mode?: WithDefault<'dialog' | 'dropdown', 'dialog'>; // iOS only
+	selectedIndex?: CodegenTypes.Int32;
+	mode?: CodegenTypes.WithDefault<'dialog' | 'dropdown', 'dialog'>; // iOS only
 	textColor?: ColorValue; // iOS only
-	onValueChange?: DirectEventHandler<OnChangeEvent>;
+	onValueChange?: CodegenTypes.DirectEventHandler<OnChangeEvent>;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/android/.gradle/buildOutputCleanup/cache.properties

@@ -1,2 +0,0 @@
-#Thu Aug 27 12:56:24 CEST 2026
-gradle.version=9.2.0