728x90
반응형

firebase 의 analytics 를 적용했다.

 

import { NavigationContainer } from '@react-navigation/native';

 

를 사용하고 있었기 때문에, navigation 의 state 가 변경될때마다

 

화면을 기록하기로했다.

 

<NavigationContainer
ref={navigationRef}
onReady={() =>
(routeNameRef.current = navigationRef.current.getCurrentRoute()?.name)
}
onStateChange={() => {
const previousScreenName = routeNameRef.current;

const currentRoute = navigationRef.current.getCurrentRoute();

const currentScreenName = `${currentRoute?.name}_${Object.values(
currentRoute?.params || {},
).join('/')}`;

if (currentRoute && previousScreenName !== currentScreenName) {
analytics().logScreenView({
screen_name: currentScreenName,
screen_class: currentRoute.name,
});
}
routeNameRef.current = currentScreenName;
}}
>

 

기존 네비게이션 컨테이너에 추가한 코드로, 페이지별 어느 상품인지를 확인하기위해

 

param도 추가했다.

 

ios 에서 빌드시 initiateOnDeviceConversionMeasurementWithPhoneNumber 해당 에러가 났는데, 찾아보니

 

18.5 버전부터 추가가되었다고한다.

 

현재 사용하고있는 

"@react-native-firebase/app": "^18.3.0",

 

버전이 18.3 버전이기 때문에

 

 yarn upgrade @react-native-firebase/analytics@18.3.0

 

을 통해 버전을 통일시켜주니 해결되었다.

 

정상 작동하는 것으로 확인 할 수 있다.

728x90
반응형
728x90
반응형

RN의 가장 큰 장점을 꼽으라면, 나는 code push를 꼽는다.

hotfix 가 있을때 빠른 대응을 할 수 있기 때문이다.

주로 나는 코드푸쉬를 할때, 코드푸쉬할 것이 있으면, 로딩화면을 띄워주고 업데이트 후 재시작을 하는 편이다.

 

https://liveforownhappiness.tistory.com/69

 

[ React Native ] react-native-code-push hook 으로 분리

App.tsx 에서 progress / message 받아서 사용 OTA 방식처러 보인다 직접 작성한 코드라 변경하셔서 사용하십셔 import { useEffect, useState } from 'react'; import CodePush, { DownloadProgress } from 'react-native-code-push'; const

liveforownhappiness.tistory.com

 

이번에 앱업데이트를 하면서 안드로이드에서는 정상작동을 하는 것을 확인했지만,

 

ios에서 앱업데이트가 되고나서 롤백이 되는 현상을 경험했다.

 

롤백이 될뿐아니라, 업데이트가 완료되고 앱이 꺼지는 현상을 발견했다.

 

해결책은 patch-package 였다.

현재 rn 0.72.3 버전을 사용 하고있는데

해당파일에

 

diff --git a/node_modules/react-native/ReactCommon/jsc/JSCRuntime.cpp b/node_modules/react-native/ReactCommon/jsc/JSCRuntime.cpp
index 7958519..5ecb903 100644
--- a/node_modules/react-native/ReactCommon/jsc/JSCRuntime.cpp
+++ b/node_modules/react-native/ReactCommon/jsc/JSCRuntime.cpp
@@ -409,12 +409,6 @@ JSCRuntime::~JSCRuntime() {
// has started.
ctxInvalid_ = true;
JSGlobalContextRelease(ctx_);
-#ifndef NDEBUG
- assert(
- objectCounter_ == 0 && "JSCRuntime destroyed with a dangling API object");
- assert(
- stringCounter_ == 0 && "JSCRuntime destroyed with a dangling API string");
-#endif
}
 
