@demlanide/react-lucky-components

Styled React Native components extracted for reuse: ListCell, Tabs (floating glass tab bar), and tab icons. Built for Expo / React Native with TypeScript.

Contents

• ListCell – Versatile list-cell row with two trailing modes: switch (animated toggle) and navigation (detail text + chevron). Also works as a standalone toggle when no title is provided.
• Tabs – Bottom tab navigator with frosted-glass pill design; uses @react-navigation/bottom-tabs with a custom tab bar.
• Tab icons – GroupTabIcon, ActivityTabIcon, AccountTabIcon (SVG).
• useFloatingTabBarScrollPadding – Hook for scroll padding above the floating tab bar.

Install

In your React Native / Expo app:

npm install @demlanide/react-lucky-components

Peer dependencies (install if not already present):

• react, react-native
• @react-navigation/bottom-tabs
• expo-blur
• react-native-reanimated
• react-native-safe-area-context
• react-native-svg

Usage

ListCell

import { ListCell } from '@demlanide/react-lucky-components';

// Standalone toggle (no title)
<ListCell value={on} onValueChange={setOn} />

// List cell with explicit switch trailing
<ListCell
  trailing="switch"
  value={notifications}
  onValueChange={setNotifications}
  title="Notifications"
  subtitle="About transactions, debt, new expenses"
/>

// Navigation with detail text + chevron
<ListCell
  trailing="navigation"
  title="Preferred Currency"
  detail="£ · GBR"
  onPress={() => navigation.navigate('Currency')}
/>

// Navigation with chevron only
<ListCell
  trailing="navigation"
  title="Policies and terms"
  onPress={() => navigation.navigate('Policies')}
/>

Migration note: Switch is still exported as an alias for backward compatibility. New code should use ListCell.

Tabs

import {
  Tabs,
  GroupTabIcon,
  ActivityTabIcon,
  AccountTabIcon,
  useFloatingTabBarScrollPadding,
} from '@demlanide/react-lucky-components';
import type { TabItem } from '@demlanide/react-lucky-components';

const tabs: TabItem[] = [
  {
    name: 'Groups',
    label: 'Group',
    component: GroupsScreen,
    icon: ({ color, size }) => <GroupTabIcon color={color} size={size} />,
  },
  {
    name: 'Activity',
    label: 'Activity',
    component: ActivityScreen,
    icon: ({ color, size }) => <ActivityTabIcon color={color} size={size} />,
  },
  {
    name: 'Account',
    label: 'Account',
    component: AccountScreen,
    icon: ({ color, size }) => <AccountTabIcon color={color} size={size} />,
  },
];

function App() {
  return <Tabs tabs={tabs} initialTab="Groups" />;
}

// In a tab root screen with ScrollView:
function AccountScreen() {
  const paddingBottom = useFloatingTabBarScrollPadding();
  return (
    <ScrollView contentContainerStyle={{ paddingBottom }}>
      {/* ... */}
    </ScrollView>
  );
}

Theming

Components use a small built-in theme (colors.primary, colors.gray300, etc.). Override via props where supported (e.g. activeTintColor, inactiveTintColor on Tabs; activeTrackColor, inactiveTrackColor, thumbColor on ListCell). The package also exports colors and typography from ./theme if you need them.

Repo setup: вынести в отдельный GitHub и публикация в npm

1. Вынести в отдельный репозиторий

1. Создай новый репозиторий на GitHub (например your-username/react-native-components).
2. Скопируй содержимое папки packages/react-native-components в корень нового репо (чтобы в корне лежали package.json, src/, README.md, .storybook/, tsconfig.json, tsconfig.build.json). Папку node_modules и dist копировать не нужно.
3. В новом репо в package.json:
   • поменяй "name" на свой scope или имя (например "@your-username/react-native-components" или "react-native-glass-tabs");
   • в "repository" укажи URL нового репо.

2. Сборка и публикация в npm

В корне нового репо:

npm install
npm run build    # собирает dist/ (JS + .d.ts)
npm publish      # для публичного пакета
# или npm publish --access public   если имя со scope (@username/...)

Перед первым npm publish нужно залогиниться: npm login.
В npm уходит только то, что указано в "files": ["dist", "README.md"] — то есть собранный код и README; исходники и Storybook в пакет не попадают.

3. Подключить пакет обратно в split-buddy

Вариант A — пакет опубликован в npm

В mobile/package.json добавь зависимость:

"@your-username/react-native-components": "^0.1.0"

Потом замени импорты с components-pack на пакет, например:

• from '../../components-pack/Tabs' → from '@your-username/react-native-components'
• from '../../components-pack' (Switch) → from '@your-username/react-native-components'

Папку/алиас src/components-pack в mobile можно удалить (если там только реэкспорт из этого пакета).

Вариант B — разработка до публикации (локально или с GitHub)

Локальная папка (путь относительно mobile/):

"@your-username/react-native-components": "file:../path/to/react-native-components"

Или с GitHub (пока не опубликовал в npm):

"@your-username/react-native-components": "github:your-username/react-native-components#main"

После смены зависимости выполни в mobile/: npm install. Если используешь локальный file:, после правок в библиотеке нужно в ней запускать npm run build, чтобы обновился dist/.

Scripts

• npm run type-check – проверка типов (без сборки).
• npm run build – сборка в dist/ (JS + декларации). Запускается автоматически перед npm publish (prepublishOnly).
• npm run storybook – Storybook в браузере (порт 6006).
• npm run build-storybook – статическая сборка Storybook в storybook-static/.

License

MIT