@bugraongundev/features-bus-stops

Bus stops feature package for Twin SDK.

What it includes

• BusStopsLayer: MapLibre vector tile layer for bus stops
• StopDetailSheet: Stop detail modal (fetches stop data)
• busStopService: API helper for stop detail
• Types: BusStopFeature, BusStopData, etc.

Install

npm install @bugraongundev/features-bus-stops

Peer dependencies

This package expects the host app to provide:

• react
• react-native
• @maplibre/maplibre-react-native
• react-native-vector-icons
• react-i18next

Usage

import React, { useState } from 'react';
import { View } from 'react-native';
import * as MapLibreGL from '@maplibre/maplibre-react-native';
import { BusStopsLayer, StopDetailSheet } from '@bugraongundev/features-bus-stops';
import type { BusStopFeature, BusStopData } from '@bugraongundev/features-bus-stops';

export function MapScreen() {
  const [selectedStop, setSelectedStop] = useState<BusStopFeature | null>(null);
  const [selectedData, setSelectedData] = useState<BusStopData | null>(null);
  const [visible, setVisible] = useState(false);

  return (
    <View style={{ flex: 1 }}>
      <MapLibreGL.MapView style={{ flex: 1 }}>
        <BusStopsLayer
          enabled={true}
          tilesUrl="<YOUR_TILES_URL>"
          onStopPress={(stopNo, coordinates, stopName) => {
            setSelectedStop({
              type: 'Feature',
              geometry: { type: 'Point', coordinates },
              properties: { durak_id: stopNo, durak_adi: stopName },
            });
            setVisible(true);
          }}
        />
      </MapLibreGL.MapView>

      <StopDetailSheet
        visible={visible}
        onClose={() => {
          setVisible(false);
          setSelectedStop(null);
          setSelectedData(null);
        }}
        stopData={selectedData}
        stopFeature={selectedStop}
        apiUrl="<YOUR_API_URL>"
        isDarkMode={false}
      />
    </View>
  );
}