@expo/html types errors

I’m weirdly getting this error again. Seems like something changed with React’s types, since I’m getting this after upgrading to Expo SDK40:

Type '{ children: string; }' is not assignable to type '(IntrinsicAttributes & Pick<StyledProps<TextProps>, "style" | "sx" | "themeKey" | "variant" | "variants" | "as" | "webContainerSx"> & Pick<...> & WebTextProps & RefAttributes<...>) | (IntrinsicAttributes & ... 4 more ... & RefAttributes<...>)'.
  Type '{ children: string; }' is missing the following properties from type 'Pick<TextProps & ClassAttributes<typeof Text>, "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | ... 29 more ... | "accessibilityTraits">': accessibilityComponentType, accessibilityTraits

56       <H3>{title}</H3>

I think we need to add a { children?: React.ReactNode } to the return type of createThemedComponent…not sure. Will investigate this more. Using dripsy@1.4.6

[nandorojo]

Related: https://github.com/facebook/react-native/issues/24016, https://github.com/callstack/react-native-paper/issues/1962

[nandorojo]

Okay, I identified the issue.

For some reason, the react native TextProps are now requiring two props: accessibilityComponentType & accessibilityTraits. No idea why. I tried downgrading versions of @types/react-native to no avail.

However, with some declaration merging, I was able to solve it by just making them optional.

All you need to do is put this TS file anywhere in your app:

// dripsy-hack.d.ts
import 'react-native'

declare module 'react-native' {
  // fix HTML elements 
  interface TextProps {
    accessibilityComponentType?: string
    accessibilityTraits?: string
  }
  // pressable type support
  interface PressableStateCallbackType {
    hovered?: boolean
    focused?: boolean
  }
  // transition support in view props
  interface ViewStyle {
    transitionProperty?: string
    transitionDuration?: string
  }
}