99blocks-ui

99blocks-ui

React Native Design System This documentation provides an overview of the folder structure and components of the React Native Design System. It is organized into several key folders that serve specific purposes in the development of the design system.

Folder Structure arduino Copy code src ├── components │ ├── base │ └── themed ├── config │ ├── ThemeProvider.js │ ├── withTheme.js │ └── useTheme.js ├── helpers │ ├── typography.js │ └── fonts.js └── json └── design.json

Overview of Folders

1. src/components This folder contains all UI components for the design system, organized into two subfolders:

base: Components that do not rely on the system theme. These are general-purpose components that can be styled independently.

themed: Components that are designed to work with the system theme. They adapt their styles based on the current theme settings.

2. src/config This folder includes configuration files related to theming and context:

ThemeProvider.js: A context provider that manages and distributes the current theme across the application.

withTheme.js: A higher-order component (HOC) for server-side rendering (SSR) that allows components to access the theme.

useTheme.js: A hook for client-side theme management, providing an easy way to access the current theme within functional components.

3. src/helpers This folder contains utility files for styling:

typography.js: Contains text styles and typography-related constants, ensuring consistency in font sizes, weights, and line heights across the application.

fonts.js: Handles font application based on the platform (Android or iOS), ensuring that the correct fonts are used according to the operating system.

4. src/json This folder contains design tokens:

design.json: A JSON file that defines design tokens such as colors, spacing, and other design-related variables. This file serves as a centralized source for design decisions and can be easily updated as the design evolves.