Slowness when creating LineString

---

Problem Description:

• As the center of the map changes, I set the coordinate of the new center to the LineString component. But LineString changes very slowly.

This is video url for problem : https://vimeo.com/724430478

---

My Code:

import React, { useRef, useState } from 'react';
import { Pressable, View } from 'react-native';

//Third Party
import MapboxGL from '@rnmapbox/maps';

//Styles
import styles from './style';
import Icon from '@components/Icon';

MapboxGL.setAccessToken('NOT_REQUIRED');

const Maps = () => {
	const [points, setPoints] = useState([]);
	const [mapCenter, setMapCenter] = useState([]);

	const camRef = useRef(null);
	const mapRef = useRef(null);

	const RouteLine = () => {
		return (
			<MapboxGL.ShapeSource
				id="routeLine"
				shape={{
					type: 'FeatureCollection',
					features: [
						{
							type: 'Feature',
							properties: {},
							geometry: {
								type: 'LineString',
								coordinates: points,
							},
						},
					],
				}}>
				<MapboxGL.LineLayer
					id="lines"
					style={{
						lineColor: 'blue',
					}}
				/>
			</MapboxGL.ShapeSource>
		);
	};
	const LastLine = () => {
		return (
			<MapboxGL.ShapeSource
				id="LastLineShape"
				shape={{
					type: 'FeatureCollection',
					features: [
						{
							type: 'Feature',
							properties: {},
							geometry: {
								type: 'LineString',
								coordinates: [points?.[points?.length - 1] || [], mapCenter],
							},
						},
					],
				}}>
				<MapboxGL.LineLayer
					id="preLines"
					style={{
						lineColor: 'blue',
						lineDasharray: [10, 5],
					}}
				/>
			</MapboxGL.ShapeSource>
		);
	};

	const setNewPoint = async () => {
		const point = await mapRef?.current?.getCenter();
		setPoints(x => [...x, point]);
	};
	const changeMapRagion = val => {
		setMapCenter(val?.geometry?.coordinates);
	};

	return (
		<View style={styles.container}>
			<MapboxGL.MapView
				ref={mapRef}
				style={styles.map}
				logoEnabled={false}
				attributionEnabled={false}
				onRegionIsChanging={changeMapRagion}
				// onRegionDidChange={changeMapRagion}
				styleURL={'https://***.json'}>
				<MapboxGL.Camera ref={camRef} centerCoordinate={[35, 39]} zoomLevel={3.5} animationDuration={1200} />
				<RouteLine />
				{points?.length > 0 && <LastLine />}
			</MapboxGL.MapView>
			<View style={styles.target}>
				<Icon name="target : materialcomm" size={40} />
			</View>
			<Pressable style={styles.plusPointPress} onPress={setNewPoint} hitSlop={8}>
				<Icon name="plus : feather" size={40} color="#fff" />
			</Pressable>
		</View>
	);
};

export default Maps;

[jjrise]

react-native-maps. Would prefer this library and mapbox in general, but had some road blocks that held things up.

[sharathprabhal]

not sure if you had any luck with this? but I had a similar issue that I messed with for weeks that ultimately led me switching to a different mapping library. I was trying to build a linestring from a recorded route, and FPS would drop to <5 in only a few minutes. I can do the same in this new library for hours without any issues.

What lib did you switch to?