Skip to content

Structure of `packages` directory

The heart of code reusability in AppLaunchKit lies within the packages directory. It stores reusable components, UI elements, hooks (custom React functions), utility functions, configurations, and assets that can be seamlessly integrated into both your Expo and Next.js apps.

Overview

|-- apps
|-- ...
|-- ...
|-- packages
|   |-- assets
|   |   |-- fonts
|   |   |-- icons
|   |   |-- images
|   |   |-- package.json
|   |-- components
|   |   |-- primitives
|   |   |-- custom
|   |   |-- package.json
|   |-- config
|   |-- hooks
|   |-- utils
|   |   |-- constants
|   |   |-- functions
|   |   |-- validators
|   |   |-- package.json
|-- ...
|-- ...

assets directory

The assets directory within the packages directory serves as a central repository for all your static, non-code assets. These assets are essential for building the visual appearance and functionality of your app.

What goes in the assets directory? Here are some common file types you’ll typically find in the assets directory:

  • assets/images: This includes logos, illustrations, and any other visual elements used in the app.

  • assets/fonts: Store custom fonts that the app utilizes for a unique look and feel.

  • assets/icons: Store custom icons that the app utilizes.

  • assets/[___]: Store other static content like video content, audio content, static data files etc.

components directory

The components directory plays a crucial role in maintaining a consistent user interface across your Expo app and Next.js app within the AppLaunchKit project. It serves as a centralized repository for all reusable UI components that can be utilized in both platforms.

This directory is further structured with two subfolders to categorize your components effectively:

  • components/primitives: This subfolder stores foundational, low-level UI components that represent basic building blocks. These components are typically generic and can be widely reused across different parts of your app. Examples include Button, Input, Text, Image, etc. This is the directory which stores all the components from gluestack-ui.

  • components/custom: This subfolder houses custom composite components that are built upon the primitive components. These components are more specific and encapsulate functionalities relevant to your app’s features. Examples might include ProductCard, ChatItem, UserProfile, etc.

Benefits of a Shared Component Library:

  • Code Reusability: Sharing components across platforms reduces code duplication and promotes code maintainability. You only need to define a component once and leverage it throughout your app.
  • UI Consistency: By using the same components in both Expo and Next.js apps, you ensure a consistent look and feel for your users, regardless of the platform.
  • Improved Development Efficiency: Pre-built components save development time as you don’t need to recreate common UI elements from scratch for each platform.

Note: Consider adopting a consistent naming convention for your components to enhance readability and organization. Common approaches include using PascalCase (e.g., Button, ProductCard) and we recommend the same. If you need to create a folder for the component, we recommend using kebab-case (e.g., product-card) for the folder name.

config directory

The config directory within the packages directory serves as a central repository for all common configurations your app.

hooks directory

The hooks directory within the packages directory contains custom hooks, including those related to authentication, theme management, and other reusable logic. Hooks encapsulate and reuse stateful logic throughout your app.

utils directory

The utils directory within the packages directory serves as a central location for utility code that can be shared and reused across various parts of your application. It promotes code organization, reduces redundancy, and improves maintainability.

Here’s a breakdown of the contents of the utils directory and the purpose of each subdirectory:

  • utils/constants: This subdirectory stores constant values that are used throughout the codebase. These constants can represent things like API endpoints, configuration values, color codes, or any other data that remains fixed and needs to be referenced consistently.
  • utils/functions: This subdirectory houses reusable functions that don’t necessarily belong to a specific component or feature. These functions can perform various tasks, such as data formatting, validation, utility calculations, or network interactions.
  • utils/validators: This subdirectory stores functions dedicated to validating user input or data. These validator functions can ensure that the data entered by the user conforms to specific rules or formats before being processed by the application.