kaiwen-expo

A production-ready React Native and Expo UI library providing customizable components, custom hooks, and formatting helpers. It features built-in support for theme providers and layout optimization tools.

Features

• Theme Integration: Built-in context provider (LibraryProvider) for managing light and dark theme configurations.
• Custom Button Component: An interactive, touch-scaled button (CustomButton) with spring-based motion.
• Card Layout Container: A structural container (CustomCard) for grouping content layouts.
• State Management Hooks: Simplified hook systems such as useToggle for boolean states.
• Formatting Helpers: Utilities for common text capitalization, date formatting, and currency operations.
• Scaffolding CLI Support: Compatible with create-kaiwen-expo for bootstrapping clean project boilerplates.

Installation

Install the package via npm or any other preferred Node package manager:

# Using npm
npm install kaiwen-expo

# Using yarn
yarn add kaiwen-expo

# Using pnpm
pnpm add kaiwen-expo

# Using bun
bun add kaiwen-expo

Quick Start

1. Configure the Theme Provider

Wrap the entry point of your application in the LibraryProvider component to enable thematic styling.

import React from 'react';
import { LibraryProvider } from 'kaiwen-expo';
import MainScreen from './MainScreen';

export default function App() {
  return (
    <LibraryProvider defaultTheme="light">
      <MainScreen />
    </LibraryProvider>
  );
}

2. Implement Components and Hooks

Import components directly from the package within your screens:

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import {
  CustomButton,
  CustomCard,
  useLibraryTheme,
  useToggle,
  capitalize,
  formatCurrency
} from 'kaiwen-expo';

export default function MainScreen() {
  const { colors, theme, toggleTheme } = useLibraryTheme();
  const [isActive, toggleActive] = useToggle(false);

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <CustomCard 
        title={capitalize("welcome user")} 
        subtitle="This card uses kaiwen-expo style guidelines"
      >
        <Text style={{ color: colors.text }}>
          Current balance: {formatCurrency(2450.75)}
        </Text>
        
        <View style={styles.buttonContainer}>
          <CustomButton 
            title={`Switch to ${theme === 'light' ? 'Dark' : 'Light'}`} 
            onPress={toggleTheme}
            variant="secondary"
          />

          <CustomButton 
            title={isActive ? "Deactivate" : "Activate"} 
            onPress={toggleActive}
            variant="outline"
          />
        </View>
      </CustomCard>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    justifyContent: 'center',
  },
  buttonContainer: {
    marginTop: 12,
    gap: 8,
  }
});

API Reference

<CustomButton />

An animated pressable button component.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | title | string | Required | Label text to display. | | onPress | () => void | Required | Callback function executed on press. | | variant | 'primary' \| 'secondary' \| 'outline' \| 'success' \| 'danger' | 'primary' | The visual design pattern. | | size | 'small' \| 'medium' \| 'large' | 'medium' | The dimensions of the button. | | loading | boolean | false | When true, renders an activity indicator. | | disabled | boolean | false | When true, disables user interaction. |

<CustomCard />

A structured card layout container.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | title | string | undefined | Header title of the card. | | subtitle | string | undefined | Supporting subtitle description. | | children | ReactNode | undefined | Layout contents inside the card body. | | footer | ReactNode | undefined | Custom nodes rendered in the card footer. |

Hooks and Utilities

• useToggle(initialValue: boolean): A toggle hook returning [value, toggle, setTrue, setFalse].
• capitalize(str: string): Capitalizes the initial character of a string.
• formatDate(dateInput: Date \| string \| number): Converts date inputs to the standard DD.MM.YYYY format.
• formatCurrency(amount: number): Formats numeric values to the standard Turkish Lira (TRY) currency style.

Local Development

For developers extending the library:

1. Start the Development Server: Runs the test application with Expo Router.

   npx expo start

2. Run Linter: Runs the eslint code audit.

   npm run lint

3. Compile Code: Builds TypeScript compilation outputs to the dist/ directory.

   npm run build

4. Publish Package:

   npm publish