Unwanted Space in Stack and HStack Components with Conditional Rendering

[omar-bear]

Description

I am encountering an issue with the Stack and HStack components in the React Native Ficus UI library where an unwanted space is left in the layout, even when a conditionally rendered component evaluates to false. This issue creates a visual offset in the UI, which is particularly noticeable when using the !!emoji condition.

Example Code

<HStack flexDirection="row" alignItems="center" spacing="md" {...rest}>
  {!!emoji && <Text fontSize="sm">{emoji}</Text>}
  <Text variant="h4" {...titleProps}>
    {children}
  </Text>
</HStack>

In this example, when !!emoji evaluates to false, there is an unexpected space before the second Text component, causing alignment issues. This problem seems to be a general issue with the way Stack and HStack handle conditional rendering.

Expected Behavior

No space should be left in the Stack or HStack layout when a conditionally rendered component evaluates to false. The layout should adjust accordingly without any visual offset.

[ntorionbearstudio]

Fixed on version 1.0.0