[React-Native/오픈소스활동] Modal이 전체 화면을 덮도록 구현하는 방법

 

개요

안드로이드에서 React-Native 앱 개발 중 Modal 사용 시 상단 StatusBar를 덮지 않는 문제를 제시

 

문제 분석

• 이러한 상황을 조치할 수 있도록 React-Native statusBarTranslucent 속성을 설정할 수 있음
• 따라서 해당 문제는 React-Native의 버그나 개선해야 할 사항이 아님

 

문제 조치

해결 방법 안내 및 스크린샷 첨부

 

소스 코드

statusBarTranslucent 속성을 적용한 예제

import React, {useState} from 'react';
import {Text, View, Modal} from 'react-native';

export default function App() {
  return (
    <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat
        lacus in massa eleifend blandit. Donec sit amet ipsum sed odio bibendum
        facilisis a eu lorem. Fusce consequat felis at massa rhoncus, a faucibus
        sapien interdum.
        <Modal transparent visible={true} statusBarTranslucent={true}>
          <View
            style={{
              width: '100%',
              height: '100%',
              backgroundColor: 'red',
            }}></View>
        </Modal>
      </Text>
    </View>
  );
}

 

관련 링크

Modal push elements down when it's open ANDROID · Issue #37418 · facebook/react-native

Modal · React Native