[ BUG ] select

[bizmich]

How do I make SelectContent match the SelectTrigger width in React Native Reusables?

Using w-[--radix-select-trigger-width] (from the web version) doesn't work on native. Is there a built-in way to sync these widths, or do I need to measure the trigger manually using onLayout?

[hightech-dev830]

PROBLEM:
In React Native Reusables (Radix-style Select), you want SelectContent to match the width of SelectTrigger. ❤️

You tried:
w-[--radix-select-trigger-width]

But this does NOT work in React Native.

WHY IT DOESN’T WORK:

• React Native has no DOM
• No CSS variables (like --radix-*)
• No Popper middleware that syncs trigger/content width
• No ResizeObserver or layout-driven CSS bindings

So web solution (Radix UI) is not portable to native.

---

CORRECT APPROACH (NATIVE SOLUTION)

You must measure the trigger width manually and pass it to content.

---

SOLUTION 1: onLayout (Simple & Common)

const [triggerWidth, setTriggerWidth] = useState(0);

<SelectTrigger
onLayout={(e) => {
setTriggerWidth(e.nativeEvent.layout.width);
}}

<SelectContent
style={{
width: triggerWidth || undefined,
}}

Option 1

---

SOLUTION 2: Prevent flicker (Recommended)

const [triggerWidth, setTriggerWidth] = useState<number | null>(null);

<SelectContent
style={[
triggerWidth ? { width: triggerWidth } : null
]}
/>

Why:

• avoids rendering wrong width (0) before layout happens

---

SOLUTION 3: More accurate measurement (Production-grade)

Use measureInWindow (better for modals/portals):

const triggerRef = useRef(null);

const updateWidth = () => {
triggerRef.current?.measureInWindow((x, y, width) => {
setTriggerWidth(width);
});
};

<SelectTrigger
ref={triggerRef}
onLayout={updateWidth}

<SelectContent
style={{ width: triggerWidth || undefined }}
/>

---

BEST PRACTICE ARCHITECTURE (CLEAN DESIGN)

Instead of prop drilling:

1. Create shared context:

const SelectWidthContext = createContext({
width: 0,
setWidth: (w: number) => {}
});

2. Trigger updates width:

   • onLayout / measureInWindow

3. Content consumes width automatically

This mirrors Radix behavior but implemented manually.

---

WHY WEB HAS THIS BUT RN DOESN’T

Web (Radix + Floating UI):

• Popper calculates anchor width
• CSS variable injected:
  --radix-select-trigger-width
• DOM layout is reactive

React Native:

• No DOM
• No CSS variables
• Layout is measured manually
• No automatic anchor-content binding

So sync must be imperative, not declarative.

---

FINAL ANSWER:

YES — you must manually measure trigger width.

BEST OPTION:

• use onLayout OR measureInWindow
• store width in state
• pass to SelectContent style