expo-typescript-shared-ui

Shared UI Component Library for React Native — built with Storybook documentation and published as an npm package.

Features

• Theme System — Built on @shopify/restyle with Dark (Default) and Green theme variants
• 90+ Reusable Components — Buttons, inputs, badges, icons, overlays, lists, cards, forms, scanners, and more
• Storybook Documentation — Interactive component playground with 17 stories
• TypeScript — Full type safety with exported types
• Cross-platform — React Native (iOS/Android) with React Native Web support

Installation

Using npm

npm install expo-typescript-shared-ui

Using yarn

yarn add expo-typescript-shared-ui

Using pnpm

pnpm add expo-typescript-shared-ui

Using bun

bun add expo-typescript-shared-ui

Peer Dependencies

These must be installed in your project:

npm:

npm install react react-native @shopify/restyle @expo/vector-icons react-native-svg react-i18next i18next react-redux @reduxjs/toolkit

yarn:

yarn add react react-native @shopify/restyle @expo/vector-icons react-native-svg react-i18next i18next react-redux @reduxjs/toolkit

pnpm:

pnpm add react react-native @shopify/restyle @expo/vector-icons react-native-svg react-i18next i18next react-redux @reduxjs/toolkit

bun:

bun add react react-native @shopify/restyle @expo/vector-icons react-native-svg react-i18next i18next react-redux @reduxjs/toolkit

Quick Start

1. Wrap your app with ThemeProvider

import { ThemeProvider } from '@shopify/restyle';
import { DefaultTheme } from 'expo-typescript-shared-ui';

export default function App() {
  return (
    <ThemeProvider theme={DefaultTheme}>
      <YourApp />
    </ThemeProvider>
  );
}

2. Use components

import {
  BoxComponent,
  TextComponent,
  Button,
  Badge,
  IconComponent,
  IconsEnum,
  InputTextComponent,
  DividerComponent,
  ChipComponent,
  HeadingComponent,
  OverlayComponent,
} from 'expo-typescript-shared-ui';

function MyScreen() {
  return (
    <BoxComponent backgroundColor="surface" padding="m">
      <HeadingComponent title="My Section" />
      
      <TextComponent variant="bodyLarge" color="onSurface">
        Hello World
      </TextComponent>

      <Button variant="filled" onPress={() => {}}>
        Click Me
      </Button>

      <Badge count={5} />

      <IconComponent
        name="home"
        iconType={IconsEnum.FontAwesome}
        fontSize={24}
      />

      <InputTextComponent
        variant="outlined"
        placeholder="Enter text..."
        value=""
      />

      <DividerComponent bold />

      <ChipComponent
        value={{ name: 'Tag' }}
        keyLabel="name"
        onDelete={(v) => console.log(v)}
      />
    </BoxComponent>
  );
}

3. Theme Switching

import { DefaultTheme, GreenTheme, SwitchThemeProvider } from 'expo-typescript-shared-ui';
import { ThemeProvider } from '@shopify/restyle';

// Use GreenTheme for an alternative look
<ThemeProvider theme={GreenTheme}>
  <YourApp />
</ThemeProvider>

Available Components

Foundation

| Component | Description | |---|---| | BoxComponent | Theme-aware View wrapper (spacing, colors, layout) | | TextComponent | Theme-aware Text with variant support | | ContainerComponent | Extended Box with full restyle props | | ContainerV2Component | Container with responsive padding | | SurfaceComponent | Platform-specific elevation (shadows) | | TouchableRipple | Pressable with Android ripple effect | | TouchableOpacityComponent | TouchableOpacity wrapper |

Input

| Component | Description | |---|---| | Button | Button with filled, outlined, text variants | | InputTextComponent | Text input with outlined/filled/standard variants | | MaskInputTextComponent | Masked text input (e.g., time format) | | CheckboxComponent | Checkbox with custom icons | | RadioButtonComponent | Radio button with label | | RadioButtonGroupComponent | Radio button group | | RadioButtonGroupWithLabelComponent | Labeled radio button group | | MultiSelectionBoxComponent | Multi-select dropdown | | SearchBoxComponent | Search input box | | SearchBarComponent | Search bar component | | CalendarComponent | Date/time picker with calendar | | TimeComponent | Time input with meridian |

Display

| Component | Description | |---|---| | Badge | Numeric count badge | | IconComponent | Multi-library icon (FontAwesome, Ionicons, MaterialIcons, etc.) | | IconButtonComponent | Clickable icon button | | IconCloseComponent | Close (X) icon button | | CustomIconComponent | Custom stacked text icon | | ChipComponent | Deletable label chip | | DividerComponent | Horizontal separator | | DashedLineComponent | Dashed line separator | | HeadingComponent | Section heading with border | | ActivityIndicatorComponent | Loading spinner | | LoadingComponent | Full-screen loading overlay | | StatusFormatter | Status badge formatter | | SortColumnIconComponent | Sortable column header icon | | CartIconButton | Cart icon with badge count | | DeleteIconComponent | Delete icon button |

List & Data

