I'm trying to render multiple markers on the map in MapView. ERROR: Text strings must be rendered within a <text> component

Expected Behavior

I created a filter and map method to render multiple markers. The markers are essentially the latitude (“LAT”) and longitude (“LONG”) found inside a .json file I use as a source.

Observed Behavior

It shows the map, but with no markers and without zooming to the specified initial region. After around a minute of inactivity, I get this error:

Error: Text strings must be rendered within a <text> component

This error is located at:`
in AIRMAP (at MapView.js:994)
in MapView (at App.js:10)
in RCTView (at App.js:9)
in App (created by ExpoRoot)
in RCTView (at NativeAppearance.tsx:4)
in FallbackAppearanceProvider (at src/index.tsx:70)
in AppearanceProvider (created by ExpoRoot)
in RootErrorBoundary (created by ExpoRoot)
in ExpoRoot (at render Applications.js:45)
in RCTView (at AppContainer.js:109)
in RCTView (at AppContainer.js:135)
in AppContainer (at render Application.js: 39)

Environment
Expo CLI 3.22.3 environment info:
System:
OS: macOS 10.15.6
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.4.0 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.4 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
IDEs:
Xcode: /undefined - /usr/bin/xcodebuild
npmPackages:
expo: ~38.0.9 => 38.0.9
react: ~16.11.0 => 16.11.0
react-dom: ~16.11.0 => 16.11.0
react-native: ~0.62.2 => 0.62.2
react-native-web: ~0.11.7 => 0.11.7
npmGlobalPackages:
expo-cli: 3.22.3

Also, specify:

  • I am running the app with the command expo start on chrome with expo developer tools. I have chosen ‘LAN’ connection and scanning the QR code to see how the application performs on my android device.

  • Code:

import React from ‘react’;
import MapView, { Marker } from ‘react-native-maps’;
import { StyleSheet, Text, View, Dimensions, Image } from ‘react-native’;
import oilWells from ‘./oilWells/InjectionWells.json’;

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <MapView
          // It focused correcty above Oklahoma State when a single, hard-coded marker was passed in
          initialRegion={{
            latitude: 36.9003240,
            longitude: -98.2182600,
            latitudeDelta: 0.01,
            longitudeDelta: 5,
          }}
          style={styles.mapStyle} >
          {oilWells.filter(oilwell => 
            (oilwell["LAT"]!== null) && (oilwell["LONG"]!==null)).map((oilwell) => {
            return (<Marker key={oilwell["API#"]} coordinate={{ latitude: oilwell["LAT"], longitude: 
              oilwell["LONG"] }}>
                <Image source={require('./assets/oil-well-marker.png')} style={styles.markerImage} />
              </Marker>);
              })};
            </MapView>
          </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
},
mapStyle: {
  width: Dimensions.get('window').width,
  height: Dimensions.get('window').height,
},
markerImage: {
  width: 30,
  height: 30,
},
});
  • Here is how the .json file looks like for the first object. Please note that “LAT” and “LONG” are of interest. There are a few null values of LAT and LONG. :

    [
    {
    “API#”: 3500300026,
    “Operator”: “PHOENIX PETROCORP INC”,
    “Operator ID”: 19499,
    “WellType”: “2R”,
    “WellName”: “SE EUREKA UNIT-TUCKER #1”,
    “WellNumber”: “21”,
    “OrderNumbers”: “133856”,
    “Approval Date”: “9/6/1977”,
    “County”: “ALFALFA”,
    “Sec”: “13”,
    “Twp”: “28N”,
    “Rng”: “10W”,
    “QQQQ”: “C-SE SE”,
    "LAT": 36.900324,
    "LONG": -98.21826,
    “PSI”: “2,500”,
    “BBLS”: “300”,
    “ZONE”: “CHEROKEE”,
    “FIELD19”: “”,
    “FIELD20”: “”,
    “FIELD21”: “”
    },

  • I tried altering the .json file like:

    ...
    

    coordinate: {
    “LAT”: 36.900324,
    “LONG”: -98.21826
    },

    but it didn’t make any difference.

  • I cannot provide a snack because it gives another error (react-native module not found if I recall correctly)

  • My understanding is that the conditional rendering is not made correctly. Probably the presence of null values in the .json file makes the code, where the filter and map methods are, a bit complicated(?). However, I’m not really sure how to get past this. The solutions I have seen online have to do with cases where react fragments and conditional renderings do not deal with null values inside the .json file.

  • It worked fine when one marker was passed in. A working version with one marker and the InjectionWells.json file can be found on my GitHub repo.

If you need anything else, let me know. Thank you.

Any help please?

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.