Using styled API causes children Inputs to lose focus (May be from re-renders)

Description

When using the styled API inputs lose focus preventing the user from typing.

This does not however happen with the createThemeComponent API.

Notes

I’m currently using Formik to handle forms with React Native. I’m not sure of the impact of this on the bug.

Example

Causes inputs to lose focus:

const Card = styled(View, {
  themeKey: "cards",
  defaultVariant: "primary",
})({});

Doesn’t cause inputs to lose focus:

const Card = createThemedComponent(View, {
  themeKey: "cards",
  defaultVariant: "primary",
});

[nandorojo]

Not sure how I didn’t think of this sooner. I can move the pure function logic for the sx prop directly into createThemedComponent. This way, the styled component will do zero magic — it will just be for nicer syntax. Besides figuring out the TS suggestions, this should be easy.

[nandorojo]

Okay cool. Seems like the previous implementation of styled, which forwarded refs twice, was the cause. Since there’s a bug for that in RNW, and since styled is going to get rid of that implementation anyway in favor of putting a pure function option for defaultStyle in createThemedComponent, I’ll close this for now.