React-native-maps: FlatList absolute positioning over map can only scroll in certain situations.

Created on 11 Apr 2017  路  1Comment  路  Source: react-native-maps/react-native-maps

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.

apr-11-2017 15-11-22

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,
    }
})

>All comments

Works flawlessly if an exception is caught by the console.

apr-11-2017 16-20-32

image

Was this page helpful?
0 / 5 - 0 ratings

Related issues

npomfret picture npomfret  路  3Comments

divye01 picture divye01  路  3Comments

jack2684 picture jack2684  路  3Comments

HiroNonoyama picture HiroNonoyama  路  3Comments

KarlosQ picture KarlosQ  路  3Comments