React Native for Web: Invariant Violation: "cursor" is not a valid style property

Question

We are using React Native for Web so we do need to be able to modify the cursor if it is in the web but I imagine since there is no cursor on mobile this is an issue with React Native.

How can we allow cursor for at least the web part?

Example:

export default StyleSheet.create<Style>({
  .modalContent {

    cursor: "pointer",

  }
});

Answer 1

I found this answer from jchook on this GitHub post.

You can use the RN Platform to detect if it is web, and then it will allow you to use the cursor stylesheet attribute.

import { Platform } from 'react-native'

export default StyleSheet.create<Style>({
 .modalContent {

   ...Platform.select({
     web: {
       cursor: 'default',
     },
   }),

 }
});