Setting custom colors for Separators in custom components

[CosmicClownTyler]

While using <TableView> I was constantly adding a specific set of custom props to my <Section>s and <Cell>s, so I decided to extend them using custom components to simplify this process for myself. (This was just a different way of achieving the same effect of creating and exporting an object with custom props)

function CustomCell(props) {
  return (
    <Cell
      title={props.title}
      // default custom props would go here
    />
  );
}

However, in doing so, the colors of the separator insets reverted back to the default colors. After some exploring, including looking at this past issue, I discovered that the background color that is defined in the custom component is used to color the cell but not the separator inset.

This can be seen in the image below, with code written in a snack here.

The problem can be easily circumvented by simply using an object of reusable custom props instead of defining custom components, or by overwriting the component's background color (both options are shown in the snack), but I thought I would submit an issue so this can be fixed if any devs have time, and to also help out anyone else that runs into this issue.

[cixio]

Can confirm the Bug, also I have the problem that hideSeparator does not work with custom component:

import React from 'react';
import { SafeAreaView } from 'react-native';
import { TableView, Cell, Section} from 'react-native-tableview-simple';

function App(): React.JSX.Element {

    const CustomCell = (props) => {
        return (
            <Cell
                backgroundColor={'green'}
                hideSeparator={true}
                {...props}
            />
        );
    }

  return (
    <SafeAreaView>
        <TableView>
            <Section>
                <Cell title="Title 1" backgroundColor={'green'} />
                <Cell title="Title 2" backgroundColor={'green'} />
            </Section>

            <Section>
                <Cell title="Title 3" hideSeparator={true} />
                <Cell title="Title 4" />
            </Section>

            <Section>
                <CustomCell title="Title 5" />
                <CustomCell title="Title 6" />
            </Section>
        </TableView>

    </SafeAreaView>
  );
}

export default App;

[Purii]

Please see my comment in the PR @CosmicClownTyler https://github.com/Purii/react-native-tableview-simple/pull/785#issuecomment-2158636837

It's basically what you already pointed out.

[Purii]

I extended the README: https://github.com/Purii/react-native-tableview-simple?tab=readme-ov-file#wrap-cell

I'm currently thinking about the following idea: Drill down through the children of the Section until a Cell is detected and read the relevant props from there. Is there a reliable / official recommendation on how to get the type of a component? This drill down should be limited to a certain depth. It might make sense to make this opt-in as well via Section.autodetectCellChildren.

I would be open for a pull request implementing this. I currently don't have the time to dig deep into figuring out an official way to determine the type of a component. I want to prevent having hackie workarounds to keep the maintenance effort as low as possible.

[cixio]

That's sure the best way to solve the problem, but it is beyond my capabilities, sorry.