diff --git a/package.json b/package.json
index e2fb0c9..88f7fe8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.57.0",
+  "version": "1.58.0",
   "main": "src/index.ts",
   "repository": "git@github.com:observation/react-native-components.git",
   "author": "Observation.org",
@@ -52,7 +52,8 @@
     "@react-navigation/native": "^6.0.8",
     "react": "19.0.0",
     "react-native": "0.79.1",
-    "react-native-render-html": "^6.1.0"
+    "react-native-render-html": "^6.1.0",
+    "react-native-safe-area-context": "^5.6.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
@@ -65,6 +66,7 @@
     "accordion-collapse-react-native": "^1.1.1",
     "color": "^4.2.3",
     "react-native-logs": "^5.3.0",
+    "react-native-safe-area-context": "^5.6.0",
     "react-native-scalable-image": "^1.1.0"
   },
   "packageManager": "yarn@3.6.4",
diff --git a/src/components/Lightbox.tsx b/src/components/Lightbox.tsx
index 0625daa..55b7bb5 100644
--- a/src/components/Lightbox.tsx
+++ b/src/components/Lightbox.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
-import { SafeAreaView, StyleSheet, Text, TextStyle, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, Text, TextStyle, TouchableOpacity, View } from 'react-native'
 
 import ImageView from '@observation.org/react-native-image-viewing'
 import Color from 'color'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { Icon } from './Icon'
 import PageIndicator from './PageIndicator'
@@ -14,26 +15,29 @@ const hitSlop = { top: 16, left: 16, bottom: 16, right: 16 }
 
 const getLightboxHeaderComponent =
   (numberOfPages: number, onClose: () => void) =>
-  ({ imageIndex }: { imageIndex: number }) => (
-    <SafeAreaView style={styles.lightboxHeaderContainer}>
-      <View style={styles.lightboxHeader}>
-        <View style={{ flex: 1 }} />
-        <View style={styles.pageIndicator}>
-          <PageIndicator currentPage={imageIndex + 1} numberOfPages={numberOfPages} />
-        </View>
-        <View style={{ flex: 1 }}>
-          <TouchableOpacity style={styles.closeButton} onPress={() => onClose()} hitSlop={hitSlop}>
-            <Icon
-              name="times"
-              color={Color(theme.color.white).alpha(0.5).string()}
-              size={theme.icon.size.extraExtraLarge}
-              testID="close-lightbox"
-            />
-          </TouchableOpacity>
+  ({ imageIndex }: { imageIndex: number }) => {
+    const insets = useSafeAreaInsets()
+    return (
+      <View style={[styles.lightboxHeaderContainer, { paddingTop: insets.top }]}>
+        <View style={styles.lightboxHeader}>
+          <View style={{ flex: 1 }} />
+          <View style={styles.pageIndicator}>
+            <PageIndicator currentPage={imageIndex + 1} numberOfPages={numberOfPages} />
+          </View>
+          <View style={{ flex: 1 }}>
+            <TouchableOpacity style={styles.closeButton} onPress={() => onClose()} hitSlop={hitSlop}>
+              <Icon
+                name="times"
+                color={Color(theme.color.white).alpha(0.5).string()}
+                size={theme.icon.size.extraExtraLarge}
+                testID="close-lightbox"
+              />
+            </TouchableOpacity>
+          </View>
         </View>
       </View>
-    </SafeAreaView>
-  )
+    )
+  }
 
 const getLightboxFooterComponent =
   (
@@ -44,41 +48,44 @@ const getLightboxFooterComponent =
     onPressDelete?: () => void,
     onPressCrop?: () => void,
   ) =>
