asv-hlps-rn

React Native UI components and helpers for Expo / React Native apps — companion to asv-hlps.

Installation

npm install asv-hlps-rn
# or
yarn add asv-hlps-rn

Peer Dependencies

npm install react react-native expo @tanstack/react-query formik nativewind

Usage

import {
  // Theme
  ThemeProvider,
  useThemeColors,

  // Components
  Button,
  AsBtn,
  AsCard,
  Section,
  Divider,
  Spacer,
  Container,

  // Forms
  AsInput,
  AsSelect,
  FormikField,
  FormikForm,
  FormikBtnSubmit,

  // Hooks
  useQueryGet,
  useQueryPost,
  useQueryUpdate,
  useQueryDel,

  // Services
  httpService,
  storageService,

  // Helpers
  hlpAlert,
  trans,
} from "asv-hlps-rn";

Wrap your app with ThemeProvider

import { ThemeProvider } from "asv-hlps-rn";

export default function App() {
  return <ThemeProvider>{/* your app */}</ThemeProvider>;
}

Configuration

Set the API URL via environment variable:

EXPO_PUBLIC_API_URL=https://your-api.example.com/api/

Module Map

| Module | Description | | ------------- | ----------------------------------------------------------------------------- | | theme | ThemeProvider, useTheme, useThemeColors | | btns | Button, AsBtn, AsRoundedBtn, AsAvatarBtn | | cards | AsCard, AsCustomCard, AsSetCard, … | | chips | Chip, DisplayChips | | components | Divider, Section, Selectable, ShowRating, Toast, … | | forms | AsInput, AsSelect, AsCheckbox, AsRadio, Counter, … | | formik | FormikField, FormikForm, FormikBtnSubmit, FormikPicker, … | | dates | DatePeriodSheets, DateRangeCalendar | | fabs | AnimatedFab, AsFabBtn | | headers | Header | | hooks | useSearch, useListFilter, useDatePeriod, useLocale, … | | react-query | useQueryGet, useQueryPost, useQueryUpdate, useQueryDel, hlpQuery, … | | services | httpService, storageService | | auth | AuthService, authService, useAuthStore | | scans | AsScanner, AsScanBarcode | | searchs | AsSearchBar, SearchBar | | modals | AsModal | | sheets | ActionSheetThemed | | texts | ThemedText, AsText | | icons | Icon, CustomIcons | | logos | AkofahLogo | | locales | trans, i18n | | world | useCountry, useCountryActions | | utils | useShadow, shadowPresets, formatToYYYYMMDD, themes |

Build

npm run build

Outputs both ESM (lib/esm/) and CJS (lib/cjs/) formats.

License

ISC