yamankatby / react-native-material

Modular and customizable Material Design UI components for React Native
https://rn-material.js.org
MIT License
228 stars 38 forks source link

VStack doesn't add spacing if a component is a custom functional component #39

Closed Pika-Pool closed 2 years ago

Pika-Pool commented 2 years ago

See example: https://codesandbox.io/s/frosty-http-1scdrm?file=/src/App.js

In the above example, there is no space after <Link /> in the rendered result. But if the same content in Link is rendered as it is, the space is added.

I'm not sure if this is a bug or if this is the way its supposed to be.

import React from "react";
import { Text, View } from "react-native";
import { VStack } from "@react-native-material/core";

function Link() {
  return (
    <>
      <Text>Link</Text>
      <Text>Link</Text>
    </>
  );
}

function App() {
  return (
    <VStack spacing={25}>
      <View>
        <Text>Hello</Text>
      </View>
      <View>
        <Text>Hello</Text>
      </View>

      <Link />
      {/* uncommnent the following and comment the prev line */}

      {/* <Text>Link</Text>
      <Text>Link</Text> */}

      <View>
        <Text>Hello</Text>
      </View>
    </VStack>
  );
}

export default App;
yamankatby commented 2 years ago

Hi @Pika-Pool, Thank you for reporting this problem, doesn't seem to be an issue, try to add shouldWrapChildren={true} to the stack and it suppose to do the trick.

I'll close this issue now, please feel free to reopen it if it doesn't work.