Unable to render simple geojson data using ShapeSource and SymbolLayer

[xharris]

I'm losing my mind trying to figure out why this isn't working. I just want to render geojson data on the map as circles, but nothing is showing up on the map. The map renders successfully, just no points on it. I'm running this using npm run android.

App.tsx

import { StatusBar } from 'expo-status-bar'
import { StyleSheet } from 'react-native'
import { Map } from './components/map'

const MainScreen = () => {
  return (
    <>
      <Map />
      <StatusBar style="auto" />
    </>
  )
}

const App = () => (
    <MainScreen />
)

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

export default App

---

components/map/index.tsx

import Mapbox from '@rnmapbox/maps'
import { useEffect, useRef } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { FeatureCollection } from 'geojson'

Mapbox.setAccessToken(
  'pk.ey...',
)

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  container: {
    flex: 1,
    backgroundColor: 'tomato',
  },
  map: {
    flex: 1,
  },
})

interface MapProps {
  data?: FeatureCollection
}

const Map = ({ data }: MapProps) => {
  return (
    <View style={styles.container}>
        <Mapbox.MapView
          style={styles.map}
          scaleBarEnabled={false}
        >
          <Mapbox.Camera />
          <Mapbox.ShapeSource 
              shape={
                {
                  type: 'FeatureCollection',
                  features: [
                    {
                      type: 'Feature',
                      geometry: {
                        type: 'Point',
                        coordinates: [-82.679306, 41.47792], // Ohio, US
                      },
                    },
                  ],
                } as FeatureCollection
              }>
            <Mapbox.SymbolLayer
              id="markers"
              style={
                {
                  circleRadius: 10,
                  circleColor: 'black',
                } as Mapbox.SymbolLayerStyle
              }
            />
          </Mapbox.ShapeSource>
        </Mapbox.MapView>
    </View>
  )
}

export { Map }

---

package.json

{
  "name": "rnapp",
  "version": "1.0.0",
  "main": "expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "adb reverse tcp:8000 tcp:8000 && expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/metro-runtime": "~3.2.3",
    "@rnmapbox/maps": "^10.1.31",
    "@tanstack/react-query": "^5.59.0",
    "expo": "~51.0.28",
    "expo-location": "~17.0.1",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.7",
    "ky": "^1.7.2",
    "mapbox-gl": "^2.15.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.5",
    "react-native-web": "~0.19.10",
    "expo-constants": "~16.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "typescript": "~5.3.3"
  },
  "resolutions": {
    "**/babel-plugin-react-compiler": "0.0.0-experimental-592953e-20240517"
  },
  "private": true
}

---

tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "jsx": "react-jsx"
  }
}

Any help is greatly appreciated. Can provide more context if needed.

[xharris]

In the web version I also see this error:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at index.tsx:50.
Map@http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:5404:9

Line 50 is <Mapbox.SymbolLayer. But I also have no clue why this is happening.

[Elter71]

Hi @xharris,

It looks like you're missing the id in <Mapbox.ShapeSource>. Also, for rendering circles, you should use CircleLayer instead of SymbolLayer.

Here’s an example that demonstrates the correct usage:
BugReportExample.js