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

[chadlavi-casebook]

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]

Use left prop and use titleStyle to add a margin. Would that work?

Edit: ah, I see that you already tried it. Could you please provide a Snack to reproduce it?

[chadlavi-casebook]

Use left or right prop.

I mentioned left explicitly in my issue. Left has a fixed width of 40, and cannot be styled. It's not possible to do this without a hacky workaround where you apply a negative left margin to the title.

EDIT: which, yes, is _feasible_, but it's not a good long-term solution to have to apply negative margin to something to get around the inability to style something else.

This would also be easily addressed if style apis for left and right were exposed.

[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?

[chadlavi-casebook]

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?

I'm not too familiar with flow-style typing but I'll give it a go. The logic to implement this, anyway, looks fairly straightforward.

[jaulz]

Great, thanks! It should be mostly copy&paste from other components 😊Please do not forget the Typescript types as well.

[chadlavi]

Great, thanks! It should be mostly copy&paste from other components 😊Please do not forget the Typescript types as well.

hello, this is me from my personal account. I've just done a PR for this.

[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.