From f71fe172abced0feadfaca27eae1333d18b591a8 Mon Sep 17 00:00:00 2001
From: Chandan <32446002+ChandanCC@users.noreply.github.com>
Date: Thu, 2 Sep 2021 17:21:57 +0530
Subject: [PATCH] Fix: Header getting cropped in ios

Added SafeAreaView as a wrapper around header
---
 LightboxOverlay.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/LightboxOverlay.js b/LightboxOverlay.js
index 9e01f9a..7637e40 100644
--- a/LightboxOverlay.js
+++ b/LightboxOverlay.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Animated, Dimensions, Modal, PanResponder, Platform, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Animated, Dimensions, Modal, PanResponder, Platform, StatusBar, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 const WINDOW_HEIGHT = Dimensions.get('window').height;
 const WINDOW_WIDTH = Dimensions.get('window').width;
@@ -220,9 +220,11 @@ export default class LightboxOverlay extends Component {
     const header = (<Animated.View style={[styles.header, lightboxOpacityStyle]}>{(renderHeader ?
       renderHeader(this.close) :
       (
-        <TouchableOpacity onPress={this.close}>
-          <Text style={styles.closeButton}>×</Text>
-        </TouchableOpacity>
+        <SafeAreaView>
+          <TouchableOpacity onPress={this.close}>
+            <Text style={styles.closeButton}>×</Text>
+          </TouchableOpacity>
+        </SafeAreaView>
       )
     )}</Animated.View>);
     const content = (