Cell Separator Still Missing

[ShanTheShan]

The separator for some Cells does not render when TouchableOpacity is used or when the cells are dynamically loaded through a loop. I've attached an Expo Snack replicating the issue here. https://snack.expo.dev/@shan_r/table-view-separator-issue

Im running my app on a physical device and not a simulator, and the missing separator is more prominent there. The width of the separator is also barely visible.

Also, is there a way to customize the width of the separator?

[Purii]

Hi @ShanTheShan, Thanks for the Snack, it helps a lot understanding your issue.

By setting the property cellContentView you're overwriting the whole contentView. That means, all the default behavior of the Cell-Component needs to be set manually. The underlying property TouchableHighlight.underlayColor is derived from Cell.highlightUnderlayColor. So you could set the property highlightUnderlayColor and might already achieve your planned behavior:

...
<Cell
    contentContainerStyle={{ height: 70 }}
    onPress={handleTurnNotificationsOn}
    cellContentView={
        <Text style={{ fontSize: 17, color: "black" }}>Notifications</Text>
    }
    backgroundColor={"#F6F6F6"}
    highlightUnderlayColor="red"
/>
...

However, I try to understand what you want to accomplish:

• Increasing the fontSize of the Title to 17
• Support multiple themes, like dark-mode and light-mode

Based on those requirements I suggest using the property TableView.appearance and not overwrite the cellContentView.

// Suggestion A
// Use the default themes
<TableView appearance={darkState ? 'dark' : 'light'}>
    <Section>
        <Cell
            contentContainerStyle={{ height: 70 }}
            onPress={handleTurnNotificationsOn}
            titleTextStyle={{fontSize:17}}
            title="Notifications"
        />
    </Section>
</TableView>

// Suggestion B
// Create your own theme
<TableView
    appearance={'customKey'}
    customAppearances={{
        customKey: {
            colors: {
                background: 'red',
                muted: 'blue',
                separatorColor: 'green',
                body: 'yellow',
                primary: 'brown',
                secondary: 'orange'
            }
        }
 }}>
    <Section>
        <Cell
            contentContainerStyle={{ height: 70 }}
            onPress={handleTurnNotificationsOn}
            titleTextStyle={{fontSize:17}}
            title="Notifications"
        />
    </Section>
</TableView>

There's currently no possibility to overwrite the width of the separator, because the original idea of this component is to mimic the behavior of the native TableView. However, I'm open for a PR adding a property!

• https://github.com/Purii/react-native-tableview-simple/blob/39d9d32b7ee9fa3a46fafd9df240a78747e6fb57/src/components/Separator.tsx#L38
• Update also the README.md

[ShanTheShan]

Hi Purii. Thank you for the quick response and pointing out the mistake as to how I was using the cellContentView and its styling effects. Using Suggestion A and setting the text padding to increase the cell height has seem to fix the issue for me as to the Cell Separator not appearing for certain cells.

<TableView appearance={currentTheme === "dark" ? "dark" : "light"}>
       <Section>
            <Cell
              title="Notifications"
              onPress={handleTurnNotificationsOn}
              titleTextStyle={{ paddingVertical: 10 }}
            />
            <Cell
              title="Theme"
              onPress={() => {
                toggleThemeModal(true);
              }}
              titleTextStyle={{ paddingVertical: 10 }}
            />
            <Cell
              title="Timer"
              onPress={() => {
                toggleTimerModal(true);
              }}
              titleTextStyle={{ paddingVertical: 10 }}
            />
            <Cell
              title="Replay Tutorial"
              onPress={() => {
                toggleTutorialModal(true);
              }}
              titleTextStyle={{ paddingVertical: 10 }}
            />
       </Section>
</TableView>

Cheers