[React Native]Firebase 연동 (2023)

Install # Using npm npm install --save @react-native-firebase/app # Using Yarn yarn add @react-native-firebase/app Firebase 프로젝트 생성 Firebase 접속 및 프로젝트 추가 Firebase Firebase is an app development platform that helps you build and grow apps and games users love. Backed by Google and trusted by millions of businesses around the world. firebase.google.com Android SetUp Android 앱에 Firebase 추가 Android ..

• format_list_bulleted React-Native
• · 2023. 6. 28.
• textsms

[React Native]IOS Firebase 적용하며 생긴 에러 모음

The Swift pod `FirebaseCoreInternal` depends upon `GoogleUtilities`, which does not define modules [!] The following Swift pods cannot yet be integrated as static libraries: The Swift pod `FirebaseCoreInternal` depends upon `GoogleUtilities`, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libra..

• format_list_bulleted React-Native
• · 2023. 6. 21.
• textsms

[React Native]react-native-dropdown-picker 적용 / 트러블슈팅

웹에서의 select box 과 같은 형태로 랜더 되길 바라는 디자인 요구사항이 있었습니다. 다양한 RN picker 라이브러리들을 찾아보고 그중에서 제일 웹에서의 select box와 흡사하고 npm 주간 다운 수가 어느 정도 나오며 도큐먼트가 잘되어 있는, 'react-native-dropdown-picker' 을 사용하게 되었습니다. 사용하면서 발생했던 이슈들과 적용기를 적어보자 합니다. react-native-dropdown-picker https://hossein-zare.github.io/react-native-dropdown-picker-website/ React Native Dropdown Picker React Native Dropdown Picker is a single / multip..

• format_list_bulleted React-Native
• · 2023. 5. 22.
• textsms

[React Native]Text가 래핑(줄바꿈)되지 않는 이슈

문제가 된 코드와 화면 서버에서 String으로 이루어진 장문의 더미 데이터를 받아서, 로 이루어진 컴포넌트로 랜더 시킬 때 생긴 이슈입니다. 웹에서 word-break 와 같은 효과를 원했고, flex-wrap: wrap 을 사용해도 원하는 대로 화면에 나오지 않았습니다. 문제가된 화면 | 좌 IOS / 우 Android ... const CpnModelInfoText = { ...CpnModelInfoRowText, width: 'auto', marginRight: 0, color: '#444444', } as TextStyle; ... ... 해결 flex-shrink 속성을 사용해 원하는 결과를 얻을 수 있었습니다. 더미 데이터 내부에 \n을 포함하고 있어서 위와 같이 줄바꿈 되었지만, flex-..

• format_list_bulleted React-Native
• · 2023. 5. 3.
• textsms

[React Native]react-native-svg 적용

Figma 디자인상 아이콘들을 png로 적용하다 보니, 앱 내에서 선명하게 나오지 않는 디자인적인 이슈를 발견하게 되어 모든 아이콘을 SVG로 다시 적용하게 되었다. React-Native에서 SVG 파일을 활용하기 위해선 두 가지의 라이브러리를 필요로 한다. react-native-svg yarn add react-native-svg react-native-svg-transformer yarn add --dev react-native-svg-transformer 두 라이브러리를 받고 잊지말고 ios 에도 적용해준다. cd ios && pod install react-native-svg-transformer 설정 react-native-svg-transformer 를 위한 설정이 필요하기 때문에 metr..

• format_list_bulleted React-Native
• · 2023. 4. 9.
• textsms