SortableList item margin has $backgroundDefault color?

[YuyouWu]

Hi,

I'm making a simple todo app with SortableList. When I apply margin to the item inside renderItem, the margin area will have a color of the $backgroundDefault color.

The code for renderItem is below. If I try to add backgroundColor:"black" to the View component, it will only make what's underneath the list item black. The margin area remains $backgroundDefault.

const renderItem = useCallback(
    ({ item, index: _index }: { item: Item; index: number }) => {
      return (
        <View
          margin-5
        >
          <Drawer
            rightItems={[
              {
                text: "Delete",
                background: "red",
              },
            ]}
            style={{
              borderRadius: 5,
            }}
          >
            <TouchableHighlight
              onPress={() => {
                console.log(item);
              }}
              style={{
                height: 62,
                backgroundColor: "#111111",
                borderRadius: 5,
              }}
            >
              <Text
                marginH-10
                color="white"
                style={{ marginTop: "auto", marginBottom: "auto" }}
              >
                {item.text}
              </Text>
            </TouchableHighlight>
          </Drawer>
        </View>
      );
    },
    []
  );

I am able to hide the color by using padding and setting background color to match its container's background color:

const renderItem = useCallback(
    ({ item, index: _index }: { item: Item; index: number }) => {
      return (
        <View
          paddingV-5
          paddingH-10
          style={{
            backgroundColor: "black",
          }}
        >
          <Drawer
            rightItems={[
              {
                text: "Delete",
                background: "red",
              },
            ]}
            style={{
              borderRadius: 5,
            }}
          >
            <TouchableHighlight
              onPress={() => {
                console.log(item);
              }}
              style={{
                height: 62,
                backgroundColor: "#111111",
                borderRadius: 5,
              }}
            >
              <Text
                marginH-10
                color="white"
                style={{ marginTop: "auto", marginBottom: "auto" }}
              >
                {item.text}
              </Text>
            </TouchableHighlight>
          </Drawer>
        </View>
      );
    },
    []
  );

but when dragging an item, you can see the margin is there (tile named five).

Is there anyway to remove this color from margin? Is this intended behavior?

Thanks in advance for any advice.

Update:
Changing line 121 backgroundColor: Colors.$backgroundDefault, in node_modules\react-native-ui-lib\src\components\sortableList\SortableListItem.js to backgroundColor: "transparent", seems to resolve the issue:

I'm not sure what elevation means but I've tested on Android also. Please advice.

[lidord-wix]

Hello @YuyouWu,
I tried to change this color to 'transparent' and it causing some bugs:

1. You can see here that the items are transparent when they overlap:
   
   instead of:
   
2. The elevation on Android adds a shadow effect to make the element elevated ("closer" to the user).
   Android-transparent.webm
   instead of:
   Android-non-transparent.webm

Anyway, I found a solution for that with a new prop called itemMargins, please see #2561 and check it with your case.
You can pass the prop directly to the SortableList component, for example:

<SortableList
  ...
  itemMargins={{marginBottom: 20, marginLeft: 10, marginRight: 10}}
/>

You can also install react-native-ui-lib@7.3.0-snapshot.2948 to check that.
Please let me know if it works for you and we'll merge that :)

[YuyouWu]

Thanks for the response! I will comment on the PR.