asChild throws error when setting style on child component with array style for React Native Web

[bryanmylee]

Bug report

Current Behavior

In React Native Web, using @radix-ui/react-slot for asChild over a child component with array styles throws an error.

<Link href="/details" asChild>
  <Pressable style={[styles.button, dynamic.button]} />
</Link>

/// Failed to set an indexed property [0] on 'CSSStyleDeclaration': Indexed property setter is not supported.

Expected behavior

Styles should be forwarded properly onto an array style for React Native Web, since @radix-ui/react-slot is being used

Reproducible example

Expo Snack

Suggested solution

We should provide a separate export for React Native Web that would handle style merging differently given the availability of the array style syntax in React Native.

<Link href="/details" asChild style={{ color: 'white' }}>
  <Pressable style={{ backgroundColor: 'red' }} />
</Link>
/// becomes
<Pressable style={[{ color: 'white' }, { backgroundColor: 'red' }]} />

<Link href="/details" asChild style={{ color: 'white' }}>
  <Pressable style={[style1, style2]} />
</Link>
/// becomes
<Pressable style={[{ color: 'white' }, style1, style2]} />

Additional context

Expo Router has started using @radix-ui/react-slot for its Link component to support asChild.

Your environment

Software	Name(s)	Version
Radix Package(s)	react-slot	1.0.1
React	n/a	18.2.0
Browser	Chrome	128.0.6613.113
Assistive tech	n/a
Node	n/a
npm/yarn	npm	10.2.3
Operating System	macOS	Sonoma 14.5