npx expo install react-native@0.79.5
//기본 레이아웃 있는 버전
npx create-expo-app@latest MyLiarGameApp
//템플릿 선택 (blank빈 템플릿)
npx create-expo-app@latest --template
더보기
| 특징 | 장점 | 단점 / 고려사항 | 추천 사용 케이스 | |
| React Native Paper | Google Material Design 기반 UI 키트 | - Material Design 완벽 구현 - 풍부한 컴포넌트 - 테마 커스터마이징 용이 - 문서화 잘 되어 있음 |
- Material Design에 묶여 디자인 유연성 제한적 - 일부 웹 호환성 약함 |
깔끔하고 모던한 Material Design 스타일 앱, 라이어 게임처럼 직관적인 UI |
| NativeBase | 크로스 플랫폼 UI 컴포넌트 제공, 유틸리티 기반 스타일링 | - 다양한 컴포넌트 - Tailwind CSS 유사 스타일링 - 접근성 고려 - 활발한 커뮤니티 |
- 모든 컴포넌트가 최신 RN 버전에 완벽 최적화 아닐 수 있음 - 학습 곡선 있을 수 있음 |
포괄적인 컴포넌트 세트, 어느 정도 디자인 자유도, 전통적인 방식의 RN 개발 |
| UI Kitten | Eva Design System 기반, 유연한 테마 변경 | - 강력한 테마 지원 (다크/라이트 모드, 커스텀 테마) - 일관된 디자인 시스템 - Figma와 연동 |
- 커스텀 테마 적용에 약간의 학습 필요 | 디자인 시스템을 중시하거나, 앱에 다양한 테마를 적용하고 싶을 때 |
| Tamagui | Universal (RN + Web) 컴포넌트, 성능, DX 중시 | - 모바일(RN)과 웹(RNW) 동시 지원 - 뛰어난 런타임 성능 - 강력한 스타일링 (컴파일 타임 최적화) |
- 상대적으로 새로운 라이브러리 - 다른 라이브러리보다 학습 곡선 높음 - 컴포넌트 수는 아직 Paper/NativeBase보다 적음 |
모바일 앱과 웹 앱을 함께 빌드할 계획 (라이어 게임 앱의 웹 버전 염두), 고성능 요구 |
| gluestack UI | NativeBase의 후속, Universal (RN + Web), 디자인 시스템 강조 | - 모바일(RN)과 웹(RNW) 동시 지원 - Figma와 통합된 디자인 시스템 - Zero Runtime 디자인 - Tailwind CSS 유사 스타일링 |
- 아직 커뮤니티 규모가 성장 중 - Tamagui와 마찬가지로 학습 곡선 있을 수 있음 |
Tamagui와 유사하게 모바일/웹 동시 개발, 디자인 시스템과 디자인 툴 연동 중시 |
| NativeWind / twrnc | Tailwind CSS 스타일링 라이브러리 | - 웹 Tailwind CSS 경험 그대로 - 유틸리티 클래스로 빠른 스타일링 - 컴포넌트 라이브러리와 함께 사용 가능 |
- 자체 UI 컴포넌트 제공 안함 (오직 스타일링) - 별도의 RN 컴포넌트를 사용해야 함 |
Tailwind CSS에 매우 익숙하고, UI 컴포넌트는 직접 만들거나 다른 라이브러리(ex. Paper)와 조합하고 싶을 때 |