React-native-ui-kitten: How to remove Divider inside Card

[betodasilva]

💬 Question

Is there a workaround to hide the Divider Component being rendered inside the Card Component?

This is the code in Card:

As you can see, there's no condition based on props to hide this Divider.

[artyorsh]

@betodasilva I suppose there is no way to do this.
I would love to configure this too, but, in terms of the design, we should use it. May be adding a prop to disable it would be a nice idea.

[lesmo]

@artyorsh I'm telling you... changing private to protected in components could make this easy to _hack_ 😜

[artyorsh]

@betodasilva I've inspected the usage of this component in more details and I would say there are 3 options to solve this issue:

1. To add something like enableDividers prop
2. To remove rendering dividers at all, so that the only possible way to bring it back is with using fragments.

const Header = (props) => (
  <React.Fragment>
      <View {...props}>
        <Text category='h6'>Maldives</Text>
        <Text category='s1'>By Wikipedia</Text>
      </View>
      <Divider />
  </React.Fragment>
);

1. To leave it as it is. There is no difference between rendering views with header prop or directly in body if you want to prevent usage of Dividers

I don't like neither first nor second solutions, because both of them will bring an additional complexity either to the library or the end user. While the end user can prevent rendering dividers just by rendering the content of header directly in card body 🤷‍♂️