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

Expo SDK
1

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.

2

Any help please?

3

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