React Native UI Kit – 18 Themeable Components (TypeScript, Expo)

Description

Stop rebuilding the same buttons and inputs for every app. @appforge/rn-ui-kit is a small, dependency free React Native component library with a real theme system: change one brand object and the whole UI follows, including dark mode. Strict TypeScript with type definitions, tests, lint config and an Expo showcase app.

Features

• ThemeProvider with light, dark and system mode, controlled or uncontrolled, useTheme and useThemeMode hooks
• Brand tokens: primary and secondary colors, font family, spacing unit, roundness, per scheme color overrides
• Automatic readable text color on brand colors (WCAG luminance)
• Text with 8 variants and 7 tones
• Button: primary, secondary, outline, ghost, danger, 3 sizes, loading, disabled, icons
• TextField with label, helper, error, adornments and password Show / Hide
• Switch (animated), Checkbox, RadioGroup, SegmentedControl, Chip
• Badge, Avatar with initials, stable colors and status dot
• Card (elevated, outlined, filled, pressable), ListItem, Divider, Screen
• Banner (success, warning, danger, info), ProgressBar, Skeleton, EmptyState
• Accessibility roles and states on all interactive components
• Expo example app showing every component and 4 brand presets

Tech stack

• React Native 0.72+ / Expo SDK 49+ (built and tested with Expo SDK 51, React Native 0.74)
• TypeScript (strict), compiled to dist with type definitions
• Jest + React Native Testing Library (17 tests)
• ESLint with typescript-eslint and react-hooks rules
• No native modules and no third party UI dependencies

Requirements

• Node.js 18 or newer
• A React Native or Expo project (React 18)

How to install and run

1. Unzip the archive and open the folder
2. Run npm install, then npm run build, npm test and npm run lint
3. Use it in your app: copy src into your project, or run npm pack and install the generated .tgz
4. Wrap your app in <ThemeProvider brand={{ primary: '#F2545B' }}> and import components from @appforge/rn-ui-kit
5. Run the showcase: cd example && npx expo start

How to rebrand

• Pass a brand object to ThemeProvider: primary, secondary, fontFamily, spacingUnit, roundness
• Override any light or dark color with brand.light and brand.dark
• Change the defaults for all apps in src/theme/tokens.ts
• Rename the package scope in package.json to publish to your own private registry

What’s included

• Full TypeScript source code (src, 18 components, theme)
• Jest tests, ESLint and TypeScript configs
• Expo example app (example/)
• README.md with installation, usage, rebranding and project structure
• LICENSE file
• Screenshots folder

Screenshots

License

Commercial license: use the source code in one end product (one app) for yourself or one client, free or paid. Reselling or redistributing the source code as a template is not allowed. Full text in the LICENSE file.