Phaselis NPM | npm.io

Phaselis Framework 🎨

A powerful, customizable, and beautiful UI component library for React Native applications. Phaselis provides a comprehensive set of pre-built components that help you build stunning mobile applications faster.

✨ Features

🎯 20+ Ready-to-use Components: From basic buttons to complex form elements
🎨 Customizable Theming: Built-in light and dark themes with easy customization
📱 Cross-Platform: Works seamlessly on both iOS and Android
🔧 TypeScript Support: Full TypeScript support with detailed type definitions
🎭 Style Variants: Multiple style variants for each component
🚀 Performance Optimized: Minimal build size and optimal runtime performance

📦 Installation

With CLI

npx create-phaselis-app

Manual Installation

Please visit Manual Installation Guide.

NPM Installation

To install the library, follow these steps:

Add the library to your project:
```
npm install phaselis
```
Navigate to the iOS directory and install the CocoaPods dependencies:
```
cd ios
pod install
```
Clean the build folder and rebuild the project:
```
xcodebuild clean
```
Open the .xcworkspace file in Xcode and run your project.

For more information, refer to the CocoaPods documentation.

📚 Documentation

For detailed documentation and examples, visit our documentation site.

🔧 Setup

Import and configure the PhaselisProvider:

import { Provider as PhaselisProvider, lightTheme, darkTheme } from "phaselis";

function App() {
  return (
    <PhaselisProvider theme={isDarkMode ? darkTheme : lightTheme}>
      <YourApp />
    </PhaselisProvider>
  );
}

Configure Unistyles:

import { lightTheme, darkTheme } from "phaselis";
import { UnistylesRegistry } from "react-native-unistyles";

type AppThemes = {
  light: typeof lightTheme;
  dark: typeof darkTheme;
};

declare module "react-native-unistyles" {
  export interface UnistylesThemes extends AppThemes {}
}

UnistylesRegistry.addThemes({
  light: lightTheme,
  dark: darkTheme,
}).addConfig({
  adaptiveThemes: true,
  initialTheme: "light",
});

🎯 Components

Phaselis includes a wide range of components:

Component Documentation

💅 Styling

Phaselis components are highly customizable through:

Theme customization
Style props
Variant props
Shadow support
Linear gradient support

Example:

<Button
  primary
  style={{
    container: {
      backgroundColor: "yellow",
      shadows: [
        {
          color: "#FCF596",
          opacity: 0.8,
          radius: 12,
          offset: [-5, -3],
        },
      ],
    },
    text: {
      color: "white",
    },
  }}
>
  Custom Button
</Button>