[RN] Can't show Image in React Native

📱테스트 환경

"react": "18.2.0"
"react-native": "0.74.2"

시뮬레이터에서는 이미지가 나오는데 실제 디바이스에서는 이미지가 나오지 않는

아주 슬픈 버그가 발생했다.

일단 나같은 경우는 s3 에서 이미지를 받아와

서버 url 로 변경 후 프론트로 내려주는 방식을 사용하고있었다.

보안때문에 s3 주소를 그대로 보여주면 안된다고 들어서 .

encodeURI, encodeURIComponent

decodeURI, decodeURIComponent

별의 별 방법을 사용해봤지만 시뮬레이터에서는 정상적인게

이상하게도 실제 디바이스로만 가면 이미지가 안나왔다 ..

챗지피티도 .. 블로그도 .. 스택오버플로우도 .. 어떤것도

도움이 되지 않았는데 주소를 유심히 보다보니 http 로 이미지 주소가 나오고 있었다.

실제 디바이스에서는 보안상의 이유로 http 를 사용하지 못하게 기본적으로 막혀있다.

s3 도 서버도 https 인데 req.protocol 을 사용하고있는데

왜 http 인지는 아직 밝혀내지 못했지만 실제 디바이스에서

http 이미지를 사용하려면 설정은 다음과 같다.

1. Android > AndroidManifest.xml

android:usesCleartextTraffic="true"

2. IOS > Info

<dict>
    <key>NSAllowsArbitraryLoads</key>
	<true/>	
	<key>NSExceptionDomains</key> <!-- 특정 도메인에 대해 HTTP를 허용하는 예외 설정 -->
	<dict>
		<key>{도메인주소}</key> <!-- HTTP 요청을 허용할 도메인 설정 -->
		<dict>
			<key>NSIncludesSubdomains</key>
				<true/>
			<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
				<true/>
			<key>NSTemporaryExceptionMinimumTLSVersion</key>
				<string>TLSv1.0</string>
		</dict>
	</dict>
</dict>

IOS 에서는 특정 도메인만 http 를 열어주었고, Android 에서는

모두 열어줬는데, 안드로이드에서는 설정파일을 만들고 해줘야한다는데

아직 방법을 찾지 못했다. 찾게되면 업데이트 해야지 :)