| Component | Description | |---|---| | AccordionListComponent | Collapsible accordion list | | ListCardsComponent | Card-based list | | ListSingleWithoutScrollComponent | Non-scrollable single list | | ListV2Component | Enhanced list with row footer | | ModalListComponent | Modal-based list picker | | DataCardComponent | Data display card with rows/columns | | CardComponent | Simple card container | | TitleCardComponent | Card with title header |

Layout

| Component | Description | |---|---| | FieldsetComponent | Fieldset with titled border | | FormContainer, FormRow, FormColumn | Form layout components | | FormLabel, FormFooter | Form helpers | | HeaderComponent | App header | | HeaderWithBackComponent | Header with back navigation | | FooterComponent | Footer bar |

Button Variants

| Component | Description | |---|---| | CancelButtonComponent | Cancel action button | | FilterButtonComponent | Filter toggle button | | NewButtonComponent | New/create button | | NextButtonComponent | Next step button | | ResetButtonComponent | Reset action button | | SaveButtonComponent | Save action button | | ScanButtonComponent | Scan trigger button | | TextButtonComponent | Text-only button |

Overlay / Modal / Popup

| Component | Description | |---|---| | OverlayComponent | Full-screen modal overlay | | AlertComponent | Alert dialog with action button | | ConfirmationBoxComponent | Confirmation dialog (Cancel/Proceed) | | ErrorInfoPopupComponent | Error information popup | | SuccessInfoPopupComponent | Success information popup | | TooltipComponent | Walkthrough tooltip | | AuthorizationAlertComponent | Authorization message | | Menu, MenuItem | Dropdown menu |

Animated

| Component | Description | |---|---| | AnimatedTextComponent | Animated text with restyle support | | ScreenOrientationLockComponent | Screen orientation lock |

Utilities

| Export | Description | |---|---| | useIsTablet, useIsMobile | Device type detection hooks | | useScreenContentWidth | Screen width calculation | | screenPaddingHorizontal | Horizontal padding constant | | RenderChildren | Conditional rendering helper | | splitStyles | Style splitting utility | | hasTouchHandler | Touch handler detection utility | | IconsEnum | Icon library type enum | | ColumnOrder | Sort direction enum | | CompareColumn | Filter comparison enum |

Models & Types

| Export | Description | |---|---| | IFilters | Filter interface | | IPagination | Pagination interface | | IListResponse<T> | List response interface | | IQueryRequest | Query request interface | | IQueryResult<T> | Query result interface | | IOrderBy | Order by interface | | IFieldOrderBy | Field order interface | | TAPIErrorReasonWithMessage | API error type |

Development

Run Storybook

npm install
npm run storybook

Build the package

npm run build

Publish to npm

# Login to npm registry
npm login

# For scoped packages (private registry):
npm publish

# For public packages:
npm publish --access public

Project Structure

expo-typescript-shared-ui/
├── .storybook/          # Storybook configuration
│   ├── main.ts
│   └── preview.tsx
├── src/
│   ├── Configs/
│   │   ├── Theme/       # Theme system (DefaultTheme, GreenTheme, etc.)
│   │   ├── Store/       # Redux store hooks (stubs)
│   │   ├── Environments/# Environment config
│   │   ├── I18N/        # Internationalization
│   │   └── Navigation/  # Navigation type stubs
│   ├── Commons/         # HTTP service, Options (stubs)
│   ├── Modules/         # Module service stubs (FactoryModel, Inventory, etc.)
│   ├── Screens/         # Screen model stubs (WorkOrder, etc.)
│   ├── Shared/          # All 94 shared component folders
│   │   ├── AccordionList/
│   │   ├── Alert/
│   │   ├── API/
│   │   ├── Box/
│   │   ├── ButtonV2/
│   │   ├── Calendar/
│   │   ├── Card/
│   │   ├── DataCard/
│   │   ├── Icon/
│   │   ├── InputText/
│   │   ├── List/
│   │   ├── Overlay/
│   │   ├── Scanner/
│   │   ├── Snackbar/
│   │   ├── Spinner/
│   │   └── ... (94 folders total)
│   ├── stories/         # 17 Storybook stories
│   └── index.ts         # Package barrel export
├── dist/                # Build output (generated)
├── package.json
├── tsconfig.json
├── tsup.config.ts       # Build configuration
└── babel.config.js

Notes

External Dependencies (Stubs)

Some components depend on services and models from the original application. These have been included as stubs under Commons/, Modules/, and Screens/. The consuming application should:

• Override path aliases to point to actual implementations, or
• Use dependency injection patterns to provide real services

Components requiring real implementations:

• Snackbar, Spinner, Scanner — Depend on Redux store (Configs/Store)
• Logger, ReasonCode, Carrier, InventoryRunTime — Depend on HTTP services (Commons/Http)
• TravelOrder, FactoryModel — Depend on domain services (Modules/*, Screens/*)

Extending

To add more components from the original project:

1. Copy the component folder from src/Shared/ in the main project
2. Update import paths to use relative paths (replace Configs/Theme with ../../Configs/Theme, etc.)
3. Add the export to src/index.ts
4. Create a story in src/stories/
5. Run npm run build and publish

License

UNLICENSED — Internal use only.