Swipe full on left and right both with different different hidden item
umeshbaldania opened this issue · 0 comments
I can say it is not issue of you library but it is my requirement.
I have full left and right hidden view but as per current development i tried i can not successfully done that.
Please review attachment what i have done.
Also on left hidden side i have another list to scroll horizontally
I have used SwipeListView of done that.
SwipeListView======
<View style={{ flex: 1 }}> <SwipeListView data={data} keyExtractor={(item, index) => index.toString()} renderItem={renderItem} onSwipeValueChange={(obj) => { SwipeIndex = obj.key }} swipeGestureBegan={(rowkey) => { console.log("row kry", rowkey) }} swipeGestureEnded={(rowKey, datas) => { console.log(rowKey, datas) var temp = data; temp.forEach((e, index) => { e.direction = 'right' if (index == rowKey) { e.direction = datas.direction, e.currentIndx = rowKey, e.translateX = datas.translateX } }) setData([...temp]) console.log(temp) }} closeOnRowBeginSwipe={true} closeOnRowOpen={true} renderHiddenItem={renderHiddenItem} leftOpenValue={Size.width - 100} rightOpenValue={-(Size.width - 40)} previewRowKey={'0'} previewOpenValue={-40} useNativeDriver={true} previewOpenDelay={3000} /> </View>
renderHiddenItem===
`
const renderHiddenItem = (rowData, rowMap) => {
return (
data[SwipeIndex]?.translateX == 0
?
: data[SwipeIndex]?.direction == 'right'
?
<View style={{
width: Size.width - 100, backgroundColor: Colors.white,
flexDirection: "row",
}}>
{data[SwipeIndex].images.map((e, index) => {
return (index == data[SwipeIndex].images.length - 1
?
:
<Image style={{
height: undefined,
aspectRatio: 1 / 1,
width: Size.width / 3
}} source={{ uri: e }} />
)
})}
: <View style={{ flexDirection: "row", flex: 1, }} key={rowData.item.key}>
<View style={{ justifyContent: 'center', }}>
<ImageBackground
resizeMode='stretch'
source={Assets.TodoImage}
style={{
height: Size.FindSize(110),
width: Size.width + Size.FindSize(60),
marginLeft: -Size.FindSize(40),
}}
>
<View style={{
flex: 1,
alignItems: 'center',
flexDirection: "row",
paddingHorizontal: Size.FindSize(40),
justifyContent: "space-evenly"
}}>
<TouchableOpacity style={{
alignItems: "center",
justifyContent: 'center',
paddingLeft: Size.FindSize(20)
}}>
<Image resizeMode='contain' source={Assets.edit_white}
style={{ height: Size._18, width: Size._18 }} />
<CustomText style={{ paddingTop: Size._2 }} t={"Edit"} s={Size.FindSize(9)} c={Colors.white} />
</TouchableOpacity>
<TouchableOpacity style={{
alignItems: "center",
justifyContent: 'center',
}}>
<Image resizeMode='contain' source={Assets.map_white}
style={{ height: Size._20, width: Size._20 }} />
<CustomText style={{ paddingTop: Size._2 }} t={"Map"} s={Size.FindSize(9)} c={Colors.white} />
</TouchableOpacity>
<TouchableOpacity style={{
alignItems: "center",
justifyContent: 'center',
}}>
<Image source={Assets.publish}
style={{ height: Size._20, width: Size._20 }} />
<CustomText style={{ paddingTop: Size._2 }} t={"Publish"} s={Size.FindSize(9)} c={Colors.white} />
</TouchableOpacity>
<TouchableOpacity style={{
alignItems: "center",
justifyContent: 'center',
}}>
<Image source={Assets.shareIcon}
style={{ height: Size._20, width: Size._20 }} />
<CustomText style={{ paddingTop: Size._2 }} t={"Share"} s={Size._10} c={Colors.white} />
</TouchableOpacity>
<TouchableOpacity style={{
alignItems: "center",
justifyContent: 'center',
}}>
<Image resizeMode='contain' source={Assets.delete_white}
style={{ height: Size._20, width: Size._20 }} />
<CustomText style={{ paddingTop: Size._2 }} t={"Trash"} s={Size._10} c={Colors.white} />
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</View>
);
}`
renderItem =====
`
const renderItem = ({ item, index }) => {
return (
<View style={{
width: Size.width, backgroundColor: Colors.white,
flexDirection: "row",
}} key={index}>
<Image
source={{ uri: item.images[item.images.length - 1] }}
style={{
height: undefined,
aspectRatio: 1 / 1,
width: Size.width / 3
}} />
<View style={{
height: Size._20, width: Size._20,
alignItems: 'center', justifyContent: 'center',
position: 'absolute', margin: Size.FindSize(5),
backgroundColor: Colors.white, borderRadius: Size.FindSize(100)
}} >
{item?.images?.length ? : null}
<View style={{
padding: Size._10,
flex: 1,
}}>
<View style={{ flexDirection: "row", alignItems: 'center', flex: 1 }}>
<Image
style={{
height: undefined,
width: Size.FindSize(36),
aspectRatio: 1 / 1,
borderRadius: Size.FindSize(18)
}}
source={{ uri: item.proifle }}
/>
<CustomText s={Size._10} t={item.name} style={{ paddingLeft: Size._10 }} />
</View>
<View style={{ height: Size._5 }} />
<View style={{ justifyContent: 'space-between', paddingLeft: Size._5 }}>
<CustomText s={Size._14} t={item.title} />
<CustomText s={Size.FindSize(11)} t={item.description} />
<CustomText s={Size._10} f={Medium} c={Colors.primary} t={item.hasText.map((e) => e + " ")} />
</View>
</View>
<View style={{ justifyContent: 'center', }}>
<Image
resizeMode='stretch'
source={item.direction == 'left' ? Assets.halfCircle : Assets.halfCircleLight}
style={{ height: Size.FindSize(110), width: Size.FindSize(30) }}
/>
</View>
</View>
)
}`
Please help if some one have done that previously