-  () => (
-    <SafeAreaView style={styles.lightboxFooterContainer}>
-      <View style={styles.lightboxFooter}>
-        {title && (
-          <View style={styles.footerItem}>
-            <Text style={styles.title}>{title}</Text>
-          </View>
-        )}
-        {description && (
-          <View style={styles.footerItem}>
-            <Text style={[styles.description, style?.descriptionTextStyle]}>{description}</Text>
-          </View>
-        )}
-        {content && <View style={styles.footerItem}>{content}</View>}
-        {(onPressDelete || onPressCrop) && (
-          <View style={styles.buttonsContainer}>
-            {onPressDelete && (
-              <View style={styles.buttonContainer}>
-                <TouchableOpacity onPress={onPressDelete} hitSlop={hitSlop}>
-                  <Icon name="trash-alt" color={theme.color.white} size={20} testID="delete-photo" />
-                </TouchableOpacity>
-              </View>
-            )}
-            {onPressCrop && (
-              <View style={styles.buttonContainer}>
-                <TouchableOpacity onPress={onPressCrop} hitSlop={hitSlop}>
-                  <Icon name="crop-alt" color={theme.color.white} size={20} testID="crop-photo" />
-                </TouchableOpacity>
-              </View>
-            )}
-          </View>
-        )}
+  () => {
+    const insets = useSafeAreaInsets()
+    return (
+      <View style={[styles.lightboxFooterContainer, { paddingBottom: insets.bottom }]}>
+        <View style={styles.lightboxFooter}>
+          {title && (
+            <View style={styles.footerItem}>
+              <Text style={styles.title}>{title}</Text>
+            </View>
+          )}
+          {description && (
+            <View style={styles.footerItem}>
+              <Text style={[styles.description, style?.descriptionTextStyle]}>{description}</Text>
+            </View>
+          )}
+          {content && <View style={styles.footerItem}>{content}</View>}
+          {(onPressDelete || onPressCrop) && (
+            <View style={styles.buttonsContainer}>
+              {onPressDelete && (
+                <View style={styles.buttonContainer}>
+                  <TouchableOpacity onPress={onPressDelete} hitSlop={hitSlop}>
+                    <Icon name="trash-alt" color={theme.color.white} size={20} testID="delete-photo" />
+                  </TouchableOpacity>
+                </View>
+              )}
+              {onPressCrop && (
+                <View style={styles.buttonContainer}>
+                  <TouchableOpacity onPress={onPressCrop} hitSlop={hitSlop}>
+                    <Icon name="crop-alt" color={theme.color.white} size={20} testID="crop-photo" />
+                  </TouchableOpacity>
+                </View>
+              )}
+            </View>
+          )}
+        </View>
       </View>
-    </SafeAreaView>
-  )
+    )
+  }
 
 type LightboxStyle = {
   descriptionTextStyle: TextStyle
diff --git a/src/components/__tests__/ContentImage.test.tsx b/src/components/__tests__/ContentImage.test.tsx
index 1a6c2f5..b246caf 100644
--- a/src/components/__tests__/ContentImage.test.tsx
+++ b/src/components/__tests__/ContentImage.test.tsx
@@ -1,44 +1,90 @@
 import React from 'react'
 
 import { fireEvent, render } from '@testing-library/react-native'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 
 import ContentImage from '../ContentImage'
 
 jest.mock('react-native-scalable-image', () => 'mock-scalable-image')
 
+const initialMetrics = {
+  frame: { x: 0, y: 0, width: 0, height: 0 },
+  insets: {
+    left: 0,
+    top: 59,
+    right: 0,
+    bottom: 34,
+  },
+}
+
 describe('ContentImage', () => {
   describe('Rendering', () => {
     test('With alt title and text', () => {
-      const { toJSON } = render(<ContentImage alt="Title | Text" src="https://path.to/image.jpg" />)
+      const { toJSON } = render(
+        <SafeAreaProvider initialMetrics={initialMetrics}>
+          <ContentImage alt="Title | Text" src="https://path.to/image.jpg" />
+        </SafeAreaProvider>,
+      )
       expect(toJSON()).toMatchSnapshot()
     })
 
     test('With alt title', () => {
-      const { toJSON } = render(<ContentImage alt="Title" src="https://path.to/image.jpg" />)
+      const { toJSON } = render(
+        <SafeAreaProvider initialMetrics={initialMetrics}>
+          <ContentImage alt="Title" src="https://path.to/image.jpg" />
+        </SafeAreaProvider>,
+      )
       expect(toJSON()).toMatchSnapshot()
     })
 
     test('With alt title ending in delimiter', () => {
-      const { toJSON } = render(<ContentImage alt="Title|" src="https://path.to/image.jpg" />)
+      const { toJSON } = render(
+        <SafeAreaProvider initialMetrics={initialMetrics}>
+          <ContentImage alt="Title|" src="https://path.to/image.jpg" />
+        </SafeAreaProvider>,
+      )
       expect(toJSON()).toMatchSnapshot()
     })
 
     test('Without alt title', () => {
-      const { toJSON } = render(<ContentImage src="https://path.to/image.jpg" />)
+      const { toJSON } = render(
+        <SafeAreaProvider initialMetrics={initialMetrics}>
+          <ContentImage src="https://path.to/image.jpg" />
+        </SafeAreaProvider>,
+      )
       expect(toJSON()).toMatchSnapshot()
     })
   })
 
   describe('Interaction', () => {
     test('Click the image to show the lightbox', async () => {
-      const { toJSON, getByTestId } = render(<ContentImage alt="Title" src="https://path.to/image.jpg" />)
+      const { toJSON, getByTestId } = render(
+        <SafeAreaProvider initialMetrics={initialMetrics}>
+          <ContentImage alt="Title" src="https://path.to/image.jpg" />
+        </SafeAreaProvider>,
+      )
+      await fireEvent(getByTestId('photo'), 'press')
+
+      expect(toJSON()).toMatchSnapshot()
+    })
+
+    test('Close the lightbox', async () => {
+      const { toJSON, getByTestId } = render(
+        <SafeAreaProvider initialMetrics={initialMetrics}>
+          <ContentImage alt="Title" src="https://path.to/image.jpg" />
+        </SafeAreaProvider>,
+      )
       await fireEvent(getByTestId('photo'), 'press')
 
       expect(toJSON()).toMatchSnapshot()
     })
 
     test('Close the lightbox', async () => {
-      const { toJSON, getByTestId } = render(<ContentImage alt="Title" src="https://path.to/image.jpg" />)
+      const { toJSON, getByTestId } = render(
+        <SafeAreaProvider initialMetrics={initialMetrics}>
+          <ContentImage alt="Title" src="https://path.to/image.jpg" />
+        </SafeAreaProvider>,
+      )
       await fireEvent(getByTestId('photo'), 'press')
       await fireEvent(getByTestId('close-lightbox'), 'press')
       expect(toJSON()).toMatchSnapshot()
diff --git a/src/components/__tests__/Lightbox.test.tsx b/src/components/__tests__/Lightbox.test.tsx
index 3587c82..a142e5a 100644
--- a/src/components/__tests__/Lightbox.test.tsx
+++ b/src/components/__tests__/Lightbox.test.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { Text } from 'react-native'
 
 import { act, fireEvent, render } from '@testing-library/react-native'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 
 import Lightbox from '../Lightbox'
 
@@ -15,6 +16,16 @@ const content = () => <Text>Jan de Vogelaar</Text>
 
 let onClose: () => void
 
+const initialMetrics = {
+  frame: { x: 0, y: 0, width: 0, height: 0 },
+  insets: {
+    left: 0,
+    top: 59,
+    right: 0,
+    bottom: 34,
+  },
+}
+
 let mockOnImageIndexChange = jest.fn()
 jest.mock('@observation.org/react-native-image-viewing', () => {
   const actualModule = jest.requireActual('@observation.org/react-native-image-viewing')
@@ -32,7 +43,9 @@ describe('Lightbox', () => {
   describe('Rendering', () => {
     test('First photo', () => {
       const { toJSON, queryByText } = render(
-        <Lightbox photos={photos} title={title} description={description} index={0} onClose={onClose} />,
+        <SafeAreaProvider initialMetrics={initialMetrics}>
+          <Lightbox photos={photos} title={title} description={description} index={0} onClose={onClose} />
+        </SafeAreaProvider>,
       )
       expect(queryByText('Grey Wagtail')).not.toBeNull()
       expect(queryByText('11/26/2020 2:37 PM')).not.toBeNull()
@@ -41,7 +54,9 @@ describe('Lightbox', () => {
 
     test('Second photo', () => {
       const { toJSON, queryByText } = render(
-        <Lightbox photos={photos} title={title} description={description} index={1} onClose={onClose} />,
+        <SafeAreaProvider initialMetrics={initialMetrics}>
+          <Lightbox photos={photos} title={title} description={description} index={1} onClose={onClose} />
+        </SafeAreaProvider>,
       )
       expect(queryByText('Grey Wagtail')).not.toBeNull()
       expect(queryByText('11/26/2020 2:37 PM')).not.toBeNull()
@@ -49,21 +64,27 @@ describe('Lightbox', () => {
     })
 
     test('Only a photo', () => {
-      const { toJSON } = render(<Lightbox photos={photos} index={0} onClose={onClose} />)
+      const { toJSON } = render(
+        <SafeAreaProvider initialMetrics={initialMetrics}>
+          <Lightbox photos={photos} index={0} onClose={onClose} />
+        </SafeAreaProvider>,
+      )
 
       expect(toJSON()).toMatchSnapshot()
     })
 
     test('Photo with species name, date and user', () => {
       const { toJSON } = render(
-        <Lightbox
-          photos={photos}
-          title={title}
-          description={description}
-          content={content}
-          index={0}
-          onClose={onClose}
-        />,
+        <SafeAreaProvider initialMetrics={initialMetrics}>
+          <Lightbox
+            photos={photos}
+            title={title}
+            description={description}
+            content={content}
+            index={0}
+            onClose={onClose}
+          />
+        </SafeAreaProvider>,
       )
 
       expect(toJSON()).toMatchSnapshot()
@@ -72,14 +93,16 @@ describe('Lightbox', () => {
     test('Content that is dependent on the selected image', () => {
       const imageIndexDependentContent = (imageIndex?: number) => <Text>Karel de {imageIndex}e</Text>
       const { toJSON, queryByText } = render(
-        <Lightbox
-          photos={photos}
-          title={title}
-          description={description}
-          content={imageIndexDependentContent}
-          index={99}
-          onClose={onClose}
-        />,
+        <SafeAreaProvider initialMetrics={initialMetrics}>
+          <Lightbox
+            photos={photos}
+            title={title}
+            description={description}
+            content={imageIndexDependentContent}
+            index={99}
+            onClose={onClose}
+          />
+        </SafeAreaProvider>,
       )
 
       expect(queryByText('Karel de 99e')).not.toBeNull()
@@ -88,7 +111,9 @@ describe('Lightbox', () => {
 
     test('With a delete button', () => {
       const { toJSON, queryByTestId } = render(
-        <Lightbox photos={photos} index={0} onClose={onClose} onDelete={() => {}} />,
+        <SafeAreaProvider initialMetrics={initialMetrics}>
+          <Lightbox photos={photos} index={0} onClose={onClose} onDelete={() => {}} />
+        </SafeAreaProvider>,
       )
 
       expect(queryByTestId('delete-photo')).not.toBeNull()
@@ -97,7 +122,9 @@ describe('Lightbox', () => {
 
     test('With a crop button', () => {
       const { toJSON, queryByTestId } = render(
-        <Lightbox photos={photos} index={0} onClose={onClose} onCrop={() => {}} />,
+        <SafeAreaProvider initialMetrics={initialMetrics}>
+          <Lightbox photos={photos} index={0} onClose={onClose} onCrop={() => {}} />
+        </SafeAreaProvider>,
       )
 
       expect(queryByTestId('crop-photo')).not.toBeNull()
@@ -108,7 +135,11 @@ describe('Lightbox', () => {
   describe('Interaction', () => {
     test('Press close button calls onClose', async () => {
       // GIVEN
-      const { getByTestId } = render(<Lightbox photos={photos} index={1} onClose={onClose} />)
+      const { getByTestId } = render(
+        <SafeAreaProvider initialMetrics={initialMetrics}>
+          <Lightbox photos={photos} index={1} onClose={onClose} />
+        </SafeAreaProvider>,
+      )
 
       // WHEN
       await fireEvent.press(getByTestId('close-lightbox'))
@@ -120,7 +151,11 @@ describe('Lightbox', () => {
     test('Press delete button calls onDelete', async () => {
       // GIVEN
       const onDelete = jest.fn()
-      const { getByTestId } = render(<Lightbox photos={photos} index={0} onClose={onClose} onDelete={onDelete} />)
+      const { getByTestId } = render(
+        <SafeAreaProvider initialMetrics={initialMetrics}>
+          <Lightbox photos={photos} index={0} onClose={onClose} onDelete={onDelete} />
+        </SafeAreaProvider>,
+      )
 
       // WHEN
       await fireEvent.press(getByTestId('delete-photo'))
@@ -132,7 +167,11 @@ describe('Lightbox', () => {
     test('Press crop button calls onCrop', async () => {
       // GIVEN
       const onCrop = jest.fn()
-      const { getByTestId } = render(<Lightbox photos={photos} index={0} onClose={onClose} onCrop={onCrop} />)
+      const { getByTestId } = render(
+        <SafeAreaProvider initialMetrics={initialMetrics}>
+          <Lightbox photos={photos} index={0} onClose={onClose} onCrop={onCrop} />
+        </SafeAreaProvider>,
+      )
 
       // WHEN
       await fireEvent.press(getByTestId('crop-photo'))
@@ -146,7 +185,11 @@ describe('Lightbox', () => {
       jest.mock('@observation.org/react-native-image-viewing', () => 'ImageCarousel')
 
       const onDelete = jest.fn()
-      const { getByTestId } = render(<Lightbox photos={photos} index={0} onClose={onClose} onDelete={onDelete} />)
+      const { getByTestId } = render(
+        <SafeAreaProvider initialMetrics={initialMetrics}>
+          <Lightbox photos={photos} index={0} onClose={onClose} onDelete={onDelete} />
+        </SafeAreaProvider>,
+      )
 
       // WHEN
       act(() => mockOnImageIndexChange(1))
diff --git a/src/components/__tests__/__snapshots__/ContentImage.test.tsx.snap b/src/components/__tests__/__snapshots__/ContentImage.test.tsx.snap
index 0365d01..438bf9c 100644
--- a/src/components/__tests__/__snapshots__/ContentImage.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ContentImage.test.tsx.snap
@@ -1,986 +1,1553 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ContentImage Interaction Click the image to show the lightbox 1`] = `
-<View
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
-    {
-      "margin": -16,
-      "marginBottom": -8,
-      "shadowColor": "#E6E6E6",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
+    [
+      {
+        "flex": 1,
       },
-      "shadowOpacity": 0.8,
-      "shadowRadius": 4,
-    }
+      undefined,
+    ]
   }
 >
   <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
     style={
       {
-        "opacity": 1,
+        "margin": -16,
+        "marginBottom": -8,
+        "shadowColor": "#E6E6E6",
+        "shadowOffset": {
+          "height": 4,
+          "width": 0,
+        },
+        "shadowOpacity": 0.8,
+        "shadowRadius": 4,
       }
     }
-    testID="photo"
   >
-    <Modal
-      animationType="fade"
-      hardwareAccelerated={true}
-      onRequestClose={[Function]}
-      supportedOrientations={
-        [
-          "portrait",
-        ]
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
       }
-      transparent={false}
-      visible={true}
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "opacity": 1,
+        }
+      }
+      testID="photo"
     >
-      <View
-        style={
+      <Modal
+        animationType="fade"
+        hardwareAccelerated={true}
+        onRequestClose={[Function]}
+        supportedOrientations={
           [
-            {
-              "backgroundColor": "#000",
-              "flex": 1,
-            },
-            {
-              "backgroundColor": "#000",
-              "opacity": 1,
-            },
+            "portrait",
           ]
         }
+        transparent={false}
+        visible={true}
       >
         <View
-          collapsable={false}
           style={
-            {
-              "position": "absolute",
-              "top": 0,
-              "transform": [
-                {
-                  "translateX": 0,
-                },
-                {
-                  "translateY": 0,
-                },
-              ],
-              "width": "100%",
-              "zIndex": 1,
-            }
+            [
+              {
+                "backgroundColor": "#000",
+                "flex": 1,
+              },
+              {
+                "backgroundColor": "#000",
+                "opacity": 1,
+              },
+            ]
           }
         >
-          <RCTSafeAreaView
+          <View
+            collapsable={false}
             style={
               {
-                "backgroundColor": "#00000077",
-                "left": 0,
                 "position": "absolute",
-                "right": 0,
                 "top": 0,
+                "transform": [
+                  {
+                    "translateX": 0,
+                  },
+                  {
+                    "translateY": 0,
+                  },
+                ],
+                "width": "100%",
+                "zIndex": 1,
               }
             }
           >
             <View
               style={
-                {
-                  "alignContent": "space-between",
-                  "flex": 1,
-                  "flexDirection": "row",
-                  "padding": 16,
-                }
+                [
+                  {
+                    "backgroundColor": "#00000077",
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  {
+                    "paddingTop": 59,
+                  },
+                ]
               }
             >
               <View
                 style={
                   {
+                    "alignContent": "space-between",
                     "flex": 1,
-                  }
-                }
-              />
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
+                    "flexDirection": "row",
+                    "padding": 16,
                   }
                 }
               >
                 <View
                   style={
                     {
-                      "alignSelf": "center",
-                      "flexDirection": "row",
+                      "flex": 1,
                     }
                   }
                 />
-              </View>
-              <View
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
                 <View
-                  accessibilityState={
+                  style={
                     {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
+                      "alignItems": "center",
+                      "justifyContent": "center",
                     }
                   }
-                  accessibilityValue={
+                >
+                  <View
+                    style={
+                      {
+                        "alignSelf": "center",
+                        "flexDirection": "row",
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  style={
                     {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
+                      "flex": 1,
                     }
                   }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  hitSlop={
+                >
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    collapsable={false}
+                    focusable={true}
+                    hitSlop={
+                      {
+                        "bottom": 16,
+                        "left": 16,
+                        "right": 16,
+                        "top": 16,
+                      }
+                    }
+                    onClick={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      {
+                        "alignItems": "center",
+                        "alignSelf": "flex-end",
+                        "justifyContent": "center",
+                        "opacity": 1,
+                      }
+                    }
+                  >
+                    <Icon
+                      color="rgba(255, 255, 255, 0.5)"
+                      name="xmark"
+                      size={24}
+                      testID="close-lightbox"
+                      type="light"
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+          <RCTScrollView
+            data={
+              [
+                {
+                  "uri": "https://path.to/image.jpg",
+                },
+              ]
+            }
+            getItem={[Function]}
+            getItemCount={[Function]}
+            getItemLayout={[Function]}
+            horizontal={true}
+            initialNumToRender={1}
+            initialScrollIndex={0}
+            keyExtractor={[Function]}
+            maxToRenderPerBatch={1}
+            onContentSizeChange={[Function]}
+            onLayout={[Function]}
+            onMomentumScrollBegin={[Function]}
+            onMomentumScrollEnd={[Function]}
+            onScroll={[Function]}
+            onScrollBeginDrag={[Function]}
+            onScrollEndDrag={[Function]}
+            pagingEnabled={true}
+            renderItem={[Function]}
+            scrollEventThrottle={0.0001}
+            showsHorizontalScrollIndicator={false}
+            showsVerticalScrollIndicator={false}
+            stickyHeaderIndices={[]}
+            windowSize={2}
+          >
+            <View>
+              <View
+                onFocusCapture={[Function]}
+                style={
+                  [
                     {
-                      "bottom": 16,
-                      "left": 16,
-                      "right": 16,
-                      "top": 16,
+                      "flexDirection": "row",
+                    },
+                    null,
+                  ]
+                }
+              >
+                <View>
+                  <RCTScrollView
+                    contentContainerStyle={
+                      {
+                        "height": 1334,
+                      }
                     }
+                    maximumZoomScale={1}
+                    onScrollEndDrag={[Function]}
+                    pinchGestureEnabled={true}
+                    scrollEnabled={false}
+                    scrollEventThrottle={1}
+                    showsHorizontalScrollIndicator={false}
+                    showsVerticalScrollIndicator={false}
+                    style={
+                      {
+                        "height": 1334,
+                        "width": 750,
+                      }
+                    }
+                  >
+                    <View>
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "height": 1334,
+                            "justifyContent": "center",
+                            "width": 750,
+                          }
+                        }
+                      >
+                        <ActivityIndicator
+                          color="#FFF"
+                          size="small"
+                        />
+                      </View>
+                      <Image
+                        accessibilityState={
+                          {
+                            "busy": undefined,
+                            "checked": undefined,
+                            "disabled": undefined,
+                            "expanded": undefined,
+                            "selected": undefined,
+                          }
+                        }
+                        accessible={true}
+                        collapsable={false}
+                        focusable={true}
+                        onClick={[Function]}
+                        onLoad={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
+                        source={
+                          {
+                            "uri": "https://path.to/image.jpg",
+                          }
+                        }
+                        style={
+                          {
+                            "height": 0,
+                            "opacity": 1,
+                            "width": 0,
+                          }
+                        }
+                      />
+                    </View>
+                  </RCTScrollView>
+                </View>
+              </View>
+            </View>
+          </RCTScrollView>
+          <View
+            collapsable={false}
+            style={
+              {
+                "bottom": 0,
+                "position": "absolute",
+                "transform": [
+                  {
+                    "translateX": 0,
+                  },
+                  {
+                    "translateY": 0,
+                  },
+                ],
+                "width": "100%",
+                "zIndex": 1,
+              }
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "backgroundColor": "#00000077",
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                  },
+                  {
+                    "paddingBottom": 34,
+                  },
+                ]
+              }
+            >
+              <View
+                style={
+                  {
+                    "paddingHorizontal": 16,
+                    "paddingVertical": 8,
                   }
-                  onClick={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
+                }
+              >
+                <View
                   style={
                     {
-                      "alignItems": "center",
-                      "alignSelf": "flex-end",
-                      "justifyContent": "center",
-                      "opacity": 1,
+                      "marginVertical": 4,
                     }
                   }
                 >
-                  <Icon
-                    color="rgba(255, 255, 255, 0.5)"
-                    name="xmark"
-                    size={24}
-                    testID="close-lightbox"
-                    type="light"
-                  />
+                  <Text
+                    style={
+                      {
+                        "color": "white",
+                        "fontFamily": "Ubuntu",
+                        "fontSize": 16,
+                        "fontStyle": "normal",
+                        "fontWeight": "bold",
+                        "lineHeight": 24,
+                      }
+                    }
+                  >
+                    Title
+                  </Text>
                 </View>
               </View>
             </View>
-          </RCTSafeAreaView>
+          </View>
         </View>
-        <RCTScrollView
-          data={
-            [
+      </Modal>
+      <View
+        style={
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderColor": "#F8F9FA",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "elevation": 6,
+            "flexDirection": "row",
+            "margin": 16,
+            "overflow": "hidden",
+            "shadowColor": "#939393",
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "borderRadius": 8,
+              "margin": 16,
+              "marginRight": 8,
+              "overflow": "hidden",
+            }
+          }
+        >
+          <Image
+            source={
               {
                 "uri": "https://path.to/image.jpg",
+              }
+            }
+            style={
+              {
+                "height": 80,
+                "width": 80,
+              }
+            }
+          />
+        </View>
+        <View
+          style={
+            {
+              "flex": 1,
+              "justifyContent": "center",
+              "marginLeft": 8,
+              "marginRight": 16,
+            }
+          }
+        >
+          <View>
+            <Text
+              numberOfLines={2}
+              style={
+                {
+                  "color": "#212121",
+                  "fontFamily": "Ubuntu",
+                  "fontSize": 12,
+                  "fontStyle": "normal",
+                  "fontWeight": "bold",
+                  "lineHeight": 16,
+                  "marginBottom": 4,
+                }
+              }
+            >
+              Title
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`ContentImage Interaction Close the lightbox 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "margin": -16,
+        "marginBottom": -8,
+        "shadowColor": "#E6E6E6",
+        "shadowOffset": {
+          "height": 4,
+          "width": 0,
+        },
+        "shadowOpacity": 0.8,
+        "shadowRadius": 4,
+      }
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "opacity": 1,
+        }
+      }
+      testID="photo"
+    >
+      <Modal
+        animationType="fade"
+        hardwareAccelerated={true}
+        onRequestClose={[Function]}
+        supportedOrientations={
+          [
+            "portrait",
+          ]
+        }
+        transparent={false}
+        visible={true}
+      >
+        <View
+          style={
+            [
+              {
+                "backgroundColor": "#000",
+                "flex": 1,
+              },
+              {
+                "backgroundColor": "#000",
+                "opacity": 1,
               },
             ]
           }
-          getItem={[Function]}
-          getItemCount={[Function]}
-          getItemLayout={[Function]}
-          horizontal={true}
-          initialNumToRender={1}
-          initialScrollIndex={0}
-          keyExtractor={[Function]}
-          maxToRenderPerBatch={1}
-          onContentSizeChange={[Function]}
-          onLayout={[Function]}
-          onMomentumScrollBegin={[Function]}
-          onMomentumScrollEnd={[Function]}
-          onScroll={[Function]}
-          onScrollBeginDrag={[Function]}
-          onScrollEndDrag={[Function]}
-          pagingEnabled={true}
-          renderItem={[Function]}
-          scrollEventThrottle={0.0001}
-          showsHorizontalScrollIndicator={false}
-          showsVerticalScrollIndicator={false}
-          stickyHeaderIndices={[]}
-          windowSize={2}
         >
-          <View>
+          <View
+            collapsable={false}
+            style={
+              {
+                "position": "absolute",
+                "top": 0,
+                "transform": [
+                  {
+                    "translateX": 0,
+                  },
+                  {
+                    "translateY": 0,
+                  },
+                ],
+                "width": "100%",
+                "zIndex": 1,
+              }
+            }
+          >
             <View
-              onFocusCapture={[Function]}
               style={
                 [
                   {
-                    "flexDirection": "row",
+                    "backgroundColor": "#00000077",
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  {
+                    "paddingTop": 59,
                   },
-                  null,
                 ]
               }
             >
-              <View>
-                <RCTScrollView
-                  contentContainerStyle={
+              <View
+                style={
+                  {
+                    "alignContent": "space-between",
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "padding": 16,
+                  }
+                }
+              >
+                <View
+                  style={
                     {
-                      "height": 1334,
+                      "flex": 1,
                     }
                   }
-                  maximumZoomScale={1}
-                  onScrollEndDrag={[Function]}
-                  pinchGestureEnabled={true}
-                  scrollEnabled={false}
-                  scrollEventThrottle={1}
-                  showsHorizontalScrollIndicator={false}
-                  showsVerticalScrollIndicator={false}
+                />
+                <View
                   style={
                     {
-                      "height": 1334,
-                      "width": 750,
+                      "alignItems": "center",
+                      "justifyContent": "center",
                     }
                   }
                 >
-                  <View>
-                    <View
-                      style={
-                        {
-                          "alignItems": "center",
-                          "height": 1334,
-                          "justifyContent": "center",
-                          "width": 750,
-                        }
+                  <View
+                    style={
+                      {
+                        "alignSelf": "center",
+                        "flexDirection": "row",
                       }
-                    >
-                      <ActivityIndicator
-                        color="#FFF"
-                        size="small"
-                      />
-                    </View>
-                    <Image
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
+                    }
+                  />
+                </View>
+                <View
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
                       }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onLoad={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      source={
-                        {
-                          "uri": "https://path.to/image.jpg",
-                        }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
                       }
-                      style={
-                        {
-                          "height": 0,
-                          "opacity": 1,
-                          "width": 0,
-                        }
+                    }
+                    accessible={true}
+                    collapsable={false}
+                    focusable={true}
+                    hitSlop={
+                      {
+                        "bottom": 16,
+                        "left": 16,
+                        "right": 16,
+                        "top": 16,
+                      }
+                    }
+                    onClick={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      {
+                        "alignItems": "center",
+                        "alignSelf": "flex-end",
+                        "justifyContent": "center",
+                        "opacity": 1,
                       }
+                    }
+                  >
+                    <Icon
+                      color="rgba(255, 255, 255, 0.5)"
+                      name="xmark"
+                      size={24}
+                      testID="close-lightbox"
+                      type="light"
                     />
                   </View>
-                </RCTScrollView>
+                </View>
               </View>
             </View>
           </View>
-        </RCTScrollView>
-        <View
-          collapsable={false}
-          style={
-            {
-              "bottom": 0,
-              "position": "absolute",
-              "transform": [
-                {
-                  "translateX": 0,
-                },
+          <RCTScrollView
+            data={
+              [
                 {
-                  "translateY": 0,
+                  "uri": "https://path.to/image.jpg",
                 },
-              ],
-              "width": "100%",
-              "zIndex": 1,
+              ]
             }
-          }
-        >
-          <RCTSafeAreaView
+            getItem={[Function]}
+            getItemCount={[Function]}
+            getItemLayout={[Function]}
+            horizontal={true}
+            initialNumToRender={1}
+            initialScrollIndex={0}
+            keyExtractor={[Function]}
+            maxToRenderPerBatch={1}
+            onContentSizeChange={[Function]}
+            onLayout={[Function]}
+            onMomentumScrollBegin={[Function]}
+            onMomentumScrollEnd={[Function]}
+            onScroll={[Function]}
+            onScrollBeginDrag={[Function]}
+            onScrollEndDrag={[Function]}
+            pagingEnabled={true}
+            renderItem={[Function]}
+            scrollEventThrottle={0.0001}
+            showsHorizontalScrollIndicator={false}
+            showsVerticalScrollIndicator={false}
+            stickyHeaderIndices={[]}
+            windowSize={2}
+          >
+            <View>
+              <View
+                onFocusCapture={[Function]}
+                style={
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    null,
+                  ]
+                }
+              >
+                <View>
+                  <RCTScrollView
+                    contentContainerStyle={
+                      {
+                        "height": 1334,
+                      }
+                    }
+                    maximumZoomScale={1}
+                    onScrollEndDrag={[Function]}
+                    pinchGestureEnabled={true}
+                    scrollEnabled={false}
+                    scrollEventThrottle={1}
+                    showsHorizontalScrollIndicator={false}
+                    showsVerticalScrollIndicator={false}
+                    style={
+                      {
+                        "height": 1334,
+                        "width": 750,
+                      }
+                    }
+                  >
+                    <View>
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "height": 1334,
+                            "justifyContent": "center",
+                            "width": 750,
+                          }
+                        }
+                      >
+                        <ActivityIndicator
+                          color="#FFF"
+                          size="small"
+                        />
+                      </View>
+                      <Image
+                        accessibilityState={
+                          {
+                            "busy": undefined,
+                            "checked": undefined,
+                            "disabled": undefined,
+                            "expanded": undefined,
+                            "selected": undefined,
+                          }
+                        }
+                        accessible={true}
+                        collapsable={false}
+                        focusable={true}
+                        onClick={[Function]}
+                        onLoad={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
+                        source={
+                          {
+                            "uri": "https://path.to/image.jpg",
+                          }
+                        }
+                        style={
+                          {
+                            "height": 0,
+                            "opacity": 1,
+                            "width": 0,
+                          }
+                        }
+                      />
+                    </View>
+                  </RCTScrollView>
+                </View>
+              </View>
+            </View>
+          </RCTScrollView>
+          <View
+            collapsable={false}
             style={
               {
-                "backgroundColor": "#00000077",
                 "bottom": 0,
-                "left": 0,
                 "position": "absolute",
-                "right": 0,
+                "transform": [
+                  {
+                    "translateX": 0,
+                  },
+                  {
+                    "translateY": 0,
+                  },
+                ],
+                "width": "100%",
+                "zIndex": 1,
               }
             }
           >
             <View
               style={
-                {
-                  "paddingHorizontal": 16,
-                  "paddingVertical": 8,
-                }
+                [
+                  {
+                    "backgroundColor": "#00000077",
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                  },
+                  {
+                    "paddingBottom": 34,
+                  },
+                ]
               }
             >
               <View
                 style={
                   {
-                    "marginVertical": 4,
+                    "paddingHorizontal": 16,
+                    "paddingVertical": 8,
                   }
                 }
               >
-                <Text
+                <View
                   style={
                     {
-                      "color": "white",
-                      "fontFamily": "Ubuntu",
-                      "fontSize": 16,
-                      "fontStyle": "normal",
-                      "fontWeight": "bold",
-                      "lineHeight": 24,
+                      "marginVertical": 4,
                     }
                   }
                 >
-                  Title
-                </Text>
+                  <Text
+                    style={
+                      {
+                        "color": "white",
+                        "fontFamily": "Ubuntu",
+                        "fontSize": 16,
+                        "fontStyle": "normal",
+                        "fontWeight": "bold",
+                        "lineHeight": 24,
+                      }
+                    }
+                  >
+                    Title
+                  </Text>
+                </View>
               </View>
             </View>
-          </RCTSafeAreaView>
+          </View>
         </View>
-      </View>
-    </Modal>
-    <View
-      style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "borderColor": "#F8F9FA",
-          "borderRadius": 8,
-          "borderWidth": 1,
-          "elevation": 6,
-          "flexDirection": "row",
-          "margin": 16,
-          "overflow": "hidden",
-          "shadowColor": "#939393",
-        }
-      }
-    >
+      </Modal>
       <View
         style={
           {
+            "backgroundColor": "#FFFFFF",
+            "borderColor": "#F8F9FA",
             "borderRadius": 8,
+            "borderWidth": 1,
+            "elevation": 6,
+            "flexDirection": "row",
             "margin": 16,
-            "marginRight": 8,
             "overflow": "hidden",
+            "shadowColor": "#939393",
           }
         }
       >
-        <Image
-          source={
-            {
-              "uri": "https://path.to/image.jpg",
-            }
-          }
+        <View
           style={
             {
-              "height": 80,
-              "width": 80,
+              "borderRadius": 8,
+              "margin": 16,
+              "marginRight": 8,
+              "overflow": "hidden",
             }
           }
-        />
-      </View>
-      <View
-        style={
-          {
-            "flex": 1,
-            "justifyContent": "center",
-            "marginLeft": 8,
-            "marginRight": 16,
-          }
-        }
-      >
-        <View>
-          <Text
-            numberOfLines={2}
+        >
+          <Image
+            source={
+              {
+                "uri": "https://path.to/image.jpg",
+              }
+            }
             style={
               {
-                "color": "#212121",
-                "fontFamily": "Ubuntu",
-                "fontSize": 12,
-                "fontStyle": "normal",
-                "fontWeight": "bold",
-                "lineHeight": 16,
-                "marginBottom": 4,
+                "height": 80,
+                "width": 80,
               }
             }
-          >
-            Title
-          </Text>
+          />
+        </View>
+        <View
+          style={
+            {
+              "flex": 1,
+              "justifyContent": "center",
+              "marginLeft": 8,
+              "marginRight": 16,
+            }
+          }
+        >
+          <View>
+            <Text
+              numberOfLines={2}
+              style={
+                {
+                  "color": "#212121",
+                  "fontFamily": "Ubuntu",
+                  "fontSize": 12,
+                  "fontStyle": "normal",
+                  "fontWeight": "bold",
+                  "lineHeight": 16,
+                  "marginBottom": 4,
+                }
+              }
+            >
+              Title
+            </Text>
+          </View>
         </View>
       </View>
     </View>
   </View>
-</View>
+</RNCSafeAreaProvider>
 `;
 
-exports[`ContentImage Interaction Close the lightbox 1`] = `
-<View
+exports[`ContentImage Interaction Close the lightbox 2`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
-    {
-      "margin": -16,
-      "marginBottom": -8,
-      "shadowColor": "#E6E6E6",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
+    [
+      {
+        "flex": 1,
       },
-      "shadowOpacity": 0.8,
-      "shadowRadius": 4,
-    }
+      undefined,
+    ]
   }
 >
   <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
     style={
       {
-        "opacity": 1,
+        "margin": -16,
+        "marginBottom": -8,
+        "shadowColor": "#E6E6E6",
+        "shadowOffset": {
+          "height": 4,
+          "width": 0,
+        },
+        "shadowOpacity": 0.8,
+        "shadowRadius": 4,
       }
     }
-    testID="photo"
   >
     <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         {
-          "backgroundColor": "#FFFFFF",
-          "borderColor": "#F8F9FA",
-          "borderRadius": 8,
-          "borderWidth": 1,
-          "elevation": 6,
-          "flexDirection": "row",
-          "margin": 16,
-          "overflow": "hidden",
-          "shadowColor": "#939393",
+          "opacity": 1,
         }
       }
+      testID="photo"
     >
       <View
         style={
           {
+            "backgroundColor": "#FFFFFF",
+            "borderColor": "#F8F9FA",
             "borderRadius": 8,
+            "borderWidth": 1,
+            "elevation": 6,
+            "flexDirection": "row",
             "margin": 16,
-            "marginRight": 8,
             "overflow": "hidden",
+            "shadowColor": "#939393",
           }
         }
       >
-        <Image
-          source={
-            {
-              "uri": "https://path.to/image.jpg",
-            }
-          }
+        <View
           style={
             {
-              "height": 80,
-              "width": 80,
+              "borderRadius": 8,
+              "margin": 16,
+              "marginRight": 8,
+              "overflow": "hidden",
             }
           }
-        />
-      </View>
-      <View
-        style={
-          {
-            "flex": 1,
-            "justifyContent": "center",
-            "marginLeft": 8,
-            "marginRight": 16,
-          }
-        }
-      >
-        <View>
-          <Text
-            numberOfLines={2}
+        >
+          <Image
+            source={
+              {
+                "uri": "https://path.to/image.jpg",
+              }
+            }
             style={
               {
-                "color": "#212121",
-                "fontFamily": "Ubuntu",
-                "fontSize": 12,
-                "fontStyle": "normal",
-                "fontWeight": "bold",
-                "lineHeight": 16,
-                "marginBottom": 4,
+                "height": 80,
+                "width": 80,
               }
             }
-          >
-            Title
-          </Text>
+          />
+        </View>
+        <View
+          style={
+            {
+              "flex": 1,
+              "justifyContent": "center",
+              "marginLeft": 8,
+              "marginRight": 16,
+            }
+          }
+        >
+          <View>
+            <Text
+              numberOfLines={2}
+              style={
+                {
+                  "color": "#212121",
+                  "fontFamily": "Ubuntu",
+                  "fontSize": 12,
+                  "fontStyle": "normal",
+                  "fontWeight": "bold",
+                  "lineHeight": 16,
+                  "marginBottom": 4,
+                }
+              }
+            >
+              Title
+            </Text>
+          </View>
         </View>
       </View>
     </View>
   </View>
-</View>
+</RNCSafeAreaProvider>
 `;
 
 exports[`ContentImage Rendering With alt title 1`] = `
-<View
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
-    {
-      "margin": -16,
-      "marginBottom": -8,
-      "shadowColor": "#E6E6E6",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
+    [
+      {
+        "flex": 1,
       },
-      "shadowOpacity": 0.8,
-      "shadowRadius": 4,
-    }
+      undefined,
+    ]
   }
 >
   <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
     style={
       {
-        "opacity": 1,
+        "margin": -16,
+        "marginBottom": -8,
+        "shadowColor": "#E6E6E6",
+        "shadowOffset": {
+          "height": 4,
+          "width": 0,
+        },
+        "shadowOpacity": 0.8,
+        "shadowRadius": 4,
       }
     }
-    testID="photo"
   >
     <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         {
-          "backgroundColor": "#FFFFFF",
-          "borderColor": "#F8F9FA",
-          "borderRadius": 8,
-          "borderWidth": 1,
-          "elevation": 6,
-          "flexDirection": "row",
-          "margin": 16,
-          "overflow": "hidden",
-          "shadowColor": "#939393",
+          "opacity": 1,
         }
       }
+      testID="photo"
     >
       <View
         style={
           {
+            "backgroundColor": "#FFFFFF",
+            "borderColor": "#F8F9FA",
             "borderRadius": 8,
+            "borderWidth": 1,
+            "elevation": 6,
+            "flexDirection": "row",
             "margin": 16,
-            "marginRight": 8,
             "overflow": "hidden",
+            "shadowColor": "#939393",
           }
         }
       >
-        <Image
-          source={
-            {
-              "uri": "https://path.to/image.jpg",
-            }
-          }
+        <View
           style={
             {
-              "height": 80,
-              "width": 80,
+              "borderRadius": 8,
+              "margin": 16,
+              "marginRight": 8,
+              "overflow": "hidden",
             }
           }
-        />
-      </View>
-      <View
-        style={
-          {
-            "flex": 1,
-            "justifyContent": "center",
-            "marginLeft": 8,
-            "marginRight": 16,
-          }
-        }
-      >
-        <View>
-          <Text
-            numberOfLines={2}
+        >
+          <Image
+            source={
+              {
+                "uri": "https://path.to/image.jpg",
+              }
+            }
             style={
               {
-                "color": "#212121",
-                "fontFamily": "Ubuntu",
-                "fontSize": 12,
-                "fontStyle": "normal",
-                "fontWeight": "bold",
-                "lineHeight": 16,
-                "marginBottom": 4,
+                "height": 80,
+                "width": 80,
               }
             }
-          >
-            Title
-          </Text>
+          />
+        </View>
+        <View
+          style={
+            {
+              "flex": 1,
+              "justifyContent": "center",
+              "marginLeft": 8,
+              "marginRight": 16,
+            }
+          }
+        >
+          <View>
+            <Text
+              numberOfLines={2}
+              style={
+                {
+                  "color": "#212121",
+                  "fontFamily": "Ubuntu",
+                  "fontSize": 12,
+                  "fontStyle": "normal",
+                  "fontWeight": "bold",
+                  "lineHeight": 16,
+                  "marginBottom": 4,
+                }
+              }
+            >
+              Title
+            </Text>
+          </View>
         </View>
       </View>
     </View>
   </View>
-</View>
+</RNCSafeAreaProvider>
 `;
 
 exports[`ContentImage Rendering With alt title and text 1`] = `
-<View
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
-    {
-      "margin": -16,
-      "marginBottom": -8,
-      "shadowColor": "#E6E6E6",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
+    [
+      {
+        "flex": 1,
       },
-      "shadowOpacity": 0.8,
-      "shadowRadius": 4,
-    }
+      undefined,
+    ]
   }
 >
   <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
     style={
       {
-        "opacity": 1,
+        "margin": -16,
+        "marginBottom": -8,
+        "shadowColor": "#E6E6E6",
+        "shadowOffset": {
+          "height": 4,
+          "width": 0,
+        },
+        "shadowOpacity": 0.8,
+        "shadowRadius": 4,
       }
     }
-    testID="photo"
   >
     <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         {
-          "backgroundColor": "#FFFFFF",
-          "borderColor": "#F8F9FA",
-          "borderRadius": 8,
-          "borderWidth": 1,
-          "elevation": 6,
-          "flexDirection": "row",
-          "margin": 16,
-          "overflow": "hidden",
-          "shadowColor": "#939393",
+          "opacity": 1,
         }
       }
+      testID="photo"
     >
       <View
         style={
           {
+            "backgroundColor": "#FFFFFF",
+            "borderColor": "#F8F9FA",
             "borderRadius": 8,
+            "borderWidth": 1,
+            "elevation": 6,
+            "flexDirection": "row",
             "margin": 16,
-            "marginRight": 8,
             "overflow": "hidden",
+            "shadowColor": "#939393",
           }
         }
       >
-        <Image
-          source={
-            {
-              "uri": "https://path.to/image.jpg",
-            }
-          }
+        <View
           style={
             {
-              "height": 80,
-              "width": 80,
+              "borderRadius": 8,
+              "margin": 16,
+              "marginRight": 8,
+              "overflow": "hidden",
             }
           }
-        />
-      </View>
-      <View
-        style={
-          {
-            "flex": 1,
-            "justifyContent": "center",
-            "marginLeft": 8,
-            "marginRight": 16,
-          }
-        }
-      >
-        <View>
-          <Text
-            numberOfLines={2}
-            style={
+        >
+          <Image
+            source={
               {
-                "color": "#212121",
-                "fontFamily": "Ubuntu",
-                "fontSize": 12,
-                "fontStyle": "normal",
-                "fontWeight": "bold",
-                "lineHeight": 16,
-                "marginBottom": 4,
+                "uri": "https://path.to/image.jpg",
               }
             }
-          >
-            Title
-          </Text>
-          <Text
-            numberOfLines={3}
             style={
               {
-                "color": "#939393",
-                "fontFamily": "Ubuntu",
-                "fontSize": 12,
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-                "lineHeight": 16,
+                "height": 80,
+                "width": 80,
               }
             }
-          >
-            Text
-          </Text>
+          />
+        </View>
+        <View
+          style={
+            {
+              "flex": 1,
+              "justifyContent": "center",
+              "marginLeft": 8,
+              "marginRight": 16,
+            }
+          }
+        >
+          <View>
+            <Text
+              numberOfLines={2}
+              style={
+                {
+                  "color": "#212121",
+                  "fontFamily": "Ubuntu",
+                  "fontSize": 12,
+                  "fontStyle": "normal",
+                  "fontWeight": "bold",
+                  "lineHeight": 16,
+                  "marginBottom": 4,
+                }
+              }
+            >
+              Title
+            </Text>
+            <Text
+              numberOfLines={3}
+              style={
+                {
+                  "color": "#939393",
+                  "fontFamily": "Ubuntu",
+                  "fontSize": 12,
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                  "lineHeight": 16,
+                }
+              }
+            >
+              Text
+            </Text>
+          </View>
         </View>
       </View>
     </View>
   </View>
-</View>
+</RNCSafeAreaProvider>
 `;
 
 exports[`ContentImage Rendering With alt title ending in delimiter 1`] = `
-<View
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
-    {
-      "margin": -16,
-      "marginBottom": -8,
-      "shadowColor": "#E6E6E6",
-      "shadowOffset": {
-        "height": 4,
-        "width": 0,
+    [
+      {
+        "flex": 1,
       },
-      "shadowOpacity": 0.8,
-      "shadowRadius": 4,
-    }
+      undefined,
+    ]
   }
 >
   <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
     style={
       {
-        "opacity": 1,
+        "margin": -16,
+        "marginBottom": -8,
+        "shadowColor": "#E6E6E6",
+        "shadowOffset": {
+          "height": 4,
+          "width": 0,
+        },
+        "shadowOpacity": 0.8,
+        "shadowRadius": 4,
       }
     }
-    testID="photo"
   >
     <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         {
-          "backgroundColor": "#FFFFFF",
-          "borderColor": "#F8F9FA",
-          "borderRadius": 8,
-          "borderWidth": 1,
-          "elevation": 6,
-          "flexDirection": "row",
-          "margin": 16,
-          "overflow": "hidden",
-          "shadowColor": "#939393",
+          "opacity": 1,
         }
       }
+      testID="photo"
     >
       <View
         style={
           {
+            "backgroundColor": "#FFFFFF",
+            "borderColor": "#F8F9FA",
             "borderRadius": 8,
+            "borderWidth": 1,
+            "elevation": 6,
+            "flexDirection": "row",
             "margin": 16,
-            "marginRight": 8,
             "overflow": "hidden",
+            "shadowColor": "#939393",
           }
         }
       >
-        <Image
-          source={
-            {
-              "uri": "https://path.to/image.jpg",
-            }
-          }
+        <View
           style={
             {
-              "height": 80,
-              "width": 80,
+              "borderRadius": 8,
+              "margin": 16,
+              "marginRight": 8,
+              "overflow": "hidden",
             }
           }
-        />
-      </View>
-      <View
-        style={
-          {
-            "flex": 1,
-            "justifyContent": "center",
-            "marginLeft": 8,
-            "marginRight": 16,
-          }
-        }
-      >
-        <View>
-          <Text
-            numberOfLines={2}
+        >
+          <Image
+            source={
+              {
+                "uri": "https://path.to/image.jpg",
+              }
+            }
             style={
               {
-                "color": "#212121",
-                "fontFamily": "Ubuntu",
-                "fontSize": 12,
-                "fontStyle": "normal",
-                "fontWeight": "bold",
-                "lineHeight": 16,
-                "marginBottom": 4,
+                "height": 80,
+                "width": 80,
               }
             }
-          >
-            Title
-          </Text>
+          />
+        </View>
+        <View
+          style={
+            {
+              "flex": 1,
+              "justifyContent": "center",
+              "marginLeft": 8,
+              "marginRight": 16,
+            }
+          }
+        >
+          <View>
+            <Text
+              numberOfLines={2}
+              style={
+                {
+                  "color": "#212121",
+                  "fontFamily": "Ubuntu",
+                  "fontSize": 12,
+                  "fontStyle": "normal",
+                  "fontWeight": "bold",
+                  "lineHeight": 16,
+                  "marginBottom": 4,
+                }
+              }
+            >
+              Title
+            </Text>
+          </View>
         </View>
       </View>
     </View>
   </View>
-</View>
+</RNCSafeAreaProvider>
 `;
 
 exports[`ContentImage Rendering Without alt title 1`] = `
-<mock-scalable-image
-  source={
-    {
-      "uri": "https://path.to/image.jpg",
-    }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
   }
-  width={718}
-/>
+>
+  <mock-scalable-image
+    source={
+      {
+        "uri": "https://path.to/image.jpg",
+      }
+    }
+    width={718}
+  />
+</RNCSafeAreaProvider>
 `;
diff --git a/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap b/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap
index 037e433..8511a97 100644
--- a/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap
@@ -1,124 +1,113 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Lightbox Rendering Content that is dependent on the selected image 1`] = `
-<Modal
-  animationType="fade"
-  hardwareAccelerated={true}
-  onRequestClose={[Function]}
-  supportedOrientations={
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
     [
-      "portrait",
+      {
+        "flex": 1,
+      },
+      undefined,
     ]
   }
-  transparent={false}
-  visible={true}
 >
-  <View
-    style={
+  <Modal
+    animationType="fade"
+    hardwareAccelerated={true}
+    onRequestClose={[Function]}
+    supportedOrientations={
       [
-        {
-          "backgroundColor": "#000",
-          "flex": 1,
-        },
-        {
-          "backgroundColor": "#000",
-          "opacity": 1,
-        },
+        "portrait",
       ]
     }
+    transparent={false}
+    visible={true}
   >
     <View
-      collapsable={false}
       style={
-        {
-          "position": "absolute",
-          "top": 0,
-          "transform": [
-            {
-              "translateX": 0,
-            },
-            {
-              "translateY": 0,
-            },
-          ],
-          "width": "100%",
-          "zIndex": 1,
-        }
+        [
+          {
+            "backgroundColor": "#000",
+            "flex": 1,
+          },
+          {
+            "backgroundColor": "#000",
+            "opacity": 1,
+          },
+        ]
       }
     >
-      <RCTSafeAreaView
+      <View
+        collapsable={false}
         style={
           {
-            "backgroundColor": "#00000077",
-            "left": 0,
             "position": "absolute",
-            "right": 0,
             "top": 0,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+            "width": "100%",
+            "zIndex": 1,
           }
         }
       >
         <View
           style={
-            {
-              "alignContent": "space-between",
-              "flex": 1,
-              "flexDirection": "row",
-              "padding": 16,
-            }
+            [
+              {
+                "backgroundColor": "#00000077",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "paddingTop": 59,
+              },
+            ]
           }
         >
           <View
             style={
               {
+                "alignContent": "space-between",
                 "flex": 1,
-              }
-            }
-          />
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "justifyContent": "center",
+                "flexDirection": "row",
+                "padding": 16,
               }
             }
           >
             <View
               style={
                 {
-                  "alignSelf": "center",
-                  "flexDirection": "row",
+                  "flex": 1,
                 }
               }
-            >
-              <View
-                style={
-                  {
-                    "alignSelf": "center",
-                    "aspectRatio": 1,
-                    "backgroundColor": "#939393",
-                    "borderRadius": 4,
-                    "margin": 4,
-                    "overflow": "hidden",
-                    "width": 8,
-                  }
+            />
+            <View
+              style={
+                {
+                  "alignItems": "center",
+                  "justifyContent": "center",
                 }
-              />
+              }
+            >
               <View
                 style={
                   {
                     "alignSelf": "center",
-                    "aspectRatio": 1,
-                    "backgroundColor": "#939393",
-                    "borderRadius": 4,
-                    "margin": 4,
-                    "overflow": "hidden",
-                    "width": 8,
+                    "flexDirection": "row",
                   }
                 }
-              />
-              <View
-                style={
-                  [
+              >
+                <View
+                  style={
                     {
                       "alignSelf": "center",
                       "aspectRatio": 1,
@@ -127,407 +116,904 @@ exports[`Lightbox Rendering Content that is dependent on the selected image 1`]
                       "margin": 4,
                       "overflow": "hidden",
                       "width": 8,
-                    },
+                    }
+                  }
+                />
+                <View
+                  style={
                     {
-                      "backgroundColor": "#FFFFFF",
-                    },
-                  ]
+                      "alignSelf": "center",
+                      "aspectRatio": 1,
+                      "backgroundColor": "#939393",
+                      "borderRadius": 4,
+                      "margin": 4,
+                      "overflow": "hidden",
+                      "width": 8,
+                    }
+                  }
+                />
+                <View
+                  style={
+                    [
+                      {
+                        "alignSelf": "center",
+                        "aspectRatio": 1,
+                        "backgroundColor": "#939393",
+                        "borderRadius": 4,
+                        "margin": 4,
+                        "overflow": "hidden",
+                        "width": 8,
+                      },
+                      {
+                        "backgroundColor": "#FFFFFF",
+                      },
+                    ]
+                  }
+                />
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                hitSlop={
+                  {
+                    "bottom": 16,
+                    "left": 16,
+                    "right": 16,
+                    "top": 16,
+                  }
+                }
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  {
+                    "alignItems": "center",
+                    "alignSelf": "flex-end",
+                    "justifyContent": "center",
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Icon
+                  color="rgba(255, 255, 255, 0.5)"
+                  name="xmark"
+                  size={24}
+                  testID="close-lightbox"
+                  type="light"
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <RCTScrollView
+        data={
+          [
+            {
+              "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
+            },
+            {
+              "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
+            },
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        getItemLayout={[Function]}
+        horizontal={true}
+        initialNumToRender={1}
+        initialScrollIndex={99}
+        keyExtractor={[Function]}
+        maxToRenderPerBatch={1}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        pagingEnabled={true}
+        renderItem={[Function]}
+        scrollEventThrottle={0.0001}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        windowSize={2}
+      >
+        <View>
+          <View
+            style={
+              {
+                "width": 750,
+              }
+            }
+          />
+          <View
+            onFocusCapture={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View>
+              <RCTScrollView
+                contentContainerStyle={
+                  {
+                    "height": 1334,
+                  }
+                }
+                maximumZoomScale={1}
+                onScrollEndDrag={[Function]}
+                pinchGestureEnabled={true}
+                scrollEnabled={false}
+                scrollEventThrottle={1}
+                showsHorizontalScrollIndicator={false}
+                showsVerticalScrollIndicator={false}
+                style={
+                  {
+                    "height": 1334,
+                    "width": 750,
+                  }
                 }
-              />
+              >
+                <View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "height": 1334,
+                        "justifyContent": "center",
+                        "width": 750,
+                      }
+                    }
+                  >
+                    <ActivityIndicator
+                      color="#FFF"
+                      size="small"
+                    />
+                  </View>
+                  <Image
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessible={true}
+                    collapsable={false}
+                    focusable={true}
+                    onClick={[Function]}
+                    onLoad={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    source={
+                      {
+                        "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
+                      }
+                    }
+                    style={
+                      {
+                        "height": 0,
+                        "opacity": 1,
+                        "width": 0,
+                      }
+                    }
+                  />
+                </View>
+              </RCTScrollView>
             </View>
           </View>
+        </View>
+      </RCTScrollView>
+      <View
+        collapsable={false}
+        style={
+          {
+            "bottom": 0,
+            "position": "absolute",
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+            "width": "100%",
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "backgroundColor": "#00000077",
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+              },
+              {
+                "paddingBottom": 34,
+              },
+            ]
+          }
+        >
           <View
             style={
               {
-                "flex": 1,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
               }
             }
           >
             <View
-              accessibilityState={
+              style={
                 {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "disabled": undefined,
-                  "expanded": undefined,
-                  "selected": undefined,
+                  "marginVertical": 4,
                 }
               }
-              accessibilityValue={
-                {
-                  "max": undefined,
-                  "min": undefined,
-                  "now": undefined,
-                  "text": undefined,
+            >
+              <Text
+                style={
+                  {
+                    "color": "white",
+                    "fontFamily": "Ubuntu",
+                    "fontSize": 16,
+                    "fontStyle": "normal",
+                    "fontWeight": "bold",
+                    "lineHeight": 24,
+                  }
                 }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={
+              >
+                Grey Wagtail
+              </Text>
+            </View>
+            <View
+              style={
                 {
-                  "bottom": 16,
-                  "left": 16,
-                  "right": 16,
-                  "top": 16,
+                  "marginVertical": 4,
                 }
               }
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
+            >
+              <Text
+                style={
+                  [
+                    {
+                      "color": "#FFFFFF",
+                      "fontFamily": "Ubuntu",
+                      "fontSize": 14,
+                      "fontStyle": "normal",
+                      "fontWeight": "normal",
+                      "lineHeight": 20,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                11/26/2020 2:37 PM
+              </Text>
+            </View>
+            <View
               style={
                 {
-                  "alignItems": "center",
-                  "alignSelf": "flex-end",
-                  "justifyContent": "center",
-                  "opacity": 1,
+                  "marginVertical": 4,
                 }
               }
             >
-              <Icon
-                color="rgba(255, 255, 255, 0.5)"
-                name="xmark"
-                size={24}
-                testID="close-lightbox"
-                type="light"
-              />
+              <Text>
+                Karel de 
+                99
+                e
+              </Text>
             </View>
           </View>
         </View>
-      </RCTSafeAreaView>
+      </View>
     </View>
-    <RCTScrollView
-      data={
+  </Modal>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Lightbox Rendering First photo 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <Modal
+    animationType="fade"
+    hardwareAccelerated={true}
+    onRequestClose={[Function]}
+    supportedOrientations={
+      [
+        "portrait",
+      ]
+    }
+    transparent={false}
+    visible={true}
+  >
+    <View
+      style={
         [
           {
-            "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
+            "backgroundColor": "#000",
+            "flex": 1,
           },
           {
-            "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
+            "backgroundColor": "#000",
+            "opacity": 1,
           },
         ]
       }
-      getItem={[Function]}
-      getItemCount={[Function]}
-      getItemLayout={[Function]}
-      horizontal={true}
-      initialNumToRender={1}
-      initialScrollIndex={99}
-      keyExtractor={[Function]}
-      maxToRenderPerBatch={1}
-      onContentSizeChange={[Function]}
-      onLayout={[Function]}
-      onMomentumScrollBegin={[Function]}
-      onMomentumScrollEnd={[Function]}
-      onScroll={[Function]}
-      onScrollBeginDrag={[Function]}
-      onScrollEndDrag={[Function]}
-      pagingEnabled={true}
-      renderItem={[Function]}
-      scrollEventThrottle={0.0001}
-      showsHorizontalScrollIndicator={false}
-      showsVerticalScrollIndicator={false}
-      stickyHeaderIndices={[]}
-      windowSize={2}
     >
-      <View>
-        <View
-          style={
-            {
-              "width": 750,
-            }
+      <View
+        collapsable={false}
+        style={
+          {
+            "position": "absolute",
+            "top": 0,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+            "width": "100%",
+            "zIndex": 1,
           }
-        />
+        }
+      >
         <View
-          onFocusCapture={[Function]}
           style={
             [
               {
-                "flexDirection": "row",
+                "backgroundColor": "#00000077",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "paddingTop": 59,
               },
-              null,
             ]
           }
         >
-          <View>
-            <RCTScrollView
-              contentContainerStyle={
+          <View
+            style={
+              {
+                "alignContent": "space-between",
+                "flex": 1,
+                "flexDirection": "row",
+                "padding": 16,
+              }
+            }
+          >
+            <View
+              style={
                 {
-                  "height": 1334,
+                  "flex": 1,
                 }
               }
-              maximumZoomScale={1}
-              onScrollEndDrag={[Function]}
-              pinchGestureEnabled={true}
-              scrollEnabled={false}
-              scrollEventThrottle={1}
-              showsHorizontalScrollIndicator={false}
-              showsVerticalScrollIndicator={false}
+            />
+            <View
               style={
                 {
-                  "height": 1334,
-                  "width": 750,
+                  "alignItems": "center",
+                  "justifyContent": "center",
                 }
               }
             >
-              <View>
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "height": 1334,
-                      "justifyContent": "center",
-                      "width": 750,
-                    }
-                  }
-                >
-                  <ActivityIndicator
-                    color="#FFF"
-                    size="small"
-                  />
-                </View>
-                <Image
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
+              <View
+                style={
+                  {
+                    "alignSelf": "center",
+                    "flexDirection": "row",
                   }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onClick={[Function]}
-                  onLoad={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  source={
-                    {
-                      "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
-                    }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {
+                        "alignSelf": "center",
+                        "aspectRatio": 1,
+                        "backgroundColor": "#939393",
+                        "borderRadius": 4,
+                        "margin": 4,
+                        "overflow": "hidden",
+                        "width": 8,
+                      },
+                      {
+                        "backgroundColor": "#FFFFFF",
+                      },
+                    ]
                   }
+                />
+                <View
                   style={
                     {
-                      "height": 0,
-                      "opacity": 1,
-                      "width": 0,
+                      "alignSelf": "center",
+                      "aspectRatio": 1,
+                      "backgroundColor": "#939393",
+                      "borderRadius": 4,
+                      "margin": 4,
+                      "overflow": "hidden",
+                      "width": 8,
                     }
                   }
                 />
               </View>
-            </RCTScrollView>
+            </View>
+            <View
+              style={
+                {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                hitSlop={
+                  {
+                    "bottom": 16,
+                    "left": 16,
+                    "right": 16,
+                    "top": 16,
+                  }
+                }
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  {
+                    "alignItems": "center",
+                    "alignSelf": "flex-end",
+                    "justifyContent": "center",
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Icon
+                  color="rgba(255, 255, 255, 0.5)"
+                  name="xmark"
+                  size={24}
+                  testID="close-lightbox"
+                  type="light"
+                />
+              </View>
+            </View>
           </View>
         </View>
       </View>
-    </RCTScrollView>
-    <View
-      collapsable={false}
-      style={
-        {
-          "bottom": 0,
-          "position": "absolute",
-          "transform": [
+      <RCTScrollView
+        data={
+          [
             {
-              "translateX": 0,
+              "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
             },
             {
-              "translateY": 0,
+              "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
             },
-          ],
-          "width": "100%",
-          "zIndex": 1,
+          ]
         }
-      }
-    >
-      <RCTSafeAreaView
+        getItem={[Function]}
+        getItemCount={[Function]}
+        getItemLayout={[Function]}
+        horizontal={true}
+        initialNumToRender={1}
+        initialScrollIndex={0}
+        keyExtractor={[Function]}
+        maxToRenderPerBatch={1}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        pagingEnabled={true}
+        renderItem={[Function]}
+        scrollEventThrottle={0.0001}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        windowSize={2}
+      >
+        <View>
+          <View
+            onFocusCapture={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View>
+              <RCTScrollView
+                contentContainerStyle={
+                  {
+                    "height": 1334,
+                  }
+                }
+                maximumZoomScale={1}
+                onScrollEndDrag={[Function]}
+                pinchGestureEnabled={true}
+                scrollEnabled={false}
+                scrollEventThrottle={1}
+                showsHorizontalScrollIndicator={false}
+                showsVerticalScrollIndicator={false}
+                style={
+                  {
+                    "height": 1334,
+                    "width": 750,
+                  }
+                }
+              >
+                <View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "height": 1334,
+                        "justifyContent": "center",
+                        "width": 750,
+                      }
+                    }
+                  >
+                    <ActivityIndicator
+                      color="#FFF"
+                      size="small"
+                    />
+                  </View>
+                  <Image
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessible={true}
+                    collapsable={false}
+                    focusable={true}
+                    onClick={[Function]}
+                    onLoad={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    source={
+                      {
+                        "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
+                      }
+                    }
+                    style={
+                      {
+                        "height": 0,
+                        "opacity": 1,
+                        "width": 0,
+                      }
+                    }
+                  />
+                </View>
+              </RCTScrollView>
+            </View>
+          </View>
+          <View
+            style={
+              {
+                "width": 750,
+              }
+            }
+          />
+        </View>
+      </RCTScrollView>
+      <View
+        collapsable={false}
         style={
           {
-            "backgroundColor": "#00000077",
             "bottom": 0,
-            "left": 0,
             "position": "absolute",
-            "right": 0,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+            "width": "100%",
+            "zIndex": 1,
           }
         }
       >
         <View
           style={
-            {
-              "paddingHorizontal": 16,
-              "paddingVertical": 8,
-            }
+            [
+              {
+                "backgroundColor": "#00000077",
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+              },
+              {
+                "paddingBottom": 34,
+              },
+            ]
           }
         >
           <View
             style={
               {
-                "marginVertical": 4,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
               }
             }
           >
-            <Text
+            <View
               style={
                 {
-                  "color": "white",
-                  "fontFamily": "Ubuntu",
-                  "fontSize": 16,
-                  "fontStyle": "normal",
-                  "fontWeight": "bold",
-                  "lineHeight": 24,
+                  "marginVertical": 4,
                 }
               }
             >
-              Grey Wagtail
-            </Text>
-          </View>
-          <View
-            style={
-              {
-                "marginVertical": 4,
-              }
-            }
-          >
-            <Text
-              style={
-                [
+              <Text
+                style={
                   {
-                    "color": "#FFFFFF",
+                    "color": "white",
                     "fontFamily": "Ubuntu",
-                    "fontSize": 14,
+                    "fontSize": 16,
                     "fontStyle": "normal",
-                    "fontWeight": "normal",
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ]
+                    "fontWeight": "bold",
+                    "lineHeight": 24,
+                  }
+                }
+              >
+                Grey Wagtail
+              </Text>
+            </View>
+            <View
+              style={
+                {
+                  "marginVertical": 4,
+                }
               }
             >
-              11/26/2020 2:37 PM
-            </Text>
-          </View>
-          <View
-            style={
-              {
-                "marginVertical": 4,
-              }
-            }
-          >
-            <Text>
-              Karel de 
-              99
-              e
-            </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "color": "#FFFFFF",
+                      "fontFamily": "Ubuntu",
+                      "fontSize": 14,
+                      "fontStyle": "normal",
+                      "fontWeight": "normal",
+                      "lineHeight": 20,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                11/26/2020 2:37 PM
+              </Text>
+            </View>
           </View>
         </View>
-      </RCTSafeAreaView>
+      </View>
     </View>
-  </View>
-</Modal>
+  </Modal>
+</RNCSafeAreaProvider>
 `;
 
-exports[`Lightbox Rendering First photo 1`] = `
-<Modal
-  animationType="fade"
-  hardwareAccelerated={true}
-  onRequestClose={[Function]}
-  supportedOrientations={
+exports[`Lightbox Rendering Only a photo 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
     [
-      "portrait",
+      {
+        "flex": 1,
+      },
+      undefined,
     ]
   }
-  transparent={false}
-  visible={true}
 >
-  <View
-    style={
+  <Modal
+    animationType="fade"
+    hardwareAccelerated={true}
+    onRequestClose={[Function]}
+    supportedOrientations={
       [
-        {
-          "backgroundColor": "#000",
-          "flex": 1,
-        },
-        {
-          "backgroundColor": "#000",
-          "opacity": 1,
-        },
+        "portrait",
       ]
     }
+    transparent={false}
+    visible={true}
   >
     <View
-      collapsable={false}
       style={
-        {
-          "position": "absolute",
-          "top": 0,
-          "transform": [
-            {
-              "translateX": 0,
-            },
-            {
-              "translateY": 0,
-            },
-          ],
-          "width": "100%",
-          "zIndex": 1,
-        }
+        [
+          {
+            "backgroundColor": "#000",
+            "flex": 1,
+          },
+          {
+            "backgroundColor": "#000",
+            "opacity": 1,
+          },
+        ]
       }
     >
-      <RCTSafeAreaView
+      <View
+        collapsable={false}
         style={
           {
-            "backgroundColor": "#00000077",
-            "left": 0,
             "position": "absolute",
-            "right": 0,
             "top": 0,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+            "width": "100%",
+            "zIndex": 1,
           }
         }
       >
         <View
           style={
-            {
-              "alignContent": "space-between",
-              "flex": 1,
-              "flexDirection": "row",
-              "padding": 16,
-            }
+            [
+              {
+                "backgroundColor": "#00000077",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "paddingTop": 59,
+              },
+            ]
           }
         >
           <View
             style={
               {
+                "alignContent": "space-between",
                 "flex": 1,
-              }
-            }
-          />
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "justifyContent": "center",
+                "flexDirection": "row",
+                "padding": 16,
               }
             }
           >
             <View
               style={
                 {
-                  "alignSelf": "center",
-                  "flexDirection": "row",
+                  "flex": 1,
+                }
+              }
+            />
+            <View
+              style={
+                {
+                  "alignItems": "center",
+                  "justifyContent": "center",
                 }
               }
             >
               <View
                 style={
-                  [
+                  {
+                    "alignSelf": "center",
+                    "flexDirection": "row",
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {
+                        "alignSelf": "center",
+                        "aspectRatio": 1,
+                        "backgroundColor": "#939393",
+                        "borderRadius": 4,
+                        "margin": 4,
+                        "overflow": "hidden",
+                        "width": 8,
+                      },
+                      {
+                        "backgroundColor": "#FFFFFF",
+                      },
+                    ]
+                  }
+                />
+                <View
+                  style={
                     {
                       "alignSelf": "center",
                       "aspectRatio": 1,
@@ -536,1182 +1022,350 @@ exports[`Lightbox Rendering First photo 1`] = `
                       "margin": 4,
                       "overflow": "hidden",
                       "width": 8,
-                    },
-                    {
-                      "backgroundColor": "#FFFFFF",
-                    },
-                  ]
-                }
-              />
-              <View
-                style={
-                  {
-                    "alignSelf": "center",
-                    "aspectRatio": 1,
-                    "backgroundColor": "#939393",
-                    "borderRadius": 4,
-                    "margin": 4,
-                    "overflow": "hidden",
-                    "width": 8,
+                    }
                   }
-                }
-              />
+                />
+              </View>
             </View>
-          </View>
-          <View
-            style={
-              {
-                "flex": 1,
-              }
-            }
-          >
             <View
-              accessibilityState={
-                {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "disabled": undefined,
-                  "expanded": undefined,
-                  "selected": undefined,
-                }
-              }
-              accessibilityValue={
+              style={
                 {
-                  "max": undefined,
-                  "min": undefined,
-                  "now": undefined,
-                  "text": undefined,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={
-                {
-                  "bottom": 16,
-                  "left": 16,
-                  "right": 16,
-                  "top": 16,
-                }
-              }
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-end",
-                  "justifyContent": "center",
-                  "opacity": 1,
-                }
-              }
-            >
-              <Icon
-                color="rgba(255, 255, 255, 0.5)"
-                name="xmark"
-                size={24}
-                testID="close-lightbox"
-                type="light"
-              />
-            </View>
-          </View>
-        </View>
-      </RCTSafeAreaView>
-    </View>
-    <RCTScrollView
-      data={
-        [
-          {
-            "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
-          },
-          {
-            "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
-          },
-        ]
-      }
-      getItem={[Function]}
-      getItemCount={[Function]}
-      getItemLayout={[Function]}
-      horizontal={true}
-      initialNumToRender={1}
-      initialScrollIndex={0}
-      keyExtractor={[Function]}
-      maxToRenderPerBatch={1}
-      onContentSizeChange={[Function]}
-      onLayout={[Function]}
-      onMomentumScrollBegin={[Function]}
-      onMomentumScrollEnd={[Function]}
-      onScroll={[Function]}
-      onScrollBeginDrag={[Function]}
-      onScrollEndDrag={[Function]}
-      pagingEnabled={true}
-      renderItem={[Function]}
-      scrollEventThrottle={0.0001}
-      showsHorizontalScrollIndicator={false}
-      showsVerticalScrollIndicator={false}
-      stickyHeaderIndices={[]}
-      windowSize={2}
-    >
-      <View>
-        <View
-          onFocusCapture={[Function]}
-          style={
-            [
-              {
-                "flexDirection": "row",
-              },
-              null,
-            ]
-          }
-        >
-          <View>
-            <RCTScrollView
-              contentContainerStyle={
-                {
-                  "height": 1334,
-                }
-              }
-              maximumZoomScale={1}
-              onScrollEndDrag={[Function]}
-              pinchGestureEnabled={true}
-              scrollEnabled={false}
-              scrollEventThrottle={1}
-              showsHorizontalScrollIndicator={false}
-              showsVerticalScrollIndicator={false}
-              style={
-                {
-                  "height": 1334,
-                  "width": 750,
-                }
-              }
-            >
-              <View>
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "height": 1334,
-                      "justifyContent": "center",
-                      "width": 750,
-                    }
-                  }
-                >
-                  <ActivityIndicator
-                    color="#FFF"
-                    size="small"
-                  />
-                </View>
-                <Image
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onClick={[Function]}
-                  onLoad={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  source={
-                    {
-                      "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
-                    }
-                  }
-                  style={
-                    {
-                      "height": 0,
-                      "opacity": 1,
-                      "width": 0,
-                    }
-                  }
-                />
-              </View>
-            </RCTScrollView>
-          </View>
-        </View>
-        <View
-          style={
-            {
-              "width": 750,
-            }
-          }
-        />
-      </View>
-    </RCTScrollView>
-    <View
-      collapsable={false}
-      style={
-        {
-          "bottom": 0,
-          "position": "absolute",
-          "transform": [
-            {
-              "translateX": 0,
-            },
-            {
-              "translateY": 0,
-            },
-          ],
-          "width": "100%",
-          "zIndex": 1,
-        }
-      }
-    >
-      <RCTSafeAreaView
-        style={
-          {
-            "backgroundColor": "#00000077",
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "paddingHorizontal": 16,
-              "paddingVertical": 8,
-            }
-          }
-        >
-          <View
-            style={
-              {
-                "marginVertical": 4,
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "color": "white",
-                  "fontFamily": "Ubuntu",
-                  "fontSize": 16,
-                  "fontStyle": "normal",
-                  "fontWeight": "bold",
-                  "lineHeight": 24,
-                }
-              }
-            >
-              Grey Wagtail
-            </Text>
-          </View>
-          <View
-            style={
-              {
-                "marginVertical": 4,
-              }
-            }
-          >
-            <Text
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontFamily": "Ubuntu",
-                    "fontSize": 14,
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              11/26/2020 2:37 PM
-            </Text>
-          </View>
-        </View>
-      </RCTSafeAreaView>
-    </View>
-  </View>
-</Modal>
-`;
-
-exports[`Lightbox Rendering Only a photo 1`] = `
-<Modal
-  animationType="fade"
-  hardwareAccelerated={true}
-  onRequestClose={[Function]}
-  supportedOrientations={
-    [
-      "portrait",
-    ]
-  }
-  transparent={false}
-  visible={true}
->
-  <View
-    style={
-      [
-        {
-          "backgroundColor": "#000",
-          "flex": 1,
-        },
-        {
-          "backgroundColor": "#000",
-          "opacity": 1,
-        },
-      ]
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "position": "absolute",
-          "top": 0,
-          "transform": [
-            {
-              "translateX": 0,
-            },
-            {
-              "translateY": 0,
-            },
-          ],
-          "width": "100%",
-          "zIndex": 1,
-        }
-      }
-    >
-      <RCTSafeAreaView
-        style={
-          {
-            "backgroundColor": "#00000077",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "alignContent": "space-between",
-              "flex": 1,
-              "flexDirection": "row",
-              "padding": 16,
-            }
-          }
-        >
-          <View
-            style={
-              {
-                "flex": 1,
-              }
-            }
-          />
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <View
-              style={
-                {
-                  "alignSelf": "center",
-                  "flexDirection": "row",
+                  "flex": 1,
                 }
               }
             >
               <View
-                style={
-                  [
-                    {
-                      "alignSelf": "center",
-                      "aspectRatio": 1,
-                      "backgroundColor": "#939393",
-                      "borderRadius": 4,
-                      "margin": 4,
-                      "overflow": "hidden",
-                      "width": 8,
-                    },
-                    {
-                      "backgroundColor": "#FFFFFF",
-                    },
-                  ]
-                }
-              />
-              <View
-                style={
+                accessibilityState={
                   {
-                    "alignSelf": "center",
-                    "aspectRatio": 1,
-                    "backgroundColor": "#939393",
-                    "borderRadius": 4,
-                    "margin": 4,
-                    "overflow": "hidden",
-                    "width": 8,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
-              />
-            </View>
-          </View>
-          <View
-            style={
-              {
-                "flex": 1,
-              }
-            }
-          >
-            <View
-              accessibilityState={
-                {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "disabled": undefined,
-                  "expanded": undefined,
-                  "selected": undefined,
-                }
-              }
-              accessibilityValue={
-                {
-                  "max": undefined,
-                  "min": undefined,
-                  "now": undefined,
-                  "text": undefined,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={
-                {
-                  "bottom": 16,
-                  "left": 16,
-                  "right": 16,
-                  "top": 16,
-                }
-              }
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-end",
-                  "justifyContent": "center",
-                  "opacity": 1,
-                }
-              }
-            >
-              <Icon
-                color="rgba(255, 255, 255, 0.5)"
-                name="xmark"
-                size={24}
-                testID="close-lightbox"
-                type="light"
-              />
-            </View>
-          </View>
-        </View>
-      </RCTSafeAreaView>
-    </View>
-    <RCTScrollView
-      data={
-        [
-          {
-            "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
-          },
-          {
-            "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
-          },
-        ]
-      }
-      getItem={[Function]}
-      getItemCount={[Function]}
-      getItemLayout={[Function]}
-      horizontal={true}
-      initialNumToRender={1}
-      initialScrollIndex={0}
-      keyExtractor={[Function]}
-      maxToRenderPerBatch={1}
-      onContentSizeChange={[Function]}
-      onLayout={[Function]}
-      onMomentumScrollBegin={[Function]}
-      onMomentumScrollEnd={[Function]}
-      onScroll={[Function]}
-      onScrollBeginDrag={[Function]}
-      onScrollEndDrag={[Function]}
-      pagingEnabled={true}
-      renderItem={[Function]}
-      scrollEventThrottle={0.0001}
-      showsHorizontalScrollIndicator={false}
-      showsVerticalScrollIndicator={false}
-      stickyHeaderIndices={[]}
-      windowSize={2}
-    >
-      <View>
-        <View
-          onFocusCapture={[Function]}
-          style={
-            [
-              {
-                "flexDirection": "row",
-              },
-              null,
-            ]
-          }
-        >
-          <View>
-            <RCTScrollView
-              contentContainerStyle={
-                {
-                  "height": 1334,
-                }
-              }
-              maximumZoomScale={1}
-              onScrollEndDrag={[Function]}
-              pinchGestureEnabled={true}
-              scrollEnabled={false}
-              scrollEventThrottle={1}
-              showsHorizontalScrollIndicator={false}
-              showsVerticalScrollIndicator={false}
-              style={
-                {
-                  "height": 1334,
-                  "width": 750,
-                }
-              }
-            >
-              <View>
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "height": 1334,
-                      "justifyContent": "center",
-                      "width": 750,
-                    }
-                  }
-                >
-                  <ActivityIndicator
-                    color="#FFF"
-                    size="small"
-                  />
-                </View>
-                <Image
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onClick={[Function]}
-                  onLoad={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  source={
-                    {
-                      "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
-                    }
-                  }
-                  style={
-                    {
-                      "height": 0,
-                      "opacity": 1,
-                      "width": 0,
-                    }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
                   }
-                />
-              </View>
-            </RCTScrollView>
-          </View>
-        </View>
-        <View
-          style={
-            {
-              "width": 750,
-            }
-          }
-        />
-      </View>
-    </RCTScrollView>
-    <View
-      collapsable={false}
-      style={
-        {
-          "bottom": 0,
-          "position": "absolute",
-          "transform": [
-            {
-              "translateX": 0,
-            },
-            {
-              "translateY": 0,
-            },
-          ],
-          "width": "100%",
-          "zIndex": 1,
-        }
-      }
-    >
-      <RCTSafeAreaView
-        style={
-          {
-            "backgroundColor": "#00000077",
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "paddingHorizontal": 16,
-              "paddingVertical": 8,
-            }
-          }
-        />
-      </RCTSafeAreaView>
-    </View>
-  </View>
-</Modal>
-`;
-
-exports[`Lightbox Rendering Photo with species name, date and user 1`] = `
-<Modal
-  animationType="fade"
-  hardwareAccelerated={true}
-  onRequestClose={[Function]}
-  supportedOrientations={
-    [
-      "portrait",
-    ]
-  }
-  transparent={false}
-  visible={true}
->
-  <View
-    style={
-      [
-        {
-          "backgroundColor": "#000",
-          "flex": 1,
-        },
-        {
-          "backgroundColor": "#000",
-          "opacity": 1,
-        },
-      ]
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "position": "absolute",
-          "top": 0,
-          "transform": [
-            {
-              "translateX": 0,
-            },
-            {
-              "translateY": 0,
-            },
-          ],
-          "width": "100%",
-          "zIndex": 1,
-        }
-      }
-    >
-      <RCTSafeAreaView
-        style={
-          {
-            "backgroundColor": "#00000077",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "alignContent": "space-between",
-              "flex": 1,
-              "flexDirection": "row",
-              "padding": 16,
-            }
-          }
-        >
-          <View
-            style={
-              {
-                "flex": 1,
-              }
-            }
-          />
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <View
-              style={
-                {
-                  "alignSelf": "center",
-                  "flexDirection": "row",
-                }
-              }
-            >
-              <View
-                style={
-                  [
-                    {
-                      "alignSelf": "center",
-                      "aspectRatio": 1,
-                      "backgroundColor": "#939393",
-                      "borderRadius": 4,
-                      "margin": 4,
-                      "overflow": "hidden",
-                      "width": 8,
-                    },
-                    {
-                      "backgroundColor": "#FFFFFF",
-                    },
-                  ]
                 }
-              />
-              <View
-                style={
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                hitSlop={
                   {
-                    "alignSelf": "center",
-                    "aspectRatio": 1,
-                    "backgroundColor": "#939393",
-                    "borderRadius": 4,
-                    "margin": 4,
-                    "overflow": "hidden",
-                    "width": 8,
+                    "bottom": 16,
+                    "left": 16,
+                    "right": 16,
+                    "top": 16,
                   }
                 }
-              />
-            </View>
-          </View>
-          <View
-            style={
-              {
-                "flex": 1,
-              }
-            }
-          >
-            <View
-              accessibilityState={
-                {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "disabled": undefined,
-                  "expanded": undefined,
-                  "selected": undefined,
-                }
-              }
-              accessibilityValue={
-                {
-                  "max": undefined,
-                  "min": undefined,
-                  "now": undefined,
-                  "text": undefined,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={
-                {
-                  "bottom": 16,
-                  "left": 16,
-                  "right": 16,
-                  "top": 16,
-                }
-              }
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-end",
-                  "justifyContent": "center",
-                  "opacity": 1,
-                }
-              }
-            >
-              <Icon
-                color="rgba(255, 255, 255, 0.5)"
-                name="xmark"
-                size={24}
-                testID="close-lightbox"
-                type="light"
-              />
-            </View>
-          </View>
-        </View>
-      </RCTSafeAreaView>
-    </View>
-    <RCTScrollView
-      data={
-        [
-          {
-            "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
-          },
-          {
-            "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
-          },
-        ]
-      }
-      getItem={[Function]}
-      getItemCount={[Function]}
-      getItemLayout={[Function]}
-      horizontal={true}
-      initialNumToRender={1}
-      initialScrollIndex={0}
-      keyExtractor={[Function]}
-      maxToRenderPerBatch={1}
-      onContentSizeChange={[Function]}
-      onLayout={[Function]}
-      onMomentumScrollBegin={[Function]}
-      onMomentumScrollEnd={[Function]}
-      onScroll={[Function]}
-      onScrollBeginDrag={[Function]}
-      onScrollEndDrag={[Function]}
-      pagingEnabled={true}
-      renderItem={[Function]}
-      scrollEventThrottle={0.0001}
-      showsHorizontalScrollIndicator={false}
-      showsVerticalScrollIndicator={false}
-      stickyHeaderIndices={[]}
-      windowSize={2}
-    >
-      <View>
-        <View
-          onFocusCapture={[Function]}
-          style={
-            [
-              {
-                "flexDirection": "row",
-              },
-              null,
-            ]
-          }
-        >
-          <View>
-            <RCTScrollView
-              contentContainerStyle={
-                {
-                  "height": 1334,
-                }
-              }
-              maximumZoomScale={1}
-              onScrollEndDrag={[Function]}
-              pinchGestureEnabled={true}
-              scrollEnabled={false}
-              scrollEventThrottle={1}
-              showsHorizontalScrollIndicator={false}
-              showsVerticalScrollIndicator={false}
-              style={
-                {
-                  "height": 1334,
-                  "width": 750,
-                }
-              }
-            >
-              <View>
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "height": 1334,
-                      "justifyContent": "center",
-                      "width": 750,
-                    }
-                  }
-                >
-                  <ActivityIndicator
-                    color="#FFF"
-                    size="small"
-                  />
-                </View>
-                <Image
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onClick={[Function]}
-                  onLoad={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  source={
-                    {
-                      "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
-                    }
-                  }
-                  style={
-                    {
-                      "height": 0,
-                      "opacity": 1,
-                      "width": 0,
-                    }
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  {
+                    "alignItems": "center",
+                    "alignSelf": "flex-end",
+                    "justifyContent": "center",
+                    "opacity": 1,
                   }
+                }
+              >
+                <Icon
+                  color="rgba(255, 255, 255, 0.5)"
+                  name="xmark"
+                  size={24}
+                  testID="close-lightbox"
+                  type="light"
                 />
               </View>
-            </RCTScrollView>
+            </View>
           </View>
         </View>
-        <View
-          style={
-            {
-              "width": 750,
-            }
-          }
-        />
       </View>
-    </RCTScrollView>
-    <View
-      collapsable={false}
-      style={
-        {
-          "bottom": 0,
-          "position": "absolute",
-          "transform": [
+      <RCTScrollView
+        data={
+          [
             {
-              "translateX": 0,
+              "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
             },
             {
-              "translateY": 0,
+              "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
             },
-          ],
-          "width": "100%",
-          "zIndex": 1,
-        }
-      }
-    >
-      <RCTSafeAreaView
-        style={
-          {
-            "backgroundColor": "#00000077",
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          }
+          ]
         }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        getItemLayout={[Function]}
+        horizontal={true}
+        initialNumToRender={1}
+        initialScrollIndex={0}
+        keyExtractor={[Function]}
+        maxToRenderPerBatch={1}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        pagingEnabled={true}
+        renderItem={[Function]}
+        scrollEventThrottle={0.0001}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        windowSize={2}
       >
-        <View
-          style={
-            {
-              "paddingHorizontal": 16,
-              "paddingVertical": 8,
-            }
-          }
-        >
+        <View>
           <View
+            onFocusCapture={[Function]}
             style={
-              {
-                "marginVertical": 4,
-              }
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
             }
           >
-            <Text
-              style={
-                {
-                  "color": "white",
-                  "fontFamily": "Ubuntu",
-                  "fontSize": 16,
-                  "fontStyle": "normal",
-                  "fontWeight": "bold",
-                  "lineHeight": 24,
+            <View>
+              <RCTScrollView
+                contentContainerStyle={
+                  {
+                    "height": 1334,
+                  }
                 }
-              }
-            >
-              Grey Wagtail
-            </Text>
+                maximumZoomScale={1}
+                onScrollEndDrag={[Function]}
+                pinchGestureEnabled={true}
+                scrollEnabled={false}
+                scrollEventThrottle={1}
+                showsHorizontalScrollIndicator={false}
+                showsVerticalScrollIndicator={false}
+                style={
+                  {
+                    "height": 1334,
+                    "width": 750,
+                  }
+                }
+              >
+                <View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "height": 1334,
+                        "justifyContent": "center",
+                        "width": 750,
+                      }
+                    }
+                  >
+                    <ActivityIndicator
+                      color="#FFF"
+                      size="small"
+                    />
+                  </View>
+                  <Image
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessible={true}
+                    collapsable={false}
+                    focusable={true}
+                    onClick={[Function]}
+                    onLoad={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    source={
+                      {
+                        "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
+                      }
+                    }
+                    style={
+                      {
+                        "height": 0,
+                        "opacity": 1,
+                        "width": 0,
+                      }
+                    }
+                  />
+                </View>
+              </RCTScrollView>
+            </View>
           </View>
           <View
             style={
               {
-                "marginVertical": 4,
+                "width": 750,
               }
             }
-          >
-            <Text
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontFamily": "Ubuntu",
-                    "fontSize": 14,
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              11/26/2020 2:37 PM
-            </Text>
-          </View>
+          />
+        </View>
+      </RCTScrollView>
+      <View
+        collapsable={false}
+        style={
+          {
+            "bottom": 0,
+            "position": "absolute",
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+            "width": "100%",
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "backgroundColor": "#00000077",
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+              },
+              {
+                "paddingBottom": 34,
+              },
+            ]
+          }
+        >
           <View
             style={
               {
-                "marginVertical": 4,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
               }
             }
-          >
-            <Text>
-              Jan de Vogelaar
-            </Text>
-          </View>
+          />
         </View>
-      </RCTSafeAreaView>
+      </View>
     </View>
-  </View>
-</Modal>
+  </Modal>
+</RNCSafeAreaProvider>
 `;
 
-exports[`Lightbox Rendering Second photo 1`] = `
-<Modal
-  animationType="fade"
-  hardwareAccelerated={true}
-  onRequestClose={[Function]}
-  supportedOrientations={
+exports[`Lightbox Rendering Photo with species name, date and user 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
     [
-      "portrait",
+      {
+        "flex": 1,
+      },
+      undefined,
     ]
   }
-  transparent={false}
-  visible={true}
 >
-  <View
-    style={
+  <Modal
+    animationType="fade"
+    hardwareAccelerated={true}
+    onRequestClose={[Function]}
+    supportedOrientations={
       [
-        {
-          "backgroundColor": "#000",
-          "flex": 1,
-        },
-        {
-          "backgroundColor": "#000",
-          "opacity": 1,
-        },
+        "portrait",
       ]
     }
+    transparent={false}
+    visible={true}
   >
     <View
-      collapsable={false}
       style={
-        {
-          "position": "absolute",
-          "top": 0,
-          "transform": [
-            {
-              "translateX": 0,
-            },
-            {
-              "translateY": 0,
-            },
-          ],
-          "width": "100%",
-          "zIndex": 1,
-        }
+        [
+          {
+            "backgroundColor": "#000",
+            "flex": 1,
+          },
+          {
+            "backgroundColor": "#000",
+            "opacity": 1,
+          },
+        ]
       }
     >
-      <RCTSafeAreaView
+      <View
+        collapsable={false}
         style={
           {
-            "backgroundColor": "#00000077",
-            "left": 0,
             "position": "absolute",
-            "right": 0,
             "top": 0,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+            "width": "100%",
+            "zIndex": 1,
           }
         }
       >
         <View
           style={
-            {
-              "alignContent": "space-between",
-              "flex": 1,
-              "flexDirection": "row",
-              "padding": 16,
-            }
+            [
+              {
+                "backgroundColor": "#00000077",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "paddingTop": 59,
+              },
+            ]
           }
         >
           <View
             style={
               {
+                "alignContent": "space-between",
                 "flex": 1,
-              }
-            }
-          />
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "justifyContent": "center",
+                "flexDirection": "row",
+                "padding": 16,
               }
             }
           >
             <View
               style={
                 {
-                  "alignSelf": "center",
-                  "flexDirection": "row",
+                  "flex": 1,
+                }
+              }
+            />
+            <View
+              style={
+                {
+                  "alignItems": "center",
+                  "justifyContent": "center",
                 }
               }
             >
@@ -1719,18 +1373,30 @@ exports[`Lightbox Rendering Second photo 1`] = `
                 style={
                   {
                     "alignSelf": "center",
-                    "aspectRatio": 1,
-                    "backgroundColor": "#939393",
-                    "borderRadius": 4,
-                    "margin": 4,
-                    "overflow": "hidden",
-                    "width": 8,
+                    "flexDirection": "row",
                   }
                 }
-              />
-              <View
-                style={
-                  [
+              >
+                <View
+                  style={
+                    [
+                      {
+                        "alignSelf": "center",
+                        "aspectRatio": 1,
+                        "backgroundColor": "#939393",
+                        "borderRadius": 4,
+                        "margin": 4,
+                        "overflow": "hidden",
+                        "width": 8,
+                      },
+                      {
+                        "backgroundColor": "#FFFFFF",
+                      },
+                    ]
+                  }
+                />
+                <View
+                  style={
                     {
                       "alignSelf": "center",
                       "aspectRatio": 1,
@@ -1739,394 +1405,422 @@ exports[`Lightbox Rendering Second photo 1`] = `
                       "margin": 4,
                       "overflow": "hidden",
                       "width": 8,
-                    },
-                    {
-                      "backgroundColor": "#FFFFFF",
-                    },
-                  ]
-                }
-              />
+                    }
+                  }
+                />
+              </View>
             </View>
-          </View>
-          <View
-            style={
-              {
-                "flex": 1,
-              }
-            }
-          >
             <View
-              accessibilityState={
-                {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "disabled": undefined,
-                  "expanded": undefined,
-                  "selected": undefined,
-                }
-              }
-              accessibilityValue={
-                {
-                  "max": undefined,
-                  "min": undefined,
-                  "now": undefined,
-                  "text": undefined,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={
-                {
-                  "bottom": 16,
-                  "left": 16,
-                  "right": 16,
-                  "top": 16,
-                }
-              }
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-end",
-                  "justifyContent": "center",
-                  "opacity": 1,
-                }
-              }
-            >
-              <Icon
-                color="rgba(255, 255, 255, 0.5)"
-                name="xmark"
-                size={24}
-                testID="close-lightbox"
-                type="light"
-              />
-            </View>
-          </View>
-        </View>
-      </RCTSafeAreaView>
-    </View>
-    <RCTScrollView
-      data={
-        [
-          {
-            "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
-          },
-          {
-            "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
-          },
-        ]
-      }
-      getItem={[Function]}
-      getItemCount={[Function]}
-      getItemLayout={[Function]}
-      horizontal={true}
-      initialNumToRender={1}
-      initialScrollIndex={1}
-      keyExtractor={[Function]}
-      maxToRenderPerBatch={1}
-      onContentSizeChange={[Function]}
-      onLayout={[Function]}
-      onMomentumScrollBegin={[Function]}
-      onMomentumScrollEnd={[Function]}
-      onScroll={[Function]}
-      onScrollBeginDrag={[Function]}
-      onScrollEndDrag={[Function]}
-      pagingEnabled={true}
-      renderItem={[Function]}
-      scrollEventThrottle={0.0001}
-      showsHorizontalScrollIndicator={false}
-      showsVerticalScrollIndicator={false}
-      stickyHeaderIndices={[]}
-      windowSize={2}
-    >
-      <View>
-        <View
-          style={
-            {
-              "width": 750,
-            }
-          }
-        />
-        <View
-          onFocusCapture={[Function]}
-          style={
-            [
-              {
-                "flexDirection": "row",
-              },
-              null,
-            ]
-          }
-        >
-          <View>
-            <RCTScrollView
-              contentContainerStyle={
-                {
-                  "height": 1334,
-                }
-              }
-              maximumZoomScale={1}
-              onScrollEndDrag={[Function]}
-              pinchGestureEnabled={true}
-              scrollEnabled={false}
-              scrollEventThrottle={1}
-              showsHorizontalScrollIndicator={false}
-              showsVerticalScrollIndicator={false}
               style={
                 {
-                  "height": 1334,
-                  "width": 750,
+                  "flex": 1,
                 }
               }
             >
-              <View>
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "height": 1334,
-                      "justifyContent": "center",
-                      "width": 750,
-                    }
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
-                >
-                  <ActivityIndicator
-                    color="#FFF"
-                    size="small"
-                  />
-                </View>
-                <Image
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
                   }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onClick={[Function]}
-                  onLoad={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  source={
-                    {
-                      "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
-                    }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                hitSlop={
+                  {
+                    "bottom": 16,
+                    "left": 16,
+                    "right": 16,
+                    "top": 16,
                   }
-                  style={
-                    {
-                      "height": 0,
-                      "opacity": 1,
-                      "width": 0,
-                    }
+                }
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  {
+                    "alignItems": "center",
+                    "alignSelf": "flex-end",
+                    "justifyContent": "center",
+                    "opacity": 1,
                   }
+                }
+              >
+                <Icon
+                  color="rgba(255, 255, 255, 0.5)"
+                  name="xmark"
+                  size={24}
+                  testID="close-lightbox"
+                  type="light"
                 />
               </View>
-            </RCTScrollView>
+            </View>
           </View>
         </View>
       </View>
-    </RCTScrollView>
-    <View
-      collapsable={false}
-      style={
-        {
-          "bottom": 0,
-          "position": "absolute",
-          "transform": [
+      <RCTScrollView
+        data={
+          [
             {
-              "translateX": 0,
+              "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
             },
             {
-              "translateY": 0,
+              "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
             },
-          ],
-          "width": "100%",
-          "zIndex": 1,
+          ]
         }
-      }
-    >
-      <RCTSafeAreaView
+        getItem={[Function]}
+        getItemCount={[Function]}
+        getItemLayout={[Function]}
+        horizontal={true}
+        initialNumToRender={1}
+        initialScrollIndex={0}
+        keyExtractor={[Function]}
+        maxToRenderPerBatch={1}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        pagingEnabled={true}
+        renderItem={[Function]}
+        scrollEventThrottle={0.0001}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        windowSize={2}
+      >
+        <View>
+          <View
+            onFocusCapture={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View>
+              <RCTScrollView
+                contentContainerStyle={
+                  {
+                    "height": 1334,
+                  }
+                }
+                maximumZoomScale={1}
+                onScrollEndDrag={[Function]}
+                pinchGestureEnabled={true}
+                scrollEnabled={false}
+                scrollEventThrottle={1}
+                showsHorizontalScrollIndicator={false}
+                showsVerticalScrollIndicator={false}
+                style={
+                  {
+                    "height": 1334,
+                    "width": 750,
+                  }
+                }
+              >
+                <View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "height": 1334,
+                        "justifyContent": "center",
+                        "width": 750,
+                      }
+                    }
+                  >
+                    <ActivityIndicator
+                      color="#FFF"
+                      size="small"
+                    />
+                  </View>
+                  <Image
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessible={true}
+                    collapsable={false}
+                    focusable={true}
+                    onClick={[Function]}
+                    onLoad={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    source={
+                      {
+                        "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
+                      }
+                    }
+                    style={
+                      {
+                        "height": 0,
+                        "opacity": 1,
+                        "width": 0,
+                      }
+                    }
+                  />
+                </View>
+              </RCTScrollView>
+            </View>
+          </View>
+          <View
+            style={
+              {
+                "width": 750,
+              }
+            }
+          />
+        </View>
+      </RCTScrollView>
+      <View
+        collapsable={false}
         style={
           {
-            "backgroundColor": "#00000077",
             "bottom": 0,
-            "left": 0,
             "position": "absolute",
-            "right": 0,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+            "width": "100%",
+            "zIndex": 1,
           }
         }
       >
         <View
           style={
-            {
-              "paddingHorizontal": 16,
-              "paddingVertical": 8,
-            }
+            [
+              {
+                "backgroundColor": "#00000077",
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+              },
+              {
+                "paddingBottom": 34,
+              },
+            ]
           }
         >
           <View
             style={
               {
-                "marginVertical": 4,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
               }
             }
           >
-            <Text
+            <View
               style={
                 {
-                  "color": "white",
-                  "fontFamily": "Ubuntu",
-                  "fontSize": 16,
-                  "fontStyle": "normal",
-                  "fontWeight": "bold",
-                  "lineHeight": 24,
+                  "marginVertical": 4,
                 }
               }
             >
-              Grey Wagtail
-            </Text>
-          </View>
-          <View
-            style={
-              {
-                "marginVertical": 4,
-              }
-            }
-          >
-            <Text
-              style={
-                [
+              <Text
+                style={
                   {
-                    "color": "#FFFFFF",
+                    "color": "white",
                     "fontFamily": "Ubuntu",
-                    "fontSize": 14,
+                    "fontSize": 16,
                     "fontStyle": "normal",
-                    "fontWeight": "normal",
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ]
+                    "fontWeight": "bold",
+                    "lineHeight": 24,
+                  }
+                }
+              >
+                Grey Wagtail
+              </Text>
+            </View>
+            <View
+              style={
+                {
+                  "marginVertical": 4,
+                }
+              }
+            >
+              <Text
+                style={
+                  [
+                    {
+                      "color": "#FFFFFF",
+                      "fontFamily": "Ubuntu",
+                      "fontSize": 14,
+                      "fontStyle": "normal",
+                      "fontWeight": "normal",
+                      "lineHeight": 20,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                11/26/2020 2:37 PM
+              </Text>
+            </View>
+            <View
+              style={
+                {
+                  "marginVertical": 4,
+                }
               }
             >
-              11/26/2020 2:37 PM
-            </Text>
+              <Text>
+                Jan de Vogelaar
+              </Text>
+            </View>
           </View>
         </View>
-      </RCTSafeAreaView>
+      </View>
     </View>
-  </View>
-</Modal>
+  </Modal>
+</RNCSafeAreaProvider>
 `;
 
-exports[`Lightbox Rendering With a crop button 1`] = `
-<Modal
-  animationType="fade"
-  hardwareAccelerated={true}
-  onRequestClose={[Function]}
-  supportedOrientations={
+exports[`Lightbox Rendering Second photo 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
     [
-      "portrait",
+      {
+        "flex": 1,
+      },
+      undefined,
     ]
   }
-  transparent={false}
-  visible={true}
 >
-  <View
-    style={
+  <Modal
+    animationType="fade"
+    hardwareAccelerated={true}
+    onRequestClose={[Function]}
+    supportedOrientations={
       [
-        {
-          "backgroundColor": "#000",
-          "flex": 1,
-        },
-        {
-          "backgroundColor": "#000",
-          "opacity": 1,
-        },
+        "portrait",
       ]
     }
+    transparent={false}
+    visible={true}
   >
     <View
-      collapsable={false}
       style={
-        {
-          "position": "absolute",
-          "top": 0,
-          "transform": [
-            {
-              "translateX": 0,
-            },
-            {
-              "translateY": 0,
-            },
-          ],
-          "width": "100%",
-          "zIndex": 1,
-        }
+        [
+          {
+            "backgroundColor": "#000",
+            "flex": 1,
+          },
+          {
+            "backgroundColor": "#000",
+            "opacity": 1,
+          },
+        ]
       }
     >
-      <RCTSafeAreaView
+      <View
+        collapsable={false}
         style={
           {
-            "backgroundColor": "#00000077",
-            "left": 0,
             "position": "absolute",
-            "right": 0,
             "top": 0,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+            "width": "100%",
+            "zIndex": 1,
           }
         }
       >
         <View
           style={
-            {
-              "alignContent": "space-between",
-              "flex": 1,
-              "flexDirection": "row",
-              "padding": 16,
-            }
+            [
+              {
+                "backgroundColor": "#00000077",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "paddingTop": 59,
+              },
+            ]
           }
         >
           <View
             style={
               {
+                "alignContent": "space-between",
                 "flex": 1,
-              }
-            }
-          />
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "justifyContent": "center",
+                "flexDirection": "row",
+                "padding": 16,
               }
             }
           >
             <View
               style={
                 {
-                  "alignSelf": "center",
-                  "flexDirection": "row",
+                  "flex": 1,
+                }
+              }
+            />
+            <View
+              style={
+                {
+                  "alignItems": "center",
+                  "justifyContent": "center",
                 }
               }
             >
               <View
                 style={
-                  [
+                  {
+                    "alignSelf": "center",
+                    "flexDirection": "row",
+                  }
+                }
+              >
+                <View
+                  style={
                     {
                       "alignSelf": "center",
                       "aspectRatio": 1,
@@ -2135,274 +1829,464 @@ exports[`Lightbox Rendering With a crop button 1`] = `
                       "margin": 4,
                       "overflow": "hidden",
                       "width": 8,
-                    },
-                    {
-                      "backgroundColor": "#FFFFFF",
-                    },
-                  ]
+                    }
+                  }
+                />
+                <View
+                  style={
+                    [
+                      {
+                        "alignSelf": "center",
+                        "aspectRatio": 1,
+                        "backgroundColor": "#939393",
+                        "borderRadius": 4,
+                        "margin": 4,
+                        "overflow": "hidden",
+                        "width": 8,
+                      },
+                      {
+                        "backgroundColor": "#FFFFFF",
+                      },
+                    ]
+                  }
+                />
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "flex": 1,
                 }
-              />
+              }
+            >
               <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                hitSlop={
+                  {
+                    "bottom": 16,
+                    "left": 16,
+                    "right": 16,
+                    "top": 16,
+                  }
+                }
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
                 style={
                   {
-                    "alignSelf": "center",
-                    "aspectRatio": 1,
-                    "backgroundColor": "#939393",
-                    "borderRadius": 4,
-                    "margin": 4,
-                    "overflow": "hidden",
-                    "width": 8,
+                    "alignItems": "center",
+                    "alignSelf": "flex-end",
+                    "justifyContent": "center",
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Icon
+                  color="rgba(255, 255, 255, 0.5)"
+                  name="xmark"
+                  size={24}
+                  testID="close-lightbox"
+                  type="light"
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <RCTScrollView
+        data={
+          [
+            {
+              "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
+            },
+            {
+              "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
+            },
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        getItemLayout={[Function]}
+        horizontal={true}
+        initialNumToRender={1}
+        initialScrollIndex={1}
+        keyExtractor={[Function]}
+        maxToRenderPerBatch={1}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        pagingEnabled={true}
+        renderItem={[Function]}
+        scrollEventThrottle={0.0001}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        windowSize={2}
+      >
+        <View>
+          <View
+            style={
+              {
+                "width": 750,
+              }
+            }
+          />
+          <View
+            onFocusCapture={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View>
+              <RCTScrollView
+                contentContainerStyle={
+                  {
+                    "height": 1334,
+                  }
+                }
+                maximumZoomScale={1}
+                onScrollEndDrag={[Function]}
+                pinchGestureEnabled={true}
+                scrollEnabled={false}
+                scrollEventThrottle={1}
+                showsHorizontalScrollIndicator={false}
+                showsVerticalScrollIndicator={false}
+                style={
+                  {
+                    "height": 1334,
+                    "width": 750,
                   }
                 }
-              />
+              >
+                <View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "height": 1334,
+                        "justifyContent": "center",
+                        "width": 750,
+                      }
+                    }
+                  >
+                    <ActivityIndicator
+                      color="#FFF"
+                      size="small"
+                    />
+                  </View>
+                  <Image
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessible={true}
+                    collapsable={false}
+                    focusable={true}
+                    onClick={[Function]}
+                    onLoad={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    source={
+                      {
+                        "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
+                      }
+                    }
+                    style={
+                      {
+                        "height": 0,
+                        "opacity": 1,
+                        "width": 0,
+                      }
+                    }
+                  />
+                </View>
+              </RCTScrollView>
             </View>
           </View>
+        </View>
+      </RCTScrollView>
+      <View
+        collapsable={false}
+        style={
+          {
+            "bottom": 0,
+            "position": "absolute",
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+            "width": "100%",
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "backgroundColor": "#00000077",
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+              },
+              {
+                "paddingBottom": 34,
+              },
+            ]
+          }
+        >
           <View
             style={
               {
-                "flex": 1,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
               }
             }
           >
             <View
-              accessibilityState={
-                {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "disabled": undefined,
-                  "expanded": undefined,
-                  "selected": undefined,
-                }
-              }
-              accessibilityValue={
+              style={
                 {
-                  "max": undefined,
-                  "min": undefined,
-                  "now": undefined,
-                  "text": undefined,
+                  "marginVertical": 4,
                 }
               }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={
-                {
-                  "bottom": 16,
-                  "left": 16,
-                  "right": 16,
-                  "top": 16,
+            >
+              <Text
+                style={
+                  {
+                    "color": "white",
+                    "fontFamily": "Ubuntu",
+                    "fontSize": 16,
+                    "fontStyle": "normal",
+                    "fontWeight": "bold",
+                    "lineHeight": 24,
+                  }
                 }
-              }
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
+              >
+                Grey Wagtail
+              </Text>
+            </View>
+            <View
               style={
                 {
-                  "alignItems": "center",
-                  "alignSelf": "flex-end",
-                  "justifyContent": "center",
-                  "opacity": 1,
+                  "marginVertical": 4,
                 }
               }
             >
-              <Icon
-                color="rgba(255, 255, 255, 0.5)"
-                name="xmark"
-                size={24}
-                testID="close-lightbox"
-                type="light"
-              />
+              <Text
+                style={
+                  [
+                    {
+                      "color": "#FFFFFF",
+                      "fontFamily": "Ubuntu",
+                      "fontSize": 14,
+                      "fontStyle": "normal",
+                      "fontWeight": "normal",
+                      "lineHeight": 20,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                11/26/2020 2:37 PM
+              </Text>
             </View>
           </View>
         </View>
-      </RCTSafeAreaView>
+      </View>
     </View>
-    <RCTScrollView
-      data={
+  </Modal>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Lightbox Rendering With a crop button 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <Modal
+    animationType="fade"
+    hardwareAccelerated={true}
+    onRequestClose={[Function]}
+    supportedOrientations={
+      [
+        "portrait",
+      ]
+    }
+    transparent={false}
+    visible={true}
+  >
+    <View
+      style={
         [
           {
-            "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
+            "backgroundColor": "#000",
+            "flex": 1,
           },
           {
-            "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
+            "backgroundColor": "#000",
+            "opacity": 1,
           },
         ]
       }
-      getItem={[Function]}
-      getItemCount={[Function]}
-      getItemLayout={[Function]}
-      horizontal={true}
-      initialNumToRender={1}
-      initialScrollIndex={0}
-      keyExtractor={[Function]}
-      maxToRenderPerBatch={1}
-      onContentSizeChange={[Function]}
-      onLayout={[Function]}
-      onMomentumScrollBegin={[Function]}
-      onMomentumScrollEnd={[Function]}
-      onScroll={[Function]}
-      onScrollBeginDrag={[Function]}
-      onScrollEndDrag={[Function]}
-      pagingEnabled={true}
-      renderItem={[Function]}
-      scrollEventThrottle={0.0001}
-      showsHorizontalScrollIndicator={false}
-      showsVerticalScrollIndicator={false}
-      stickyHeaderIndices={[]}
-      windowSize={2}
     >
-      <View>
+      <View
+        collapsable={false}
+        style={
+          {
+            "position": "absolute",
+            "top": 0,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+            "width": "100%",
+            "zIndex": 1,
+          }
+        }
+      >
         <View
-          onFocusCapture={[Function]}
           style={
             [
               {
-                "flexDirection": "row",
+                "backgroundColor": "#00000077",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "paddingTop": 59,
               },
-              null,
             ]
           }
         >
-          <View>
-            <RCTScrollView
-              contentContainerStyle={
+          <View
+            style={
+              {
+                "alignContent": "space-between",
+                "flex": 1,
+                "flexDirection": "row",
+                "padding": 16,
+              }
+            }
+          >
+            <View
+              style={
                 {
-                  "height": 1334,
+                  "flex": 1,
                 }
               }
-              maximumZoomScale={1}
-              onScrollEndDrag={[Function]}
-              pinchGestureEnabled={true}
-              scrollEnabled={false}
-              scrollEventThrottle={1}
-              showsHorizontalScrollIndicator={false}
-              showsVerticalScrollIndicator={false}
+            />
+            <View
               style={
                 {
-                  "height": 1334,
-                  "width": 750,
+                  "alignItems": "center",
+                  "justifyContent": "center",
                 }
               }
             >
-              <View>
+              <View
+                style={
+                  {
+                    "alignSelf": "center",
+                    "flexDirection": "row",
+                  }
+                }
+              >
                 <View
                   style={
-                    {
-                      "alignItems": "center",
-                      "height": 1334,
-                      "justifyContent": "center",
-                      "width": 750,
-                    }
-                  }
-                >
-                  <ActivityIndicator
-                    color="#FFF"
-                    size="small"
-                  />
-                </View>
-                <Image
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onClick={[Function]}
-                  onLoad={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  source={
-                    {
-                      "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
-                    }
+                    [
+                      {
+                        "alignSelf": "center",
+                        "aspectRatio": 1,
+                        "backgroundColor": "#939393",
+                        "borderRadius": 4,
+                        "margin": 4,
+                        "overflow": "hidden",
+                        "width": 8,
+                      },
+                      {
+                        "backgroundColor": "#FFFFFF",
+                      },
+                    ]
                   }
+                />
+                <View
                   style={
                     {
-                      "height": 0,
-                      "opacity": 1,
-                      "width": 0,
+                      "alignSelf": "center",
+                      "aspectRatio": 1,
+                      "backgroundColor": "#939393",
+                      "borderRadius": 4,
+                      "margin": 4,
+                      "overflow": "hidden",
+                      "width": 8,
                     }
                   }
                 />
               </View>
-            </RCTScrollView>
-          </View>
-        </View>
-        <View
-          style={
-            {
-              "width": 750,
-            }
-          }
-        />
-      </View>
-    </RCTScrollView>
-    <View
-      collapsable={false}
-      style={
-        {
-          "bottom": 0,
-          "position": "absolute",
-          "transform": [
-            {
-              "translateX": 0,
-            },
-            {
-              "translateY": 0,
-            },
-          ],
-          "width": "100%",
-          "zIndex": 1,
-        }
-      }
-    >
-      <RCTSafeAreaView
-        style={
-          {
-            "backgroundColor": "#00000077",
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "paddingHorizontal": 16,
-              "paddingVertical": 8,
-            }
-          }
-        >
-          <View
-            style={
-              {
-                "flexDirection": "row",
-                "marginHorizontal": 16,
-                "marginVertical": 24,
-              }
-            }
-          >
+            </View>
             <View
               style={
                 {
-                  "alignItems": "center",
-                  "flex": 0.5,
+                  "flex": 1,
                 }
               }
             >
@@ -2444,298 +2328,216 @@ exports[`Lightbox Rendering With a crop button 1`] = `
                 onStartShouldSetResponder={[Function]}
                 style={
                   {
+                    "alignItems": "center",
+                    "alignSelf": "flex-end",
+                    "justifyContent": "center",
                     "opacity": 1,
                   }
                 }
               >
                 <Icon
-                  color="#FFFFFF"
-                  name="crop-simple"
-                  size={20}
-                  testID="crop-photo"
+                  color="rgba(255, 255, 255, 0.5)"
+                  name="xmark"
+                  size={24}
+                  testID="close-lightbox"
                   type="light"
                 />
               </View>
             </View>
           </View>
         </View>
-      </RCTSafeAreaView>
-    </View>
-  </View>
-</Modal>
-`;
-
-exports[`Lightbox Rendering With a delete button 1`] = `
-<Modal
-  animationType="fade"
-  hardwareAccelerated={true}
-  onRequestClose={[Function]}
-  supportedOrientations={
-    [
-      "portrait",
-    ]
-  }
-  transparent={false}
-  visible={true}
->
-  <View
-    style={
-      [
-        {
-          "backgroundColor": "#000",
-          "flex": 1,
-        },
-        {
-          "backgroundColor": "#000",
-          "opacity": 1,
-        },
-      ]
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "position": "absolute",
-          "top": 0,
-          "transform": [
+      </View>
+      <RCTScrollView
+        data={
+          [
             {
-              "translateX": 0,
+              "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
             },
             {
-              "translateY": 0,
+              "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
             },
-          ],
-          "width": "100%",
-          "zIndex": 1,
-        }
-      }
-    >
-      <RCTSafeAreaView
-        style={
-          {
-            "backgroundColor": "#00000077",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
+          ]
         }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        getItemLayout={[Function]}
+        horizontal={true}
+        initialNumToRender={1}
+        initialScrollIndex={0}
+        keyExtractor={[Function]}
+        maxToRenderPerBatch={1}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        pagingEnabled={true}
+        renderItem={[Function]}
+        scrollEventThrottle={0.0001}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        windowSize={2}
       >
-        <View
-          style={
-            {
-              "alignContent": "space-between",
-              "flex": 1,
-              "flexDirection": "row",
-              "padding": 16,
-            }
-          }
-        >
-          <View
-            style={
-              {
-                "flex": 1,
-              }
-            }
-          />
+        <View>
           <View
+            onFocusCapture={[Function]}
             style={
-              {
-                "alignItems": "center",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <View
-              style={
+              [
                 {
-                  "alignSelf": "center",
                   "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View>
+              <RCTScrollView
+                contentContainerStyle={
+                  {
+                    "height": 1334,
+                  }
                 }
-              }
-            >
-              <View
-                style={
-                  [
-                    {
-                      "alignSelf": "center",
-                      "aspectRatio": 1,
-                      "backgroundColor": "#939393",
-                      "borderRadius": 4,
-                      "margin": 4,
-                      "overflow": "hidden",
-                      "width": 8,
-                    },
-                    {
-                      "backgroundColor": "#FFFFFF",
-                    },
-                  ]
-                }
-              />
-              <View
+                maximumZoomScale={1}
+                onScrollEndDrag={[Function]}
+                pinchGestureEnabled={true}
+                scrollEnabled={false}
+                scrollEventThrottle={1}
+                showsHorizontalScrollIndicator={false}
+                showsVerticalScrollIndicator={false}
                 style={
                   {
-                    "alignSelf": "center",
-                    "aspectRatio": 1,
-                    "backgroundColor": "#939393",
-                    "borderRadius": 4,
-                    "margin": 4,
-                    "overflow": "hidden",
-                    "width": 8,
+                    "height": 1334,
+                    "width": 750,
                   }
                 }
-              />
+              >
+                <View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "height": 1334,
+                        "justifyContent": "center",
+                        "width": 750,
+                      }
+                    }
+                  >
+                    <ActivityIndicator
+                      color="#FFF"
+                      size="small"
+                    />
+                  </View>
+                  <Image
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessible={true}
+                    collapsable={false}
+                    focusable={true}
+                    onClick={[Function]}
+                    onLoad={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    source={
+                      {
+                        "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
+                      }
+                    }
+                    style={
+                      {
+                        "height": 0,
+                        "opacity": 1,
+                        "width": 0,
+                      }
+                    }
+                  />
+                </View>
+              </RCTScrollView>
             </View>
           </View>
           <View
             style={
               {
-                "flex": 1,
-              }
-            }
-          >
-            <View
-              accessibilityState={
-                {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "disabled": undefined,
-                  "expanded": undefined,
-                  "selected": undefined,
-                }
-              }
-              accessibilityValue={
-                {
-                  "max": undefined,
-                  "min": undefined,
-                  "now": undefined,
-                  "text": undefined,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={
-                {
-                  "bottom": 16,
-                  "left": 16,
-                  "right": 16,
-                  "top": 16,
-                }
-              }
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-end",
-                  "justifyContent": "center",
-                  "opacity": 1,
-                }
-              }
-            >
-              <Icon
-                color="rgba(255, 255, 255, 0.5)"
-                name="xmark"
-                size={24}
-                testID="close-lightbox"
-                type="light"
-              />
-            </View>
-          </View>
+                "width": 750,
+              }
+            }
+          />
         </View>
-      </RCTSafeAreaView>
-    </View>
-    <RCTScrollView
-      data={
-        [
-          {
-            "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
-          },
+      </RCTScrollView>
+      <View
+        collapsable={false}
+        style={
           {
-            "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
-          },
-        ]
-      }
-      getItem={[Function]}
-      getItemCount={[Function]}
-      getItemLayout={[Function]}
-      horizontal={true}
-      initialNumToRender={1}
-      initialScrollIndex={0}
-      keyExtractor={[Function]}
-      maxToRenderPerBatch={1}
-      onContentSizeChange={[Function]}
-      onLayout={[Function]}
-      onMomentumScrollBegin={[Function]}
-      onMomentumScrollEnd={[Function]}
-      onScroll={[Function]}
-      onScrollBeginDrag={[Function]}
-      onScrollEndDrag={[Function]}
-      pagingEnabled={true}
-      renderItem={[Function]}
-      scrollEventThrottle={0.0001}
-      showsHorizontalScrollIndicator={false}
-      showsVerticalScrollIndicator={false}
-      stickyHeaderIndices={[]}
-      windowSize={2}
-    >
-      <View>
+            "bottom": 0,
+            "position": "absolute",
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+            "width": "100%",
+            "zIndex": 1,
+          }
+        }
+      >
         <View
-          onFocusCapture={[Function]}
           style={
             [
               {
-                "flexDirection": "row",
+                "backgroundColor": "#00000077",
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+              },
+              {
+                "paddingBottom": 34,
               },
-              null,
             ]
           }
         >
-          <View>
-            <RCTScrollView
-              contentContainerStyle={
-                {
-                  "height": 1334,
-                }
+          <View
+            style={
+              {
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
               }
-              maximumZoomScale={1}
-              onScrollEndDrag={[Function]}
-              pinchGestureEnabled={true}
-              scrollEnabled={false}
-              scrollEventThrottle={1}
-              showsHorizontalScrollIndicator={false}
-              showsVerticalScrollIndicator={false}
+            }
+          >
+            <View
               style={
                 {
-                  "height": 1334,
-                  "width": 750,
+                  "flexDirection": "row",
+                  "marginHorizontal": 16,
+                  "marginVertical": 24,
                 }
               }
             >
-              <View>
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "height": 1334,
-                      "justifyContent": "center",
-                      "width": 750,
-                    }
+              <View
+                style={
+                  {
+                    "alignItems": "center",
+                    "flex": 0.5,
                   }
-                >
-                  <ActivityIndicator
-                    color="#FFF"
-                    size="small"
-                  />
-                </View>
-                <Image
+                }
+              >
+                <View
                   accessibilityState={
                     {
                       "busy": undefined,
@@ -2745,95 +2547,199 @@ exports[`Lightbox Rendering With a delete button 1`] = `
                       "selected": undefined,
                     }
                   }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
                   accessible={true}
                   collapsable={false}
                   focusable={true}
+                  hitSlop={
+                    {
+                      "bottom": 16,
+                      "left": 16,
+                      "right": 16,
+                      "top": 16,
+                    }
+                  }
                   onClick={[Function]}
-                  onLoad={[Function]}
                   onResponderGrant={[Function]}
                   onResponderMove={[Function]}
                   onResponderRelease={[Function]}
                   onResponderTerminate={[Function]}
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
-                  source={
-                    {
-                      "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
-                    }
-                  }
                   style={
                     {
-                      "height": 0,
                       "opacity": 1,
-                      "width": 0,
                     }
                   }
-                />
+                >
+                  <Icon
+                    color="#FFFFFF"
+                    name="crop-simple"
+                    size={20}
+                    testID="crop-photo"
+                    type="light"
+                  />
+                </View>
               </View>
-            </RCTScrollView>
+            </View>
           </View>
         </View>
-        <View
-          style={
-            {
-              "width": 750,
-            }
-          }
-        />
       </View>
-    </RCTScrollView>
+    </View>
+  </Modal>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Lightbox Rendering With a delete button 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <Modal
+    animationType="fade"
+    hardwareAccelerated={true}
+    onRequestClose={[Function]}
+    supportedOrientations={
+      [
+        "portrait",
+      ]
+    }
+    transparent={false}
+    visible={true}
+  >
     <View
-      collapsable={false}
       style={
-        {
-          "bottom": 0,
-          "position": "absolute",
-          "transform": [
-            {
-              "translateX": 0,
-            },
-            {
-              "translateY": 0,
-            },
-          ],
-          "width": "100%",
-          "zIndex": 1,
-        }
+        [
+          {
+            "backgroundColor": "#000",
+            "flex": 1,
+          },
+          {
+            "backgroundColor": "#000",
+            "opacity": 1,
+          },
+        ]
       }
     >
-      <RCTSafeAreaView
+      <View
+        collapsable={false}
         style={
           {
-            "backgroundColor": "#00000077",
-            "bottom": 0,
-            "left": 0,
             "position": "absolute",
-            "right": 0,
+            "top": 0,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+            "width": "100%",
+            "zIndex": 1,
           }
         }
       >
         <View
           style={
-            {
-              "paddingHorizontal": 16,
-              "paddingVertical": 8,
-            }
+            [
+              {
+                "backgroundColor": "#00000077",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "paddingTop": 59,
+              },
+            ]
           }
         >
           <View
             style={
               {
+                "alignContent": "space-between",
+                "flex": 1,
                 "flexDirection": "row",
-                "marginHorizontal": 16,
-                "marginVertical": 24,
+                "padding": 16,
               }
             }
           >
+            <View
+              style={
+                {
+                  "flex": 1,
+                }
+              }
+            />
             <View
               style={
                 {
                   "alignItems": "center",
-                  "flex": 0.5,
+                  "justifyContent": "center",
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "alignSelf": "center",
+                    "flexDirection": "row",
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {
+                        "alignSelf": "center",
+                        "aspectRatio": 1,
+                        "backgroundColor": "#939393",
+                        "borderRadius": 4,
+                        "margin": 4,
+                        "overflow": "hidden",
+                        "width": 8,
+                      },
+                      {
+                        "backgroundColor": "#FFFFFF",
+                      },
+                    ]
+                  }
+                />
+                <View
+                  style={
+                    {
+                      "alignSelf": "center",
+                      "aspectRatio": 1,
+                      "backgroundColor": "#939393",
+                      "borderRadius": 4,
+                      "margin": 4,
+                      "overflow": "hidden",
+                      "width": 8,
+                    }
+                  }
+                />
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "flex": 1,
                 }
               }
             >
@@ -2875,23 +2781,271 @@ exports[`Lightbox Rendering With a delete button 1`] = `
                 onStartShouldSetResponder={[Function]}
                 style={
                   {
+                    "alignItems": "center",
+                    "alignSelf": "flex-end",
+                    "justifyContent": "center",
                     "opacity": 1,
                   }
                 }
               >
                 <Icon
-                  color="#FFFFFF"
-                  name="trash-can"
-                  size={20}
-                  testID="delete-photo"
+                  color="rgba(255, 255, 255, 0.5)"
+                  name="xmark"
+                  size={24}
+                  testID="close-lightbox"
                   type="light"
                 />
               </View>
             </View>
           </View>
         </View>
-      </RCTSafeAreaView>
+      </View>
+      <RCTScrollView
+        data={
+          [
+            {
+              "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
+            },
+            {
+              "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
+            },
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        getItemLayout={[Function]}
+        horizontal={true}
+        initialNumToRender={1}
+        initialScrollIndex={0}
+        keyExtractor={[Function]}
+        maxToRenderPerBatch={1}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        pagingEnabled={true}
+        renderItem={[Function]}
+        scrollEventThrottle={0.0001}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        windowSize={2}
+      >
+        <View>
+          <View
+            onFocusCapture={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View>
+              <RCTScrollView
+                contentContainerStyle={
+                  {
+                    "height": 1334,
+                  }
+                }
+                maximumZoomScale={1}
+                onScrollEndDrag={[Function]}
+                pinchGestureEnabled={true}
+                scrollEnabled={false}
+                scrollEventThrottle={1}
+                showsHorizontalScrollIndicator={false}
+                showsVerticalScrollIndicator={false}
+                style={
+                  {
+                    "height": 1334,
+                    "width": 750,
+                  }
+                }
+              >
+                <View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "height": 1334,
+                        "justifyContent": "center",
+                        "width": 750,
+                      }
+                    }
+                  >
+                    <ActivityIndicator
+                      color="#FFF"
+                      size="small"
+                    />
+                  </View>
+                  <Image
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessible={true}
+                    collapsable={false}
+                    focusable={true}
+                    onClick={[Function]}
+                    onLoad={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    source={
+                      {
+                        "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
+                      }
+                    }
+                    style={
+                      {
+                        "height": 0,
+                        "opacity": 1,
+                        "width": 0,
+                      }
+                    }
+                  />
+                </View>
+              </RCTScrollView>
+            </View>
+          </View>
+          <View
+            style={
+              {
+                "width": 750,
+              }
+            }
+          />
+        </View>
+      </RCTScrollView>
+      <View
+        collapsable={false}
+        style={
+          {
+            "bottom": 0,
+            "position": "absolute",
+            "transform": [
+              {
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+            "width": "100%",
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "backgroundColor": "#00000077",
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+              },
+              {
+                "paddingBottom": 34,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "flexDirection": "row",
+                  "marginHorizontal": 16,
+                  "marginVertical": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "alignItems": "center",
+                    "flex": 0.5,
+                  }
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  hitSlop={
+                    {
+                      "bottom": 16,
+                      "left": 16,
+                      "right": 16,
+                      "top": 16,
+                    }
+                  }
+                  onClick={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  style={
+                    {
+                      "opacity": 1,
+                    }
+                  }
+                >
+                  <Icon
+                    color="#FFFFFF"
+                    name="trash-can"
+                    size={20}
+                    testID="delete-photo"
+                    type="light"
+                  />
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
     </View>
-  </View>
-</Modal>
+  </Modal>
+</RNCSafeAreaProvider>
 `;
diff --git a/yarn.lock b/yarn.lock
index 635d549..9356aba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2433,6 +2433,7 @@ __metadata:
     react-native: 0.79.1
     react-native-logs: ^5.3.0
     react-native-render-html: ^6.3.4
+    react-native-safe-area-context: ^5.6.0
     react-native-scalable-image: ^1.1.0
     react-test-renderer: 19.0.0
     ts-jest: ^29.2.5
@@ -2443,6 +2444,7 @@ __metadata:
     react: 19.0.0
     react-native: 0.79.1
     react-native-render-html: ^6.1.0
+    react-native-safe-area-context: ^5.6.0
   languageName: unknown
   linkType: soft
 
@@ -9398,6 +9400,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-safe-area-context@npm:^5.6.0":
+  version: 5.6.0
+  resolution: "react-native-safe-area-context@npm:5.6.0"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 23f382a6504dc6ff1064fe45af53207014a27d3312eeaa5e0fd92281c425cb518d7e5e7bc79cf29b0f8e685a30931df93800dfe98e5d81bd768499aa5e737ab0
+  languageName: node
+  linkType: hard
+
 "react-native-scalable-image@npm:^1.1.0":
   version: 1.1.0
   resolution: "react-native-scalable-image@npm:1.1.0"