@medway-ui/native

React Native components for iOS and Android. Same API as @medway-ui/core, built on top of NativeWind + @rn-primitives.

Installation

npx expo install @medway-ui/native nativewind react-native-reanimated react-native-svg @react-native-community/datetimepicker

Setup (Expo)

1. tailwind.config.js

const { colors, fontFamily, fontSize, fontWeight, lineHeight, borderRadius, boxShadow } =
  require("@medway-ui/core/tokens");

module.exports = {
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./node_modules/@medway-ui/native/src/**/*.{ts,tsx}",
  ],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {
      colors,
      fontFamily,
      fontSize,
      fontWeight,
      lineHeight,
      borderRadius,
      boxShadow,
    },
  },
};

2. babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

3. metro.config.js

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: "./global.css" });

4. global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Import tokens CSS (design tokens as CSS vars)

In your root _layout.tsx:

import "@medway-ui/core/tokens.css";
import "./global.css";

Usage

import { Button, Input, Alert, Badge } from "@medway-ui/native";

export default function Screen() {
  return (
    <>
      <Button variant="regular" size="md" onPress={() => {}}>
        Continue
      </Button>

      <Input
        label="Email"
        type="email"
        size="lg"
        value={email}
        onChangeText={setEmail}
      />

      <Alert variant="success" onClose={() => {}}>
        <Alert.Container>
          <Alert.Content>
            <Alert.Title>Concluído</Alert.Title>
            <Alert.Description>Operação realizada com sucesso.</Alert.Description>
          </Alert.Content>
        </Alert.Container>
      </Alert>

      <Badge variant="regular" size="md">9+</Badge>
    </>
  );
}

Icons

The @medway-ui/icons package already includes a native entry point:

import { Check, CloseMd } from "@medway-ui/icons/native";

Components — Sprint Status

| Component | Status | Notes | |---|---|---| | Button | ✅ Sprint 1 | Full variants, loading, badge, alert dot | | Input | ✅ Sprint 1 | text, email, password, numeric, floating label | | Alert | ✅ Sprint 1 | Full sub-components, all variants | | Badge | ✅ Sprint 1 | All variants, icon-only detection | | Loading | ✅ Sprint 1 | Reanimated spin animation | | Checkbox | ✅ Sprint 2 | @rn-primitives/checkbox | | RadioGroup | ✅ Sprint 2 | @rn-primitives/radio-group | | Switch | ✅ Sprint 2 | @rn-primitives/switch + Reanimated | | Select | ✅ Sprint 2 | @rn-primitives/select | | Label | ✅ Sprint 2 | Pressable + Text | | Separator | ✅ Sprint 2 | View 1px | | Dialog | ✅ Sprint 3 | @rn-primitives/dialog | | AlertDialog | ✅ Sprint 3 | @rn-primitives/alert-dialog | | Sheet | ✅ Sprint 3 | @rn-primitives/dialog (side-aware layout) | | Tag | ✅ Sprint 3 | View + Text, 16 variants | | Toast | ✅ Sprint 3 | Reanimated slide-in, useToast hook | | Tooltip | ✅ Sprint 3 | @rn-primitives/tooltip | | Popover | ✅ Sprint 3 | @rn-primitives/popover | | Tabs | 🔜 Sprint 4 | @rn-primitives/tabs | | Progress | 🔜 Sprint 4 | @rn-primitives/progress | | ProgressCircle | 🔜 Sprint 4 | react-native-svg | | Skeleton | 🔜 Sprint 5 | Reanimated shimmer | | Avatar | 🔜 Sprint 5 | @rn-primitives/avatar | | Cards | 🔜 Sprint 5 | CardModule, CardLesson, etc. | | DatePicker | 🔜 Sprint 6 | @react-native-community/datetimepicker + Modal |