react-native-modal 화면을 전부 채우는 모달 구현하기

react-native-modal

해당 모달 라이브러리를 사용하면서, 화면을 전부 채우지 않는 문제와 opacity가 제대로 적용이 안된 문제(뒤의 화면이 보이지 않도록)가 있었다. 위의 링크를 참고하여 해결했다.

 

<Modal
	...
	backdropColor="white"
    backdropOpacity={1}
    style={{ margin: 0 }}
    >
      <View style={styles.container}>

...

const styles = StyleSheet.create({
  container: {
	...
    backgroundColor: 'black'
  },

• 먼저, margin 0으로 두면 화면을 전부 채우는 모달이 된다.
• 뒤의 화면이 보이지 않는 모달을 띄울 때, 백드롭(backdrop)을 흰색 바탕으로 만들어주고 <View>의 전체 컨테이너에 배경색을 적용하면 된다.