Render children components with specific gap

renderChildrenWithGap.ts

const renderChildrenWithGap = (): Array<
    React.ReactChild | React.ReactFragment | React.ReactPortal
  > | null => {
    return children
      ? Children.toArray(children).map((child, index) => {
          return (
            <React.Fragment key={index}>
              {index !== 0 && gap ? (
                <View
                  style={{
                    [flexDirection === 'column' ||
                    flexDirection === 'column-reverse'
                      ? 'height'
                      : 'width']:
                      typeof gap === 'number' ? gap : theme.space[gap],
                  }}
                />
              ) : null}
              {child}
            </React.Fragment>
          );
        })
      : null;
};