React Native에서 필요한 Android 지원

React Native에서 앱 개발을 할 때 대부분의 사람들이 "iOS용으로 먼저 앱을 만들고, 그 후 Android 대응을 한다"라는 진행 방법을 하는 것이 아닐까요.
이번은 자신이 iOS용으로 개발한 후, Android 대응으로 무엇이 필요했는지를 정리합니다(수시 추가 갱신)

덧붙여 자신의 메인 스택은 아래와 같습니다. 그 밖에도 다양한 패키지는 사용하고 있습니다
* expo v36.x
*react-native
* styled-components
*react-navigation

box shadow의 대응

유명한 사람입니다.

iOS에서는
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
처럼 걸리는 그림자이지만, 안드로이드라면 이것은 효과가 없습니다.
대신 elevation이라는 Android 고유의 속성을 사용합니다. 이 경우 Android인지 여부를 결정할 필요가 없습니다.

  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
  elevation: 1;

Android 툴바에 앱 콘텐츠가 숨겨집니다.

이미지 같은 녀석입니다.



via h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 46865628 / 레아 ct-nachi ゔ ぇ ㄔ ㄔ ㄔ ㄔ ㅇ

이것은 앱의 루트 컨테이너에 padding을 추가해 주면 됩니다.
expo의 경우 expo-constants에서 statusBarHeight라는 안드로이드만으로 유효한 API가 준비되어 있으므로 이쪽을 사용합니다.

import Constants from 'expo-constants'

paddingTop: Constants.statusBarHeight || 0

Lottie Animation의 대응

내 앱에서는 lottie-react-native를 사용하여 좋은 느낌의 애니메이션을 넣었습니다. iOS에서는 문제없이 움직였지만, android에서는 같은 것을 그대로 사용하고 있으면 앱이 충돌하는 문제가있었습니다.

lottie-react-native를 v3.0.4로 올리면 고쳐진다는 이야기도 있습니다만, expo install로 넣으면 지금의 장소~2.6.1로 들어 버리므로 대응할 수 없습니다.
2.6.1에서는 lottie 3의 JSON 형식을 지원하지 않는 것으로 보이며 After Effect에서 Export Old Json Format에서 JSON을 다시 내보내는 것으로 수정했습니다.

MapView의 Marker 구성 요소

MapView 안은 핀을 세울 때 자주 사용하지만, Android라면 Custom 컴포넌트나 image 컴포넌트를 사용하고 있는 경우에 표시되지 않는 문제가 있습니다.

대응으로서는 다소 hacky입니다만, Pin의 높이를 가지는 하늘의 Text컴퍼넌트를 넣어 주면 해결합니다.

To Be Added