[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]Unrecognized font family

Error Unrecognized font family 커스텀 폰트를 추가하고 IOS에서 빌드시에 발생한 에러 입니다. 꾀나 애먹었기에, 여러번 시도 끝에 빌드에 성공한 사례를 공유하고자 합니다. 해결 프로젝트 루트 경로에 react-native-config.js 생성 module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts/'], // 사용할 폰트가 있는 경로 }; 터미널에 React Native 0.69 버젼 이상이면 npx react-native-asset 입력 이하라면 react-native link 입력 https://github.com/unimonkiez/react-native-asset GitHub - un..

• format_list_bulleted React-Native
• · 2023. 6. 3.
• 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]Figma에서 Export한 이미지 깨질 때

Figma로 디자인된 UI를 다룰 때 백터로 이루어진 SVG파일이 아닌 이미지를 PNG로 내려받아 화면에 랜더 시켜줄 때 디바이스에선 마치 이미지가 깨진 것처럼 흐리게 보일 때가 있습니다. 이미지 깨질 때 Example 시뮬/에뮬레이터에서 볼 때보다 debug 앱으로 내려받아 Android OS 디바이스에서 볼 땐 흐릿흐릿한 느낌이 더 도드라집니다. 해결 및 적용 후 퍼블리셔 분께 여쭤본 결과 Figma에서 Export 할 때 2~4 배로 내려받아, 코드상에서 Figma에 표기된 width,height를 적용해 주면 선명하게 보인다는 피드백을 받아 해결할 수 있었습니다. ... const Img = styled.Image` width: 155px; height: 116px; `; ... ...

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

[React Native]Warning Excessive number of pending callbacks: 501

Excessive number of pending callbacks: 501 Map함수를 통해 다수의 를 랜더하며 발생한 Warning이다. 관련 github issues https://github.com/facebook/react-native/issues/34442 PLEASE REPORT: Excessive number of pending callbacks: 501 · Issue #34442 · facebook/react-native Description Hi, I keep the getting the error seen on the screenshot below. For context, I'm creating an app (IOS) where users can swipe through a numbe..

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

[React Native]IOS z-index이슈

RN으로 UI를 그릴 때 발생한 일이다. 포지션 absolute 에 z-index 값을 줘서 아래 컴포넌트들 위에 랜더 되어야 하는 것이 , Android에선 잘 되는데 , IOS는 마치 z-index가 먹히지 않는 것처럼 하위 컴포넌트들 아래에 랜더 됐던 이슈가 있었다. 문제가 된 코드와 화면 const OptWrap = styled.View` position: absolute; z-index: 999; top: 90px; width: 100%; height: auto; background-color: #ffffff; border: 1px solid #c5c5c5; border-radius: 5px; `; ... 옵션 선택 this.setState({optVisible: !optVisible})}> {..

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

[React Native]react-native-shadow-generator

react-native-shadow-generator RN에서 OS별로 shadow 효과를 주는 법이 다른데, UI에 shadow 효과와 값을 볼 수 있고 조절도 가능하여 참고하기 좋은 깃헙 페이지입니다. https://ethercreative.github.io/react-native-shadow-generator/ React Native Shadow Generator ethercreative.github.io

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

[React Native]android debug apk 명령어로 추출하기

Bundle 파일 생성하기 프로젝트 루트 디렉토리 터미널에서 아래와 같이 입력 react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ android 디렉토리로 이동 후 작업 cd android ./gradlew assembleDebug 주의하실 점은 코드 수정 후 새로 추출하기 위해서는 Bundle 파일부터 새로 생성해야 수정한 코드가 반영됩니다. 수고하셨습니다.

• format_list_bulleted React-Native
• · 2023. 4. 10.
• 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

[React Native]Android FullScreen(전체화면) 적용하기

회사에서 키오스크용 Android 앱 개발하며 풀 스크린을 적용할 일이 생겨 적용하게 되었고 , Android 네이티브 쪽으로 검색하면 나오긴 하지만 RN 키워드와 함께 검색하면 나오지 않았기에 ,, 공유하고자 작성한다. 사실 에뮬상에서 보기에만 적용하려면 에뮬 설정에서 해당 부분 체크만 하면 되긴하지만 , 실제 서비스상에선 적용되지 않으므로 직접 Andorid 네이티브 파일을 수정해야 했다. xml 수정하기 - android/app/src/main/res/values/styles.xml - android/app/src/main/AndroidManifest.xml - android/app/src/main/java/com/${appName}/MainActivity.java import android.vie..

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