Button crashes on iOS: cursor: 'pointer' on internal Text triggers RCTTextView setCursor
Bug Description
Tamagui's Button component sets cursor: 'pointer' on its internal Text component (line 140 in src/Button.tsx), which causes a crash on iOS when using React Native.
Error:
-[RCTTextView setCursor:]: unrecognized selector sent to instanceThe cursor CSS property is not supported on React Native's Text component on iOS — it crashes RCTTextView. This is a known React Native issue: facebook/react-native#44559.
The cursor: 'pointer' on the Frame (View) does not crash — only the one on the internal Text component.
Reproduction
import { Button } from 'tamagui';
// This crashes on iOS
<Button>Save</Button>Environment:
- Tamagui:
2.0.0-rc.41 - React Native:
0.81.5 - Platform: iOS (device and simulator)
Root Cause
In packages/button/src/Button.tsx, the internal Text component has:
const Text = styled(SizableText, {
context,
variants: {
unstyled: {
false: {
userSelect: 'none',
cursor: 'pointer', // <-- crashes RCTTextView on iOS
flexGrow: 0,
flexShrink: 1,
ellipsis: true,
color: '$color',
},
},
} as const,
// ...
})cursor is a web-only CSS property. React Native's View silently ignores it, but Text (backed by RCTTextView) throws an unrecognized selector error.
Proposed Fix
Platform-guard the cursor property so it only applies on web:
const Text = styled(SizableText, {
context,
variants: {
unstyled: {
false: {
userSelect: 'none',
flexGrow: 0,
flexShrink: 1,
ellipsis: true,
color: '$color',
'$platform-web': {
cursor: 'pointer',
},
},
},
} as const,
})The same guard should be applied to cursor: 'pointer' on the Frame (line 47) for consistency, though the Frame doesn't crash since View ignores unknown style props.
Happy to submit a PR if this approach looks right.
Source: tamagui/tamagui