@core_super_app/ui

Shared UI component library for React Native applications in the Super App ecosystem.

Components

• BaseView — page layout wrapper with header and loading overlay
• Header — header bar with back button, title/subtitle, and right view slot
• LoadingOverlay — full-screen loading overlay
• TextWrapper — Text wrapper with default styles and accessibility support
• BasicButton — gradient button with disabled state
• BasicInput — animated label input with clear button, char counter, and imperative ref
• RadioButton — radio button with selected/unselected state
• BottomSheet — bottom sheet powered by @lodev09/react-native-true-sheet
• SelectListBottomSheet — bottom sheet with a selectable list and optional radio buttons
• EmptyComponent — empty state placeholder

Installation

yarn add @core_super_app/ui

or

npm install @core_super_app/ui

Requirements

• Node.js v22.20.0 (see .nvmrc)
• React Native 0.84.x
• Peer dependencies:
  • react-native-reanimated >= 4.3.0
  • react-native-linear-gradient >= 2.8.3
  • react-native-worklets >= 0.8.1
  • react-native-safe-area-context
  • @react-navigation/native
  • @core_super_app/utils

Usage

Import

import {
  BaseView,
  Header,
  LoadingOverlay,
  TextWrapper,
  BasicButton,
  BasicInput,
  RadioButton,
  BottomSheet,
  SelectListBottomSheet,
  ImageSrc,
} from '@core_super_app/ui';

BasicButton

<BasicButton onPress={() => console.log('pressed')}>
  Login
</BasicButton>

BasicInput with imperative ref

import { useRef } from 'react';
import { BasicInput } from '@core_super_app/ui';

type InputRef = {
  focus: () => void;
  blur: () => void;
};

const inputRef = useRef<InputRef>(null);

<BasicInput
  ref={inputRef}
  label="Phone number"
  value={phone}
  onChange={setPhone}
  showClearButton
/>;

BaseView

<BaseView isLoading={loading} back title="Profile">
  {/* Screen content */}
</BaseView>

BottomSheet

import { useRef } from 'react';
import { TrueSheet } from '@lodev09/react-native-true-sheet';
import { BottomSheet } from '@core_super_app/ui';

const sheetRef = useRef<TrueSheet>(null);

<BottomSheet ref={sheetRef} detents={['auto', '50%']}>
  {/* Sheet content */}
</BottomSheet>

SelectListBottomSheet

<SelectListBottomSheet
  ref={sheetRef}
  data={[
    { label: 'Option A', value: 'a' },
    { label: 'Option B', value: 'b' },
  ]}
  currentSelected={selected}
  onSelect={(value) => setSelected(value)}
  showRadioButton
/>

API

BaseView

| Prop | Type | Description | |------|------|-------------| | background | ColorValue | Background color | | isLoading | boolean | Show loading overlay | | ...HeaderProps | | All Header props |

Header

| Prop | Type | Description | |------|------|-------------| | back | boolean | Show back button | | leftIcon | ReactNode | Custom left icon | | onPressLeftIcon | () => void | Left icon press handler | | title | string | Title text | | subTitle | string | Subtitle text | | titleStyle | TextStyle | Title text style | | titleMaxLines | number | Max lines for title | | rightView | ReactNode | Right slot content | | disabledBackHandler | boolean | Disable hardware back |

BasicInput

| Prop | Type | Description | |------|------|-------------| | label | string | Animated floating label | | value | string | Input value | | onChange | (text: string) => void | Change handler | | showClearButton | boolean | Show clear (×) button | | showLimitCount | boolean | Show character counter | | maxLength | number | Max character count | | isError | boolean | Error border state | | required | boolean | Show required mark (*) | | readOnly | boolean | Read-only mode | | disabled | boolean | Disabled state | | replaceRegex | RegExp | Regex to strip from input | | renderLeftIcon | JSX.Element | Left icon slot | | renderRightIcon | JSX.Element | Right icon slot |

Imperative ref methods: focus(), blur()

BottomSheet

| Prop | Type | Description | |------|------|-------------| | name | string | Sheet identifier for imperative control | | ref | RefObject<TrueSheet> | Ref for programmatic show/dismiss | | detents | SheetDetent[] | Size stops, default ['auto'] | | dimmed | boolean | Show backdrop dim, default true | | scrollable | boolean | Enable scroll inside sheet | | header | JSX.Element | Header slot | | footer | ReactNode | Footer slot (auto safe-area padded) | | backgroundColor | ColorValue | Sheet background color | | stackBehavior | StackBehavior | Behavior when stacking sheets | | onShow | (e) => void | Called when sheet presents | | onBlur | (e) => void | Called when sheet loses focus | | onFocus | (e) => void | Called when sheet gains focus |

SelectListBottomSheet

Extends all BottomSheet props, plus:

| Prop | Type | Description | |------|------|-------------| | data | { label: string; value: any }[] | List items | | onSelect | (value: any) => void | Selection handler | | currentSelected | any | Currently selected value | | showRadioButton | boolean | Show radio buttons | | showSeparator | boolean | Show item separators, default true | | showEmptyComponent | boolean | Show empty state, default false | | itemContainerStyle | ViewStyle | Style for each item row |

RadioButton

| Prop | Type | Description | |------|------|-------------| | isSelected | boolean | Selected state | | onSelect | () => void | Selection callback | | disabled | boolean | Disable interaction | | containerStyle | ViewStyle | Outer container style |

Scripts

| Command | Description | |---------|-------------| | yarn clean | Remove build artifacts | | yarn prepare | Build the package via react-native-builder-bob | | yarn typecheck | Run TypeScript type check | | yarn lint | Lint source files | | yarn test | Run Jest tests | | yarn release | Bump version and publish via release-it |

CI

GitHub Actions (.github/workflows/ci.yml) runs:

• Lint + type check
• Unit tests with coverage
• Library build
• Android example build (with Turbo cache)
• iOS example build (with Turbo cache)

Publishing

The package is published publicly to npm (publishConfig.access = public).

yarn release

Release flow uses release-it + conventional changelog + git tag v<version>.

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

Commit messages follow the Conventional Commits specification.

License

MIT