So I have been stuck with this issue over the last couple of days where I have a <FlatList />
that is positioned absolutely on top of the map and i'm only able to scroll it if I simultaneously pan the map.
My gut feeling is that the flatlist is fighting over the gesture responder system with the map.
I've consulted these issues and have tried to implement the solutions but to no success.
https://github.com/airbnb/react-native-maps/issues/1032, https://github.com/airbnb/react-native-maps/issues/730, https://github.com/airbnb/react-native-maps/pull/664
I've tried to disable scrolling/zooming/pinching/rotating capabilities on the map as suggested.
Here is the code that utilizes the flatlist
export default class InfoDeck extends Component {
renderStop = ({ item }) => (
<View style={styles.innerContainer}>
<View style={styles.stopNameContainer}>
<OnTheWayText style={styles.stopName}>
{item.name}
</OnTheWayText>
</View>
</View>
)
render() {
let taggedStops = _.filter(this.props.taggedStops, obj => obj.selected)
console.log(taggedStops)
return (
<View style={styles.container} >
<FlatList
{...outerFLProps}
data={taggedStops}
renderItem={this.renderStop} />
<View style={styles.dotContainer} />
</View>
);
}
}
const outerFLProps = {
keyExtractor: (item, index) => item.id,
horizontal: true,
style: {
flex: 1,
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
position: 'absolute',
backgroundColor: COLORS.OTWdark,
marginHorizontal: 10,
bottom: 60,
borderRadius: 8,
shadowColor: 'black',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.75,
shadowRadius: 1,
zIndex: 20,
},
innerContainer: {
height: 120,
width: 300
},
stopNameContainer: {
height: 25,
paddingTop: 3,
backgroundColor: COLORS.OTWdarkerDark,
borderTopLeftRadius: 5,
borderTopRightRadius: 5,
},
dotContainer: {
height: 17.5,
backgroundColor: COLORS.OTWdarkerDark,
borderBottomLeftRadius: 5,
borderBottomRightRadius: 5,
}
})
Works flawlessly if an exception is caught by the console.