Setting custom colors for <Seperator>s

[DusterTheFirst]

Hello! I want to start out by thanking you for all the work you have put into this project and to say just how useful this has been with my app. I have one issue/question to file though.

I cannot find a way to change the left most padding section of the <Seperator>. Currently my settings screen (in dark theme) looks like this:

with those weird white sections on the left. Looking through the docs and the properties layed out in the typescript declaration file, I cannot find any way to change it. As well as the padding on the left, when a cell is selected, the whole <Seperator> changes to white:

For reference, here is how it looks in light theme:

[Purii]

Hi @DusterTheFirst! Thanks for those kind words. I'm glad that you find that component useful for your work :)

How do you set the backgroundColor of the Cells?

// Did you try that?
<Cell backgroundColor="darkColor" />

The backgroundColor of a Separator is derived by the surrounding Cells: https://github.com/Purii/react-native-tableview-simple/blob/master/src/components/Section.js#L124

The reason for that is the onPress- / highlighting-behavior, where the Separator is not hidden but expanded to full width with the highlight color. Otherwise the components would jump.

Should add a dark theme for the component 🤔

[DusterTheFirst]

@Purii I have the background color set on the cell

but I still get the white sections

[Purii]

Strange. Unfortunately I cannot reconstruct that issue.
Could you create an expo snack where it occurs?
Thanks!

[DusterTheFirst]

@Purii here is an example: https://snack.expo.io/@dusterthefirst/06c77c
I think the main problem has to do with the fact that the components are passed the backgroundColor through a HOC.

EDIT: I have changed it to use styled-components' .attr to pass the styles rather than a HOC, and still run into the same problem.

[Purii]

You're right. I'll figure something out. Probably a recursion to get the correct children...

I'm also open for suggestions or a PR if you find a solution 👍

[DusterTheFirst]

@Purii i don’t have the time currently but I will look into solutions and probably submit a PR. Am idea I have is to, as you said, recurse through the components passed and their children until you hit one that is a cell (or array of cells) and deal with them like you are currently. Another, probably quicker solution could also be to add a cellBackgroundColor prop to Section so that it can be used if there is none specified for the specific cell.

[Purii]

Hi @DusterTheFirst !

What do you think about this clean solution:

const cellPropsDefault = {
  cellStyle: 'Basic',
  title: 'Basic Custom',
  backgroundColor: 'grey',
};

...

<Cell onPress={console.log} {...cellPropsDefault} />

[Purii]

Just reopen the issue, if it is still not fixed.

[CosmicClownTyler]

I see this is 4 years old but I figured out the specifics of this issue. I raised a new issue here. The short version is that if you are creating a custom cell component that is returning a cell with specific props, the background color defined in the custom component is used to color the cell but not the inset space. The background color passed when using the custom component is used for the inset, even if no background color is passed. More details can be found in the issue I created.