React-native-swipe-list-view: How to use with a transparent background?

[TossShinHwa]

Hi,

We want to use SwipeRow with a transparent background. If we set content style:

backgroundColor: rgba(0, 0, 0, .1)

Then, the hiddenView will be displayed, it's not what we want. We want it just like Notification Center of IOS, Be displayed only when slid open.

Do you have some idea to resolve this? Thank you.

[jemise111]

Hey @TossShinHwa. Yeah with the way this is set up that wouldn't currently be possible. The "hiddenRow" in that example is really alongside the row, not behind it. You may have some luck using this with some styling..

https://github.com/dancormier/react-native-swipeout

[mi-mazouz]

Any updates or suggestions? It's very uncomfortable not to be able to do that

[fukhaos]

@mi-mazouz I made a workaround using the hidden view as a empty View
and using the top view with full width and another view aside.
=(

[Tilenozz]

@mi-mazouz I made a workaround using the hidden view as a empty View
and using the top view with full width and another view aside.
=(

Mind can i ask how ?

[kevgrig]

I'm also interested in this because it basically means we can't have an ImageBackground behind the SwipeListView. @jemise111's comment from 2016 points to a deprecated alternative (which actually ends up pointing back to this component).

[kevgrig]

Based on @fukhaos's comment, I'm able to show the items properly but their TouchableOpacity doesn't work even though zIndex is high:

  renderHiddenItem={ (data, rowMap) => <View /> }
  renderItem={({item, rowMap}) => {
    return (
          <View style={{
            flex: 1,
            flexDirection: "row",
            padding: 10,
            justifyContent: "center",
            width: "100%",
          }}>
            <TouchableOpacity onPress={ async () => { this.onClickItem(item) }}>
              <View style={{
                backgroundColor: chipColor,
                padding: 15,
                borderRadius: 15,
              }}>
                <Text>Hello World</Text>
              </View>
            </TouchableOpacity>
            <View style={{ position: "absolute", height: "100%", right: -150, zIndex: 1000 }}>
                <View style={{flex: 1, flexDirection: "row", width: 150}}>
                  <TouchableOpacity style={[styles.swipeOutButton, styles.swipeOutButtonRed]}>
                    <Text
                      style={[styles.swipeOutButtonRedText, styles.font_normal]}
                      onPress={async () => this.delete(item)}
                    >
                      Delete
                    </Text>
                  </TouchableOpacity>
                  <TouchableOpacity style={[styles.swipeOutButton, styles.swipeOutButtonOrange]}>
                    <Text
                      style={[styles.swipeOutButtonRedText, styles.font_normal]}
                      onPress={async () => this.report(item)}
                    >
                      Report
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
          </View>
    );
  }

[kevgrig]

Okay, I got it to work. I'm not sure if this is the best approach, but I moved the TouchableOpacity to the renderHiddenItem. Roughly:

          renderHiddenItem={ (data, rowMap) => 
            <View style={{ alignItems: 'flex-end', bottom: 0, justifyContent: 'center', position: 'absolute', top: 0, width: "100%" }}>
              <View style={{ flex: 1, flexDirection: "row", width: 150 }}>
                <TouchableOpacity
                  style={{ flex: 1, alignItems: "center", justifyContent: "center", width: 75 }}
                  onPress={async () => this.delete(data)}
                />
                <TouchableOpacity
                  style={{ flex: 1, alignItems: "center", justifyContent: "center", width: 75 }}
                  onPress={async () => this.report(data)}
                />
              </View>
            </View>
             }
          renderItem={({item, rowMap}) => {
            return (
          <View style={{
            flex: 1,
            flexDirection: "row",
            padding: 10,
            justifyContent: "center",
            width: "100%",
          }}>
            <TouchableOpacity onPress={ async () => { this.onClickItem(item) }}>
              <View style={{
                padding: 15,
                borderRadius: 15,
              }}>
                <Text>Hello World</Text>
              </View>
            </TouchableOpacity>
              <View style={{
                position: "absolute",
                top: 0,
                bottom: 0,
                right: -150,
              }}>
                <View style={{flex: 1, flexDirection: "row", width: 150}}>
                  <View style={{ flex: 1, alignItems: "center", justifyContent: "center", width: 75 }}>
                    <Text>
                      Hide
                    </Text>
                  </View>
                  <View style={{ flex: 1, alignItems: "center", justifyContent: "center", width: 75 }}>
                    <Text>
                      Report
                    </Text>
                  </View>
                </View>
              </View>
          </View>
            );
          }}
          rightOpenValue={-150}

[kevgrig]

One additional comment is that my renderItem previously used a PureComponent, but with this required View wrapper to add the buttons, I didn't immediately realize why my list rendered more slowly. I had to convert the renderItem to a PureComponent.

[fukhaos]

I archive this here:
https://vimeo.com/391505451
in 52 seconds.

[aditya-keri-wal]

I've found a much easier solution.

Just use the React Native Gesture Handler library. Works much better and renders the hidden component correctly even when the list item has a transparent background.

Watch this tutorial : https://www.youtube.com/watch?v=JxN9W9PRlUQ