47e8085581
Refactor all 18 React Native components from static DTColors imports to dynamic useDTTheme() context, enabling proper visual differentiation when switching between DT and Classic brands. Key changes: - Replace static DTColors with theme context in all components - Add shape tokens (bevel/radius) to DTExtendedTheme interface - Conditionally render SVG bevels (DT) vs borderRadius (Classic) - Configure fonts per brand (Tektur for DT, system sans-serif for Classic) - Update buildThemeFromBrand to parse shape and typography tokens - Fix Metro config for monorepo singleton resolution Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@dangerousthings/react-native
React Native components for the Dangerous Things design system — 18 themed components built on React Native Paper with cyberpunk beveled aesthetics.
Install
npm install @dangerousthings/react-native
Peer Dependencies
npm install react-native-paper react-native-safe-area-context react-native-svg
Optional for custom fonts:
npx expo install expo-font
Setup
Wrap your app with DTThemeProvider:
import { DTThemeProvider } from "@dangerousthings/react-native";
export default function App() {
return (
<DTThemeProvider>
{/* your app */}
</DTThemeProvider>
);
}
Options:
<DTThemeProvider
includeSafeArea={true} // wraps in SafeAreaProvider (default: true)
/>
Components
Basic
| Component | Description |
|---|---|
DTButton |
Beveled button with variant colors (normal, emphasis, warning, success, other) |
DTCard |
Beveled card with optional header and title |
DTChip |
Compact labeled element (MD3 chip style) |
DTLabel |
Top-right beveled label with status colors |
Forms
| Component | Description |
|---|---|
DTTextInput |
Sharp-cornered input with focus glow |
DTCheckbox |
Beveled checkbox with opposing corner cuts |
DTSwitch |
Angular toggle switch |
DTRadioGroup |
Hexagonal radio buttons |
DTQuantityStepper |
Beveled +/- increment buttons |
DTSearchInput |
Search-styled text input |
Layout & Display
| Component | Description |
|---|---|
DTProgressBar |
Angular progress bar with optional label |
DTMediaFrame |
Diagonal beveled frame for images |
DTAccordion |
Collapsible sections with accent border |
DTHexagon |
Decorative hexagon SVG shape |
Interactive
| Component | Description |
|---|---|
DTModal |
Modal dialog with beveled corners |
DTDrawer |
Side drawer with edge bevels |
DTGallery |
Image gallery |
DTMenu |
Dropdown menu with item variants |
Usage Examples
import { DTButton, DTCard, DTTextInput } from "@dangerousthings/react-native";
// Button with variant
<DTButton variant="normal" onPress={handlePress}>
Scan NFC
</DTButton>
// Card with title
<DTCard title="Scan Results" mode="normal">
<Text>Chip detected</Text>
</DTCard>
// Text input with error state
<DTTextInput
variant="normal"
label="Username"
error={true}
errorMessage="Required"
/>
Theme Utilities
import { useDTTheme, getColor, getVariantColor } from "@dangerousthings/react-native";
// Access the full theme in a component
const theme = useDTTheme();
theme.colors.primary; // "#00FFFF"
// Get a color with optional opacity
getColor("modeNormal", 0.5); // "rgba(0, 255, 255, 0.5)"
// Resolve a variant name to its color
getVariantColor("emphasis"); // "#FFFF00"
Bevel Utilities
Build SVG paths for custom beveled shapes:
import {
buildBeveledRectPath,
buildButtonBevelPath,
buildCardBevelPath,
} from "@dangerousthings/react-native";
// Custom bevel
const path = buildBeveledRectPath(200, 48, { bottomRight: 12 });
// Preset bevel paths
const buttonPath = buildButtonBevelPath(200, 48);
const cardPath = buildCardBevelPath(300, 200);
Re-exported Paper Components
For convenience, these React Native Paper components are re-exported:
Text, Surface, IconButton, ActivityIndicator, Divider, List, Portal, Modal, Snackbar, TextInput