Marker not loading

[PabloLandro]

Summary

I have a set of markers each with a custom image loaded by require. The image isn't displayed until the component is reloaded.

Reproducible sample code

import React from "react";
import { StyleSheet, SafeAreaView, Text, View, Image, ScrollView } from "react-native";
import CheckBox from "react-native-checkbox";
import MapView, { Marker } from 'react-native-maps';


const categories={list: [
  {
      label: "Club",
      image: require("../assets/discoIcon.png")
  },

  {
      label: "Karaoke",
      image: require("../assets/karaokeIcon.png")
  },

  {
      label: "Concert",
      image: require("../assets/discoIcon.png")
  },

  {
      label: "Other",
      image: require("../assets/discoIcon.png")
  }
  ]
};

const colors = {
    primary: "#C60F7B",
    secondary: "#393A7B",
    ternary: "#333367",
    forth: "#282957",
    text: "#1C1B29",
    mapBackground: "#202040"
}

const initialEvents = {
  list: [
    {
        name: "Gazzete Cafe",
        description: "Exposition Photos",
        coordinates: {
            latitude: 43.604564,
            longitude: 3.878391
        },
        category: "Other",
        key: 0,
        image: require("../assets/barLogos/gazette.png")
    },

    {
        name: "Pampa y Luna",
        description: "DJ Edoux",
        coordinates: {
            latitude: 43.606949,
            longitude: 3.866941
        },
        category: "Concert",
        key: 1
    },

    {
        name: "Delirium Cafe",
        description: "Karaoke",
        coordinates: {
            latitude: 43.607434,
            longitude: 3.867077
        },
        category: "Karaoke",
        key: 2
    },

    {
        name: "Australian Bar",
        description: "Soirée DJ",
        coordinates: {
            latitude: 43.607379,
            longitude: 3.895983
        },
        category: "Club",
        key: 3
    },
    {
        name: "La Dune",
        description: "Dance & Electro",
        coordinates: {
            latitude: 43.558495,
            longitude: 4.056059
        },
        category: "Club",
        key: 4
    },

    {
        name: "Cubanito Cafe",
        description: "Afterwork Bachata",
        coordinates: {
            latitude: 43.607244,
            longitude: 3.880618
        },
        category: "Club",
        key: 5,
        image: require("../assets/barLogos/cubanito.png")
    },

    {
        name: "Le Tord Boyaux",
        description: "Blind Test",
        coordinates: {
            latitude: 43.605269,
            longitude: 3.875946
        },
        category: "Club",
        key: 6,
        image: require("../assets/barLogos/boyaux.png")
    },

    {
        name: "Berr o'Clock",
        description: "Karaoke",
        coordinates: {
            latitude: 43.607461,
            longitude: 3.876214
        },
        category: "Karaoke",
        key: 7
    }
]
}

export default class Main extends React.Component {
  constructor (props) {
    super(props);
    this.state={
      idx: 0,
      markers: initialEvents.list,
      categories: {}
    };
    
  }

  componentDidMount () {
    categories.list.map((category) => {
      let aux = this.state.categories;
      aux[category.label] = true;
      this.setState({
        categories: {
          ...aux
        }
      })
    });
  }

  addMarker (event) {
    this.setState ((prevState, props) => ({
      markers: [
        ...this.state.markers,
        {
          ...event,
          image: this.imageOfCategory(event.category),
          key: prevState.idx+1,
        }
      ],
      idx: this.state.idx + 1
    }))
  }

  imageOfCategory (categoryName) {
    categories.list.forEach((category) => {
      console.log(category);
      console.log(categoryName)
      if (category["label"] == categoryName) {
        return category["image"];
      }
    })
  }

  updateCheckbox (label, value) {
    let aux=this.state.categories;
    aux[label]=value;
    this.setState(()=>({
      categories: aux
    }));
  }

  getCheckBoxList (category) {
    console.log(this.state.categories);
    let value = true;
    if (this.state.categories.hasOwnProperty(category.label)) {
      value = this.state.categories[category.label];
    }

    return(
      <View style={value ? styles.checkedButtonBorder: styles.uncheckedButtonBorder}>
        <CheckBox
          label={category.label}
          checkboxStyle={styles.checkBox}
          checked={value}
          labelStyle={{color: colors.text}}
          uncheckedImage={category.image}
          checkedImage={category.image}
          onChange={(checked) => this.updateCheckbox(category.label, !checked)}
        />
      </View>
    );
  }

  getMarkers () {
    return (
      this.state.markers.map((marker) => {
        let image = marker.hasOwnProperty("image") ? marker.image: require("../assets/logo.png");
        if (this.state.categories[marker.category] === true)
          return (
            <Marker
              title={marker.name}
              key={marker.key}
              description={marker.description}
              coordinate={marker.coordinates}
              tracksViewChanges={false}
            >
              <View style={styles.marker}>
                <Image style={styles.markerImage} source={image}></Image>
                <Text style={{fontSize: 20, color: "black"}}>Hello</Text>
              </View>
            </Marker>
          );
      })
    );
  }

  render () {
    return(
    <SafeAreaView style={styles.container}>
      
      <MapView
          style={styles.map}
          initialRegion={{
          latitude: 43.609514,
          longitude: 3.876991,
          latitudeDelta: 0.015,
          longitudeDelta: 0.0121,
          }}
      >
        {this.getMarkers()}
      </MapView>
      <View style={styles.topContainer}>
          <ScrollView horizontal contentContainerStyle={styles.scroller}>
              {categories.list.map((category) => (this.getCheckBoxList(category)))}
          </ScrollView>
      </View>
    </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({

  checkBox: {
    width: 50,
    height: 50,
    top: 2
  },

  checkedButtonBorder: {
    backgroundColor: colors.secondary,
    borderRadius: 40,
    width: 150,
    justifyContent: "space-between",
    flex: 1,
    margin: 5
  },

  container: {
    flex: 1,
    justifyContent: "flex-end",
    alignItems: "center"
  },

  map: {
    ...StyleSheet.absoluteFillObject,
  },

  marker: {
    alignItems: "center"
  },

  markerImage: {
    width: 45,
    height: 45
  },

  markerTitle: {
    color: colors.secondary,
    fontSize: 10
  },

  scroller: {
    justifyContent: "center",
    alignItems: "center",
  },

  selector: {
    backgroundColor: colors.primary,
    width: 100,
    height: 25
  },

  text: {
    fontSize: 20,
  },

  topContainer: {
    position: "absolute",
    height: 100,
    width: "100%",
    top: 0,
    left: 0,
    backgroundColor: colors.ternary,
    justifyContent: "center"
  },

  uncheckedButtonBorder: {
    backgroundColor: colors.forth,
    borderRadius: 40,
    width: 150,
    justifyContent: "space-between",
    flex: 1,
    margin: 5
  }


 });

Steps to reproduce

Run the component in App.js.

Expected result

I expect to see every marker with its image and text.

Actual result

Some markers only show the text. If you click twice on the checkboxes above, you will remove and the reload the marker wich will cause it to load the image correctly.

React Native Maps Version

1.1.0

What platforms are you seeing the problem on?

Android

React Native Version

0.69.2

What version of Expo are you using?

SDK 45

Device(s)

Samsung Galaxy A70

Additional information

No response

[estmau]

I have same issue in iphone 12, ios 15.6.1, react-native-maps 1.3.1 and react native 0.69.5

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[0xcD3v]

@PabloLandro did you solved this? I have a simular issue i have a custom marker like you i have a Image and another component and if i set the tracksViewChanges to false some markers doesn't render they only render after zoom in and zoom out the map.