How to use PanResponder inside horizontal FlatList - react-native

Question

I want to drag out the selected item from the horizontal FlatList and drop it to another area of the screen. The problem is that my FlatList wrapper must have a fixed height and when trying to pull out selected element out FlatList component overflows it and my element gets hidden.
I have tried to change zIndex and set overflow to visible but it does not work properly because setting zIndex works with siblings only and pretty buggy just yet, overflow:visible did not affect layout at all.
Here is the screenshot:
Here is my code:
import React from 'react';
import {
SafeAreaView,
View,
FlatList,
Text,
StyleSheet,
Animated,
PanResponder
} from 'react-native';
import { v4 } from 'uuid';
export default class App extends React.PureComponent{
state = {
data: [
{ id: v4(), title: 'Lightcoral', hex: '#eb7474' },
{ id: v4(), title: 'Orchid', hex: '#eb74dc' },
{ id: v4(), title: 'Mediumpurple', hex: '#9a74eb' },
{ id: v4(), title: 'Mediumslateblue', hex: '#8274eb' },
{ id: v4(), title: 'Skyblue', hex: '#74b6eb' },
{ id: v4(), title: 'Paleturquoise', hex: '#93ece2' },
{ id: v4(), title: 'Palegreen', hex: '#93ecb6' },
{ id: v4(), title: 'Khaki', hex: '#d3ec93' }
]
}
_position = new Animated.ValueXY()
_panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: (event, gesture) => {
this._position.setValue({ x: gesture.dx, y: gesture.dy})
},
onPanResponderRelease: () => {}
})
_keyExtractor = (item) => item.id;
_renderItem = ({item}) => {
return (
<Animated.View
style={this._position.getLayout()}
{...this._panResponder.panHandlers}
>
<View style={[styles.itemBox, {backgroundColor: `${item.hex}`}]}>
<Text>{item.title}</Text>
</View>
</Animated.View>
)
}
render() {
const { data } = this.state
return (
<SafeAreaView style={styles.safeArea}>
<View style={styles.container}>
<View style={styles.targetArea}>
<Text>Drop HERE!!!</Text>
</View>
<View style={{ height: 80, borderColor: 'black', borderWidth: 2 }}>
<FlatList
data={data}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
horizontal={true}
/>
</View>
</View>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
safeArea: {
flex: 1
},
container: {
flex: 1,
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#fff',
},
itemBox: {
width: 80,
height: 80,
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1,
borderColor: '#fff'
},
targetArea: {
height: 150,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1,
borderColor: '#eee',
backgroundColor: '#F5FCFF',
marginTop: 40
}
});
I want to move the selected item of flatList around the screen and put it on top of any other element of the screen, if i simply could programmatically set zIndex of each element - I would be over the moon but unfortunately it seems not working as simple as that. Please help me I very desperate(((

Answer 1

set overflow to visible in FlatList style.