cpk-ui

React Native UI components for Expo.


Demo

Check out ui.crossplatformkorea.com

Introduction

cpk-ui is a foundational design system and UI components library managed by Cross-Platform Korea. It is built using our preferred technologies, including kstyled, typescript, jest, react-native-testing-library, expo, and storybook.

$3

cpk-ui aims to provide user-friendly, lightweight, and adaptable UI components. It emphasizes customizable theme variations and a responsive layout to enhance developer experience.

$3

cpk-ui is optimized for React Native performance using React's built-in optimization features:

- React.memo: All components are wrapped to prevent unnecessary re-renders
- useCallback: Event handlers are memoized for stable references
- useMemo: Expensive calculations and styles are memoized
- 110+ tests passing: Comprehensive test coverage ensures reliability
- Zero breaking changes: All optimizations maintain API compatibility

For detailed performance information, see our Performance Guide.

$3

#### For Expo

``sh
expo install cpk-ui kstyled @expo/vector-icons react-native-gesture-handler react-native-svg expo-screen-orientation @expo/match-media expo-haptics

Install dev dependencies


npm install -D babel-plugin-kstyled
`

#### For React Native CLI

`sh


Using yarn

yarn add cpk-ui kstyled @expo/vector-icons react-native-gesture-handler react-native-svg expo-screen-orientation @expo/match-media
yarn add -D babel-plugin-kstyled

Install expo modules

npx install-expo-modules@latest
`

#### Configure Babel

Add babel-plugin-kstyled to your babel.config.js:

`javascript
module.exports = {
presets: ['babel-preset-expo'],
plugins: ['babel-plugin-kstyled'],
};
`

$3

We focus on supporting iOS, Android, and web platforms, enabling expo users to write efficient and reliable cross-platform code. For more insights into the project’s direction, refer to the cpk-ui strategy.

`tsx
import {CpkProvider} from 'cpk-ui';



;
`

Theming

> The embedded theme module functionality provides the ability to create light and dark themes.

$3

#### 1. Define colors for light and dark theme

The light and dark theme color definitions are provided as examples above. They are objects that contain color properties for different UI components and states.

#### 2. Integrating with CpkProvider

When integrating with CpkProvider, you will provide your defined light and dark themes as the custom theme:

`tsx



`

$3

cpk-ui uses Pretendard as its default font. The fonts are automatically installed with cpk-ui, but you must confirm they are loaded using assetLoaded from useCPK.

`tsx
import {useCPK} from 'cpk-ui';

const {assetLoaded} = useCPK();

if (!assetLoaded) {
return ;
}

return

;
`

$3

Integrate Phosphoricons easily using the Icon component.

`tsx
import {Icon} from 'cpk-ui';

;
`

$3

cpk-ui uses Pretendard as its default font. The font families include Pretendard, Pretendard-Bold, and Pretendard-Thin. From version 0.2.1, these fonts are automatically installed when you add cpk-ui. However, it is important to ensure that the fonts are loaded properly using assetLoaded from the CpkProvider.

`tsx
import {useCPK} from 'cpk-ui';

const {assetLoaded} = useCPK();

if (!assetLoaded) {
// Render loading state
return ...;
}

return


`

$3

| Package | Version |
| :----------------: | :-----: |
| react | >=16.13 |
| react-native | >=0.58 |
| kstyled | >=0.1.0 |
| @expo/vector-icons | \* |

$3

#### Resolving Issues with "cpk-ui" on Expo Web

If you encounter errors when using "cpk-ui" with expo-web, follow these steps to configure webpack:

1. Install @expo/webpack-config

`sh
yarn add @expo/webpack-config
`

2. Configure Webpack

Create a webpack.config.js file in your project root and add the following configuration:

`javascript
const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(
{
...env,
babel: {
dangerouslyAddModulePathsToTranspile: ['cpk-ui'],
},
},
argv,
);
return config;
};
``

$3

Read the Contributing Guide before submitting pull requests. Thank you to everyone contributing to this project!