Badge errors with Text strings must be rendered within a <Text> component

[amarjanica]

Current behaviour

Badge in Drawer.CollapsedItem throws Text strings must be rendered within a <Text> component but only when I input a zero. For all other numbers it works.

How to reproduce?

<Drawer.CollapsedItem
          onPress={() => {}}
          focusedIcon="account-group"
          badge={0}
          unfocusedIcon="account-group-outline"
          label="Group"
        />

I ran this in expo dev client on a real device if it matters.

What have you tried so far?

I know how to handle this, just not set badge if count is zero. But maybe you want to handle it in code.

Your Environment

software	version
ios	x
android	x
react-native	x.x.x
react-native-paper	5.12.5
node	x.x.x
npm or yarn	x.x.x
expo sdk	51.0.31

[gedu]

Hey, that is something funny from JS, because we check if a badge is given and 0 && true -> it is 0, so It tries to render it. If you pass any other number 1 && true it is true so it renders the Badge component. As a workaround I would suggest instead of passing 0, pass false.

Note: I think you will see the same issue is you pass an empty string ""