Manuel Installation

Prerequisites

• Before we start our project follow along expo Set up your environment section or react-native without framework guide to prepare your local development environment.

Installation

• Install the latest phaselis package

npm

npm install phaselis

yarn

yarn add phaselis

• Install the following packages

npm

npm install @react-native-community/blur @react-native-community/slider @react-native-picker/picker react-native-date-picker react-native-fast-shadow react-native-linear-gradient react-native-svg react-native-unistyles

yarn

yarn add @react-native-community/blur @react-native-community/slider @react-native-picker/picker react-native-date-picker react-native-fast-shadow react-native-linear-gradient react-native-svg react-native-unistyles

• You need to install the following development dependencies:

npm

npm install --save-dev babel-plugin-module-resolver@^5.0.2 chokidar@^4.0.3 ts-node@^10.9.2

yarn

yarn add --dev babel-plugin-module-resolver@^5.0.2 chokidar@^4.0.3 ts-node@^10.9.2

• For ios run the following command

cd ios && pod install && cd ..

• After the Installation is done, we need to wrap our app with the PhaselisProvider component. Choose one of the following import options depending on whether you're using the copy-theme script:

Option 1: If you're NOT using the copy-theme script (default):

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

Option 2: If you ARE using the copy-theme script:

import { Provider as PhaselisProvider } from 'phaselis';
import { lightTheme, darkTheme } from '../src/theme';

• Then wrap your app with the PhaselisProvider component and pass the themes as props.

<PhaselisProvider
  initialThemeName={ isDarkMode ? "dark" : "light" }
  themes={{ light: lightTheme, dark: darkTheme }}
>
    <App/>
</PhaselisProvider>

• Last but not least we need to configure unistyles to work with phaselis, lets create unistyles config and import it. Choose one of the following import options depending on whether you're using the copy-theme script:

Option 1: If you're NOT using the copy-theme script (default):

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

Option 2: If you ARE using the copy-theme script:

import { UnistylesRegistry } from "react-native-unistyles";
import { darkTheme, lightTheme } from "../src/theme";

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",
});

• Import the unistyles config file in your app entry file.

import '../config/unistyle';

TypeScript Configuration

• If you are using TypeScript in your project, make sure your tsconfig.json includes the following configuration for proper module resolution:

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "nodenext",
  }
}

• module: This should be set to "NodeNext" for compatibility with the latest Node.js module system.
• moduleResolution: Set this to "nodenext" to enable Node's native module resolution strategy.

Global TypeScript Types

If you are not planning to customize the theme (using the steps in the next section), you should copy the global TypeScript types to your project for proper type checking:

node node_modules/phaselis/scripts/copy-global-types.js

This command copies essential TypeScript declaration files to your project, ensuring proper type checking and autocompletion when using Phaselis components.

Theme Customization (Optional)

If you want to customize the theme files locally, you can copy them from the package to your project and set up the necessary scripts for TypeScript interface generation.

To set up theme customization, follow these simple steps:

1. Run the Copy Theme and Script Command
   Execute the following command in your terminal to copy both the theme files and the required script:

   node node_modules/phaselis/scripts/copy-theme-and-script.js

   This command will:

   • Copy the theme files to your project's source directory
   • Add the necessary script for generating TypeScript interfaces
   • Update your package.json with the required script entry

2. Generate the Theme Interfaces
   After copying the files, run the following command to generate the TypeScript interfaces for your theme:

   npm run generate-theme-interface

   This will create the proper TypeScript interfaces for your local theme files, ensuring full type safety when customizing themes.

Note: After customizing the theme files, remember to use the import path from Option 2 as mentioned in the installation section above.

That's it, you are ready to start building your app with phaselis.