Card.Title expects type `React.ReactNode` but is rendered inside a `StyledText` -- which means in effect it can only accept a Text node

Description

Per the type definitions[1], Card.Title’s title prop should accept any react node. However, because it is wrapped in a StyledText via the <Title> component[2], it can only accept text nodes. This is quite limiting for devs who want to customize their Card titles, especially since the left prop does not have style controls.

For example, in my use case: I want to put an Icon before the text of the title, at the same size as the title text, and with only a gap of 16px between the icon and the text. I have to either put the icon in the left then give the title a negative left margin (because the left has a fixed width of 40), or I have to use an icon set that renders as text glyphs so that I can include it in the title itself; passing anything that is/contains a <View> to title results in the error Invariant Violation: Nesting of <View> within <Text> is not currently supported.

The title prop of Card.Title should not be wrapped in a <Text>-based component, so that <View>-based children can be passed to it. Either that or the type definition for CardTitleProps should be updated to admit its limitation to only <Text> components.

for example, here’s the desired state:

and here’s how that looks if I don’t do the hacky negative left margin on the title:

[jaulz]

Hm, maybe we should think about having a leftStyle and rightStyle then. This would be backward compatible and similar to the props we have for other components. Could you please come up with a PR which also includes the change of the type of title?

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.