[React Native] Admob 보상형 영상 광고 다 보고 X 버튼 클릭 안되는 오류 해결 : 상태바 숨기기!

어느날... 이러한 CS가 왔다.

광고를 다 봤는데도 상태바에 가려져서 X버튼을 누르지 못했다는 것!

현재 react native에서 보상형 영상 광고를 띄워주기 위해

@react-native-firebase/admob: 11.5.0

을 사용하고 있다.

 

서드파티... admob을 원망하며 admob+statusbar를 키워드로 이슈를 찾아봤는데 마땅히 해결책이 없었다.

-> 그런데 상태바를 가리는거면.. 상태바를 없애면 되는 문제 아닌가? 싶었다.

 

당장 react-native에서  StatusBar를 이용해 숨겨보았다.

상태바 부분을 터치범위로 두고, 상태바가 있을 때와 없을 때 각각 터치가 가능한 지 실험해보았다.

예상한대로, 상태바가 있을 때는 클릭이 가능했고 없을 때는 불가능했다.

 

위 영상에서 사용한 코드를 첨부한다. (일부 수정됨)

참고로, statusBar의 height는 react-native-status-bar-height 라이브러리에서 얻을 수 있다.

import React from 'react';
import { StatusBar } from 'react-native';
import { getStatusBarHeight } from 'react-native-status-bar-height';

export default () => {
    return (
      <View style={{ flex: 1, backgroundColor: 'lightgreen' }}>
        <TouchableOpacity
          style={{
            height: getStatusBarHeight(),
            backgroundColor: 'lightcoral',
          }} />
        <TouchableOpacity
          onPress={() => {
            StatusBar.setHidden(true);
          }}>
        	<Text>상태바 숨기기</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            StatusBar.setHidden(false);
          }}>
        	<Text>상태바 보이기</Text>
        </TouchableOpacity>
      </View>
    );
}

 

-> 상태바를 숨기면 상태바가 있었던 부분도 클릭이 가능해진다!