@twinmatrix/rn-ui-sdk

React Native UI SDK for TwinMatrix map experiences.

Embed-first: compose MapExperience with MetaAtlas RN SDK, overlay Sheet / ListView, and use MapBridge so search/list/GPS can wire to the map internally (props still win when provided).

Install

Every host must install both TwinMatrix packages plus all peers below (map SDK is not optional).

npm install @twinmatrix/[email protected] @twinmatrix/[email protected]

npm install \
  [email protected] \
  [email protected] \
  react-native-safe-area-context@^5.6.2 \
  [email protected] \
  react-native-reanimated@^3.16.6 \
  react-native-svg@^15.11.1 \
  @gorhom/bottom-sheet@^5.1.2 \
  @shopify/flash-list@^1.7.3 \
  zustand@^5.0.8 \
  @maplibre/[email protected] \
  [email protected] \
  [email protected] \
  [email protected] \
  [email protected] \
  [email protected] \
  @react-native-community/[email protected] \
  [email protected]

Also configure gesture-handler (entry import + GestureHandlerRootView), safe-area (SafeAreaProvider), and Reanimated (react-native-reanimated/plugin last in Babel).

Quick start (MapBridge)

import {
  MapExperience,
  ListView,
  GpsControlButton,
  SearchResultsList,
  ListingCard,
  useMapBridge,
  setCustomTheme,
} from '@twinmatrix/rn-ui-sdk';

setCustomTheme('light', { accent: { primary: '#0B7A75' } });

function MapChrome() {
  const { registerMap, setSearchReady, setSearchQuery, searchQuery, places, select } =
    useMapBridge();

  return (
    <>
      <MapExperience.Canvas>
        <MetaAtlasSDK
          ref={registerMap}
          onSearchStatusUpdate={setSearchReady}
          {/* credentials */}
        />
      </MapExperience.Canvas>
      <MapExperience.Chrome>
        <TextInput value={searchQuery} onChangeText={setSearchQuery} />
        <SearchResultsList />
        <GpsControlButton layout="stack" />
        <ListView.Root open orientation="horizontal">
          <ListView.Body
            data={places}
            keyExtractor={(p) => p.id}
            renderItem={({ item }) => (
              <ListingCard place={item} layout="card" onPress={select} />
            )}
          />
        </ListView.Root>
      </MapExperience.Chrome>
    </>
  );
}

export function MapTab() {
  return (
    <MapExperience.Root>
      <MapChrome />
    </MapExperience.Root>
  );
}

Modules

• layout/ — MapExperience, ListView, MapCanvas
• bridge/ — MapBridgeProvider, useMapBridge, toPlaceItem, enrichment
• ui/ — TopBar, Sheet, BottomBar, Banner, Card, ListRow, Button, …
• widgets/ — search, routing, navigation, GPS, listing cards
• theme/ — setCustomTheme, useAppTheme
• types/ — PlaceItem and related DTOs

Category chips stay host-driven. Pass items / data to override bridge-backed surfaces.

Color overrides

Theme tokens → widget colors prop → item colors on PlaceItem / list rows.

License

Proprietary — TwinMatrix Technologies.