Comments (11)
kevgrig
commented on August 23, 2024
5
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}
from react-native-swipe-list-view.
mi-mazouz
commented on August 23, 2024
1
Any updates or suggestions? It's very uncomfortable not to be able to do that
from react-native-swipe-list-view.
Tilenozz
commented on August 23, 2024
1
@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 ?
from react-native-swipe-list-view.
fukhaos
commented on August 23, 2024
1
I archive this here:
https://vimeo.com/391505451
in 52 seconds.
from react-native-swipe-list-view.
jemise111
commented on August 23, 2024
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
from react-native-swipe-list-view.
fukhaos
commented on August 23, 2024
@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.
=(
from react-native-swipe-list-view.
kevgrig
commented on August 23, 2024
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).
from react-native-swipe-list-view.
kevgrig
commented on August 23, 2024
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>
);
}
from react-native-swipe-list-view.
kevgrig
commented on August 23, 2024
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.
from react-native-swipe-list-view.
aditya-keri-wal
commented on August 23, 2024
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
from react-native-swipe-list-view.
lively-krishnan
commented on August 23, 2024
<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
<TouchableOpacity style={[styles.swipeOutButton, styles.swipeOutButtonOrange]}>
<Text
style={[styles.swipeOutButtonRedText, styles.font_normal]}
onPress={async () => this.report(item)}
>
Report
But it can't be clicked on like this on Android.
from react-native-swipe-list-view.
Related Issues (20)
- SwipeListView actions pass incorrect item in rowMap when using SectionList
- shouldItemUpdate does not seem to work in version 3.2.9
- example how to close rows automatically or by some function when use SwipeRow? HOT 2
- No overload matches this call HOT 7
- Not working with scrollview
- delete button in renderHiddenItem components covers the first button when clicked HOT 1
- Make it harder to start the swipe HOT 1
- SwipeRow : Unable to close row programatically. HOT 3
- react-native-swipe-list-view is not fabric(New Architecture of react-native) compatible yet HOT 2
- ScrollToOffset can't scroll pass through {initialNumToRender}-th row. HOT 2
- Front-view is under the back/hidden-view HOT 4
- Facing issue while implimenting Swipe to Delete feature
- closeOpenAllRows not working on Android HOT 2
- Any way to open a row with a button?
- Question, are you no longer doing library management? HOT 1
- RenderItem, RenderHiddenItem, RenderRow, RenderHiddenRow
- rightActionState true/false wrong
- Open row by key
- There is a memory overflow issue with a single demo
- Add the prop `onPreviewEnd` to types for TypeScript support
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-swipe-list-view.