Myhyundai-ui-components NPM

mobile-ui-component

이 프로젝트는 react-native-cli를 바탕으로 제작됐습니다. 현재 myhyundai-ui-components로 배포 중 입니다.
2022-03-21 batman update

Getting Started

npm install myhyundai-ui-components

import { Button } from 'myhyundai-ui-components';

const App = () => {
  <View>
    <Button/>
  </View>>
};

Font

현재 HyundaiSansText, HyundaiSansHead 폰트를 사용하고 있습니다.
project root 경로에 react-native.config.js 파일을 생성 후 아래 코드를 복사 붙여넣기 후 저장합니다.

module.exports = {
  assets: ['./node_modules/myhyundai-ui-components/src/assets/font'],
};

터미널 project root 경로에서 아래 coomand를 실행합니다.

npx react-native link

아래 스크린샷과 같은 결과가 나오면 폰트 적용이 끝났습니다.

font

Folder Structure

└─src
   ├─assets
   ├─components
   ├─utils
   └─styles.js

assets

image, font 등의 assets 파일을 관리하는 폴더입니다. (icon image는 components/icon/img 안에 있습니다.)

components

component를 관리하는 폴더입니다.

utils

component 구성에 필요한 유틸을 보관하는 폴더입니다.

styles.js

global style을 관리하는 파일입니다.

Component

atoms

Avatar
BottomSheet
Button
Calendar
CheckBox
Container
- Rowcontainer
Divider
- Divider
- TimeDivider
- DottedDivider
Icon
Input
Modal
Radio
Screen
TabBar
Text
Toggle
TopNavigation

Avatar

BottomSheet

Button

Calendar

CheckBox

Container

Divider

Icon

Input

Modal

Radio

Screen

TabBar

Text

Toggle

TopNavigation

dependency

"dependencies": {
    "lottie-ios": "^3.2.3",
    "lottie-react-native": "^5.0.1",
    "moment": "^2.29.1",
    "react": "17.0.2",
    "react-native": "0.67.5",
    "react-native-confirmation-code-field": "^7.3.0",
    "react-native-device-info": "^10.3.0",
    "react-native-fast-image": "^8.6.1",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-safe-area-context": "4.8.2",
    "react-native-shimmer-placeholder": "^2.0.9",
    "react-native-iphone-screen-helper": "^2.1.1"
  }

@infinitebrahmanuniverse/nolb-myh @everything-registry/sub-chunk-2234 @zalastax/nolb-myh

3 months ago

4 months ago

4 months ago

4 months ago

5 months ago