@situaction/traquiste-mobile

React Native UI component library for Traquiste — built with Expo + TypeScript strict + native StyleSheet.

Requirements

Your project must target:

• Expo >= 50
• React >= 18
• React Native >= 0.74

Installation

npm install @situaction/traquiste-mobile

Peer dependencies

Install the following packages in your app if not already present:

npm install expo react react-native \
  @gorhom/bottom-sheet \
  react-native-reanimated \
  react-native-gesture-handler \
  react-native-safe-area-context \
  phosphor-react-native

@gorhom/bottom-sheet requires additional setup — follow the official guide.

Setup

Wrap your app with ThemeProvider at the root:

import { ThemeProvider } from '@situaction/traquiste-mobile';

export default function App() {
  return (
    <ThemeProvider>
      {/* your app */}
    </ThemeProvider>
  );
}

Custom theme

<ThemeProvider
  light={myLightTokens}   // override default light tokens
  dark={myDarkTokens}     // override default dark tokens
  colorScheme="dark"      // force a color scheme (default: system)
  fontFamily="Inter"      // override font family (default: 'Urbanist')
>

Components

| Component | Description | |-----------|-------------| | Button | Primary, ghost, tertiary, destructive variants | | ButtonAction | Icon-only action button | | ButtonMap | Floating map action button | | ButtonMenu | Tab bar menu button with badge | | Card / CardEquip / CardProfile | Equipment and profile cards | | FilterChip / FilterNav | Filter chips and filter bar | | Input | Text field with label, icons, helper text | | ListItem | Flexible list row with leading/trailing slots | | MapPin / Cluster | Map markers for react-native-maps | | Tag / AssociationTag | Labels and MAC address badges | | Calendar | Date picker with range selection | | MediaPicker | Photo and file upload cards | | BottomSheet | Controlled bottom sheet with theming | | SearchBar | Search input with clear button | | Checkbox / RadioButton / Switch | Form controls | | Spinner / ProgressStep / Stepper | Progress indicators | | GeneralNav / PageNav | Navigation headers | | Tab / TabBar | Tab navigation | | ColorPicker / ColorSwatch | Color selection |

Stack

• Expo SDK 55 / React Native 0.83 / React 19
• TypeScript strict — zero any
• Native StyleSheet only — no external styling library
• phosphor-react-native for icons

License

MIT