@nascimento-software/mobile-ui

Shared React Native UI component library for the Condo Prático mobile apps.

Installation

npm install @nascimento-software/mobile-ui

Peer Dependencies

| Package | Version | | -------------------------------- | ------------------ | | react | >=19.0.0 <20.0.0 | | react-native | >=0.83.0 <0.84.0 | | react-native-paper | ^5.15.0 | | expo-glass-effect | ~55.0.1 | | expo-haptics | ~55.0.1 | | @gorhom/bottom-sheet | ^5.2.0 | | lucide-react-native | ^1.8.0 | | react-native-safe-area-context | >=5.0.0 <6.0.0 |

Usage

Wrap your app with SharedThemeProvider:

import { SharedThemeProvider } from '@nascimento-software/mobile-ui';

<SharedThemeProvider theme={myTheme} colorScheme="light">
  <App />
</SharedThemeProvider>;

Components

• Button — Full-width or compact button with iOS liquid glass support
• Chip — Status badge / filter chip
• SurfaceCard — Card container with glass on iOS, elevation on Android
• CircularIconFab / ExtendedFab — Floating action buttons
• SegmentedButton — iOS/Android segmented control
• EmptyGuidanceCard — Empty state with composable sub-components

EmptyGuidanceCard (composable API)

import { EmptyGuidanceCard } from '@nascimento-software/mobile-ui';

<EmptyGuidanceCard embedded>
  <EmptyGuidanceCard.Icon>
    <SearchIcon />
  </EmptyGuidanceCard.Icon>
  <EmptyGuidanceCard.Title>Nothing found</EmptyGuidanceCard.Title>
  <EmptyGuidanceCard.Description>Try a different filter</EmptyGuidanceCard.Description>
  <EmptyGuidanceCard.Action onPress={clear} icon={<XIcon />}>
    Clear filters
  </EmptyGuidanceCard.Action>
</EmptyGuidanceCard>;

Glass override

By default, liquid glass is auto-detected at runtime. Override via the provider for Storybook or testing:

<SharedThemeProvider theme={theme} colorScheme="dark" glassEnabled={false}>
  {/* All components render flat (no glass) */}
</SharedThemeProvider>

ConfirmSheet

Use the sub-path import to avoid bundling @gorhom/bottom-sheet on iOS:

import { ConfirmSheet } from '@nascimento-software/mobile-ui/confirm-sheet';

Building

pnpm --filter @nascimento-software/mobile-ui build

Outputs lib/commonjs/, lib/module/, and lib/typescript/.

Publishing to npm

1. Make sure you're logged in to npm with an account that has publish access to the @nascimento-software org:

   npm login

2. Bump the version in package.json (follow semver):

   cd packages/mobile-ui
   npm version minor   # or minor / major

3. Build the package:

   pnpm build

4. Publish:

   npm publish --access public

   Run this from the packages/mobile-ui directory.

5. Commit the version bump and push:

   git add package.json
   git commit -m "release: @nascimento-software/mobile-ui vX.Y.Z"
   git push