CODEWITHSUNDEEP
react-nativereact-native-maps
Aleksander
Aleksander

Reputation: 61

react-native-maps marker throwing and IndexOutofBoundsException: Invalid index 1, size is 0

I'm trying to get a react-native-maps Marker to show up on my Android device (it work's perfectly fine on iOS) but it's throwing me an IndexOutofBoundsException: Invalid index 1, size is 0 error at render time.

https://i.sstatic.net/9Scbw.png

render() {
    const INITIAL_REGION = { latitude: 52.221835, longitude: 21.000896, latitudeDelta: 0.0922, longitudeDelta: 0.0421 };
    return (
        <MapView ref="map"
            showsUserLocation = { true }
            loadingEnabled = { true }
            showsTraffic = { false }
            showsBuildings = { false }
            style = { styles.map, {flex: 1} }
            initialRegion = { INITIAL_REGION }
        >
            <View style={{flex: 0.1, flexDirection: 'row', position: 'absolute', justifyContent: 'space-between', backgroundColor: 'transparent'}}>
                <Button onPress={() => this.showWithinRadius(5)}>Wszystkie ~5km</Button>
                <Button onPress={() => this.showWithinRadius(10)}>Wszystkie ~10km</Button>
                <Button onPress={() => this.showWithinRadius(15)}>Wszystkie ~15km</Button>
                <Button onPress={() => this.showAllOffers()}>Wszystkie oferty</Button>
            </View>
            { console.log(this.state.offerLocation) }
            <Marker
                coordinate = { {latitude: 52.259216308593, longitude: 21.041564941406} }
                title = { this.props.selectedOffer.offer.title }
            />
        </MapView>
    );
}

Any idea what could be causing this behaviour? I've tried deleting the View block from the MapView component but that doesn't seem to help. In the actual app I'm planning to pass the coordinates by an object which seem to works in the fitToCoordinates method.

Upvotes: 1

Views: 3346

Answers (4)

YosefBro
YosefBro

Reputation: 654

For me, the solution was removing any view from (can be a view, an image, etc). It had no connection to the object neither to the order.

Upvotes: 0

GeekDev
GeekDev

Reputation: 23

Put the inner View and the market inside one View, this will solve the problem.

Upvotes: 0

Leyllo
Leyllo

Reputation: 71

No solutions were given to this issue but it helped me understand and fix mine. I don't think the View is the problem but the order in which the components are rendered. It seems like, on Android, render order matters. So, rendering Markers as first child of MapView fixed it for me.

It is also mentioned here : https://github.com/react-community/react-native-maps/issues/291

Hope I'm helping !

Upvotes: 7

Aleksander
Aleksander

Reputation: 61

Nevermind, it was in fact the View component inside the MapView that was causing the issue.

Upvotes: 1

Related Questions