std::shared_ptr<const jsi::PreparedJavaScript> JSCRuntime::prepareJavaScript(

 

를 추가해주었다.

 

Simulator Screen Recording - iPhone 14 Pro Max - 2024-01-30 at 11.37.11.mp4
4.16MB

 

 

정상작동 확인

728x90
반응형
728x90
반응형

그냥 TextInput 을 사용하면

이런식으로 가운데 정렬이 된다.

 

이는 TextInput 의 textAlignVertical prop 로 지정해줄수가 있는데, 

해당 Props 만 textAlignVertical='top' 으로 적용하면 원하는대로 나오지않고

multiline 도 true 값으로 줘야 적용된다.

 

해당 코드는

 

<TextInput
textAlignVertical={'top'}
multiline

 

이고 적용된 화면은

 

 

이다.

728x90
반응형
728x90
반응형

react native 로 UI를 그리다보면

 

해당 에러를 많이 만난다.

 

이는 스크롤의 축이 같은 Flatlist, scrollview, sectionlist 등의 컴포넌트안에 

 

또 넣으면 발생하는 에러이다.

 

horizontal, vertical로 축이 다르면 문제가 되지 않는다.

 

지금 그리는 화면에서, Flatlist 의

ListHeaderComponent

 

를 사용하지않고

 

큰 scrollview 안에 같은 스크롤축이 있는 flatlist 를 넣어야 하는 경우가 발생했다.

 

결국, Flatlist 를 map 형식으로 view 를 찍으면서 큰 scrollview 하나만 사용하도록 변경하였는데,

 

페이징 처리가 문제였다.

 

const isCloseToBottom = ({
layoutMeasurement,
contentOffset,
contentSize,
}) => {
const paddingToBottom = 20;
return (
layoutMeasurement.height + contentOffset.y >=
contentSize.height - paddingToBottom
);
};

const pagenation = useCallback(() => {
console.log('pagenation :::::');
if (!last) {
setPage((prev) => ++prev);
}
}, [last, setPage]);
return (
<>
<ScrollView
ref={scrollRef}
style={{
flex: 1,
backgroundColor: wowBackgroundColor,
alignContent: 'center',
}}
onScroll={({ nativeEvent }) => {
if (isCloseToBottom(nativeEvent)) {
pagenation();
}
}}
scrollEventThrottle={400}

 

 

이런식으로, 스크롤을 할때, 남은 offset을 계산하여 pagenation 을 적용했다.

728x90
반응형
728x90
반응형

현재 앱에 fastlane 을 적용하여

 

명령어만 치면 테스트플라이트로 자동 업로드되도록 구축해놓았다.

 

이틀전에 테스트로 한번 배포 하고 오늘 다시 배포하는데

 

No signing certificate "iOS Distribution" found

 

라는 에러가떴다.

 

앱을 혼자개발하기때문에, p12 certification 파일을 절대로 한번세팅하고 변경하지 않는 내입장에서는

 

무슨일인지 궁금했다.

 

일단 로글를 읽어보니 아카이브는 잘되고,

 

testflight로 업로드 하는 과정에서 문제가 발생한것으로 보아

 

xcode 로 oraginzer에서 업로드를 해보았다.

 

xcode 에서는

 

unable to process request - pla update available

 

해당 에러가 보였는데,

 

이는 ios 정책이 업데이트 되고나서

 

새로운 정책을 확인하지않아서 나는 에러였다.

 

해당페이지에서 계약을 읽고 확인을 누르면

 

다시 업로드가 잘된다.

728x90
반응형
728x90
반응형

react-native-webview 를 사용하다보면 

안드로이드에선 가끔 앱 크래시가 난다

 

해결법은 여러가지가 있는데, 

android:hardwareAccelerated="true"

 

해당 값을 false로 바꿔주거나

 

(false 로 바꿔주면 해결은 되지만, 다른 화면에서 화면이 안나올수있다. video 등..)

 

webview style 에 opacity : 0.99, minHeight : 1

 

을 추가해주는 방법들이다.

 

상품 소개 페이지에서 html 을 

 

react-native-autoheight-webview

 

해당 라이브러리로 뿌려주는데

 

안드로이드에서 그냥 앱이꺼져버리는 에러가 나왔다.

 

로그캣으로 보니

 

fatal signal 11 (sigsegv), code 1 (segv_maperr)

 

해당 에러문구가 보였다. 아마 webview 를 사용한 react-native-autoheight-webivew 에서 흔히 나는 크래시 에러라고 생각하고

 

const androidLayerType =
Platform.OS === 'android'
? Platform.Version >= 31
? 'hardware'
: 'software'
: undefined;
androidLayerType={androidLayerType}

 

로 해결하였다.

 

최종코드는

 

으로

 

androidLayerType 속성을 주면 react-native-webview 에서도 크래시가 나지 않는다.

728x90
반응형
728x90
반응형

<TextInput
placeholderTextColor={'black'}
onSubmitEditing={() => props.getData(props.search)}
returnKeyType="search"
/>

 

이런식으로 onSubmitEditing props 를 통해, onPress 이벤트를 넣을 수 있고, 

해당 키보드의 기본인 '완료' 버튼도 변경할 수 있다.

 

ios같은 경우 search 로 세팅하면 '검색'으로 나오고, 안드로이드는 돋보기 모양으로 나온다.

728x90
반응형
728x90
반응형

많은 RN 개발자들이 화면에 웹뷰를 띄울때, react-native-webview 해당 라이브러리를 사용하는 것으로 알고있다.

 

하지만 해당 라이브러리는 치명적인 약점이 있다.

 

종종 안드로이드에서, 웹뷰사용시 app crush 가 나는 경우가있는데, 해당 에러를 찾아보면

 

의 android:hardwareAccelerated를 false 값으로 바꾸라는 해결방법이 많다.

 

하지만, 해당 방법으로 문제해결을 하면, 웹뷰에서의 crash는 사라지지만, react-native-video에서 동영상이 소리만 들리고 화면이 나오지않은 버그가 새로 생긴다.

 

따라서 옳은 workaround 방법으로

 

android:hardwareAccelerated 는 true 값으로 유지한채,

 

webview 컴포넌트의 props 에 minHeight : 1, opacity : 0.99 를 넣어주는 방법이 있다.

 

정확히 왜 해결되는지는 모르지만, 

 

react-native-webview를 사용시 안드로이드에서 앱꺼짐도 막아주고 비디오도 잘 나오는 해결방법이다.

 

728x90
반응형
728x90
반응형

 

고민 끝에 완성된 splash screen

 

스플래시화면부터 강렬한 인상을 주고싶은게 모든 앱 제작자의 마음이다.

지금 하고 있는 프로젝트에서는 주 타겟층이 힙한 20/30대기때문에, 많은 애니메이션 효과를 사용하고있다.

 

앱 로딩시 애니메이션 효과를 위해 내가 고민했던 문제는 총 3가지였다.

 

1.처음 splash screen 자체에 gif 를 넣는 방법

2.react-native-lottie-splash-screen 을 사용하여 lottie 파일로 넣는방법

3.splash screen 별도의 영상을 띄우는 방법

 

현재 앱에 최종적으로 적용된 방법은 3번이다.

 

1.5초 정도가 되는 동영상을 lottie 와 gif 로 변경하여 넣어보니 프레임이 많이 떨어지는 느낌을 받았다.

 

react-native-splash-screen 과 react-native-video 를 통하여

splash 스크린을 띄우고, 그뒤에 react-native-video 컴포넌트를 띄운다.

해당 컴포넌트에서 동영상이 모두 플레이가되면 앱화면이 나오도록 하였다.

 

UX적으로, 컴포넌트를 교체하는 것이아닌, 동영상 재생시 컴포넌트 위에 띄워주고 해당 컴포넌트만 제거하는 것이 안정감이 있어서 해당 방법으로 구현하였다.

 

스플레시 화면에서 동영상으로 넘어가는 부분을 매끄럽게 하기위해서, 동영상 부분의 첫 이미지를 스플래시화면으로 넣어놓는 방법도 있는데

 

자연스럽게 로고다음에 동영상이 플레이되는 것이 디자인팀에서 예쁜것 같다는 피드백이와서 해당 화면으로 최종 결정 하였다.

728x90
반응형
728x90
반응형

 

 

 
 

 

https://developer.android.com/reference/android/Manifest.permission

 

Manifest.permission  |  Android Developers

android.inputmethodservice

developer.android.com

해당 내용에 따르면

 

안드로이드는 sdk버전 33 부터 앨범 퍼미션이

 

READ_EXTERNAL_STORAGE

 

에서

READ_MEDIA_IMAGES
READ_MEDIA_VIDEOS

 

등으로 바뀐다.

 

따라서 react-native-permissions 를 사용할때, Platform 의 구분뿐만아니라, 안드로이드의 버전에 따라서도 체크를 해줘야한다.

 

 

728x90
반응형

+ Recent posts