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 emotion, typescript, jest, react-native-testing-library, expo, and storybook.

Philosophy

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.

Installation

For Expo

expo install cpk-ui @emotion/react @emotion/native @expo/vector-icons react-native-gesture-handler react-native-svg expo-screen-orientation @expo/match-media

For React Native CLI

# Using yarn
yarn add cpk-ui @emotion/react @emotion/native @expo/vector-icons react-native-gesture-handler react-native-svg expo-screen-orientation @expo/match-media

# Install expo modules
npx install-expo-modules@latest

Usage

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.

import {CpkProvider} from 'cpk-ui';

<CpkProvider>
  <App />
</CpkProvider>;

Theming

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

Customizing Theme

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:

<CpkProvider customTheme={{light, dark}}>
  <App />
</CpkProvider>

Fonts

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.

import {useCPK} from 'cpk-ui';

const {assetLoaded} = useCPK();

if (!assetLoaded) {
  return <Loading />;
}

return <Main />;

Icons

Integrate Phosphoricons easily using the Icon component.

import {Icon} from 'cpk-ui';

<Icon name="..." color="#AAA" size={32} />;

Installing Fonts (Recommended)

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.

import {useCPK} from 'cpk-ui';

const {assetLoaded} = useCPK();

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

return <Main/>

Compatibility

Package	Version
react	>=16.13
react-native	>=0.58
emotion	>=11.0.0
emotion/react	>=11.0.0
emotion/native	>=11.0.0
@expo/vector-icons	*

Troubleshooting

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

yarn add @expo/webpack-config

2. Configure Webpack

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

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

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

Contributing

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