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

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

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"
  }