From 2d34372eaffc812fa24f491b1134c2a4c5e72e1a Mon Sep 17 00:00:00 2001
From: Jonathan Neuteboom <--global>
Date: Fri, 28 Nov 2025 09:26:45 +0100
Subject: [PATCH 1/2] Add canCrop function to Lightbox

---
 package.json                                  |    2 +-
 src/components/Lightbox.tsx                   |   13 +-
 src/components/__tests__/Lightbox.test.tsx    |   48 +
 .../__snapshots__/Lightbox.test.tsx.snap      | 1425 +++++++++++++++--
 4 files changed, 1346 insertions(+), 142 deletions(-)

diff --git a/package.json b/package.json
index 9d11b94..fe8e568 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.60.0",
+  "version": "1.61.0",
   "main": "src/index.ts",
   "repository": "git@github.com:observation/react-native-components.git",
   "author": "Observation.org",
diff --git a/src/components/Lightbox.tsx b/src/components/Lightbox.tsx
index 0625daa..097ca50 100644
--- a/src/components/Lightbox.tsx
+++ b/src/components/Lightbox.tsx
@@ -89,6 +89,7 @@ type Props = {
   onClose: () => void
   onDelete?: (imageIndex: number) => void
   onCrop?: (imageIndex: number) => void
+  canCrop?: (imageIndex: number) => boolean
   photos: string[]
   title?: string
   description?: string
@@ -96,12 +97,14 @@ type Props = {
   style?: LightboxStyle
 }
 
-const Lightbox = ({ index, onClose, onDelete, onCrop, photos, title, description, content, style }: Props) => {
+const Lightbox = ({ index, onClose, onDelete, onCrop, canCrop, photos, title, description, content, style }: Props) => {
   const initialImageIndex = index ?? 0
   const [currentImageIndex, setCurrentImageIndex] = useState<number>()
 
-  const onPressDelete = onDelete ? () => onDelete(currentImageIndex ?? initialImageIndex) : undefined
-  const onPressCrop = onCrop ? () => onCrop(currentImageIndex ?? initialImageIndex) : undefined
+  const imageIndex = currentImageIndex ?? initialImageIndex
+  const onPressDelete = onDelete ? () => onDelete(imageIndex) : undefined
+  const onPressCrop = onCrop ? () => onCrop(imageIndex) : undefined
+  const showCrop = canCrop ? canCrop(imageIndex) : true
 
   const ImageViewTypeErased = ImageView as unknown as any
 
@@ -117,10 +120,10 @@ const Lightbox = ({ index, onClose, onDelete, onCrop, photos, title, description
       FooterComponent={getLightboxFooterComponent(
         title,
         description,
-        content?.(currentImageIndex),
+        content?.(imageIndex),
         style,
         onPressDelete,
-        onPressCrop,
+        showCrop ? onPressCrop : undefined,
       )}
     />
   )
diff --git a/src/components/__tests__/Lightbox.test.tsx b/src/components/__tests__/Lightbox.test.tsx
index 3587c82..9c408dc 100644
--- a/src/components/__tests__/Lightbox.test.tsx
+++ b/src/components/__tests__/Lightbox.test.tsx
@@ -103,6 +103,33 @@ describe('Lightbox', () => {
       expect(queryByTestId('crop-photo')).not.toBeNull()
       expect(toJSON()).toMatchSnapshot()
     })
+
+    test('Do not show crop button when canCrop returns false', () => {
+      const { toJSON, queryByTestId } = render(
+        <Lightbox photos={photos} index={0} onClose={onClose} onCrop={() => {}} canCrop={() => false} />,
+      )
+
+      expect(queryByTestId('crop-photo')).toBeNull()
+      expect(toJSON()).toMatchSnapshot()
+    })
+
+    test('Show crop button when canCrop returns true', () => {
+      const { toJSON, queryByTestId } = render(
+        <Lightbox photos={photos} index={0} onClose={onClose} onCrop={() => {}} canCrop={() => true} />,
+      )
+
+      expect(queryByTestId('crop-photo')).not.toBeNull()
+      expect(toJSON()).toMatchSnapshot()
+    })
+
+    test('When canCrop returns true, but no onCrop is provided, show no crop button', () => {
+      const { toJSON, queryByTestId } = render(
+        <Lightbox photos={photos} index={0} onClose={onClose} canCrop={() => true} />,
+      )
+
+      expect(queryByTestId('crop-photo')).toBeNull()
+      expect(toJSON()).toMatchSnapshot()
+    })
   })
 
   describe('Interaction', () => {
@@ -155,5 +182,26 @@ describe('Lightbox', () => {
       // THEN
       expect(onDelete).toHaveBeenCalledWith(1)
     })
+
+    test('When swiping to a photo that is not cropable, the crop button is not shown', async () => {
+      // GIVEN
+      jest.mock('@observation.org/react-native-image-viewing', () => 'ImageCarousel')
+      const { queryByTestId } = render(
+        <Lightbox
+          photos={photos}
+          index={0}
+          onClose={onClose}
+          onCrop={() => {}}
+          canCrop={(imageIndex) => imageIndex === 0}
+        />,
+      )
+      expect(queryByTestId('crop-photo')).not.toBeNull()
+
+      // WHEN
+      act(() => mockOnImageIndexChange(1))
+
+      // THEN
+      expect(queryByTestId('crop-photo')).toBeNull()
+    })
   })
 })
diff --git a/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap b/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap
index 037e433..a958d25 100644
--- a/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap
@@ -435,7 +435,7 @@ exports[`Lightbox Rendering Content that is dependent on the selected image 1`]
 </Modal>
 `;
 
-exports[`Lightbox Rendering First photo 1`] = `
+exports[`Lightbox Rendering Do not show crop button when canCrop returns false 1`] = `
 <Modal
   animationType="fade"
   hardwareAccelerated={true}
@@ -789,62 +789,14 @@ exports[`Lightbox Rendering First photo 1`] = `
               "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`] = `
+exports[`Lightbox Rendering First photo 1`] = `
 <Modal
   animationType="fade"
   hardwareAccelerated={true}
@@ -1198,14 +1150,62 @@ exports[`Lightbox Rendering Only a photo 1`] = `
               "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 Photo with species name, date and user 1`] = `
+exports[`Lightbox Rendering Only a photo 1`] = `
 <Modal
   animationType="fade"
   hardwareAccelerated={true}
@@ -1559,73 +1559,14 @@ exports[`Lightbox Rendering Photo with species name, date and user 1`] = `
               "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
-            style={
-              {
-                "marginVertical": 4,
-              }
-            }
-          >
-            <Text>
-              Jan de Vogelaar
-            </Text>
-          </View>
-        </View>
+        />
       </RCTSafeAreaView>
     </View>
   </View>
 </Modal>
 `;
 
-exports[`Lightbox Rendering Second photo 1`] = `
+exports[`Lightbox Rendering Photo with species name, date and user 1`] = `
 <Modal
   animationType="fade"
   hardwareAccelerated={true}
@@ -1715,19 +1656,6 @@ exports[`Lightbox Rendering Second photo 1`] = `
                 }
               }
             >
-              <View
-                style={
-                  {
-                    "alignSelf": "center",
-                    "aspectRatio": 1,
-                    "backgroundColor": "#939393",
-                    "borderRadius": 4,
-                    "margin": 4,
-                    "overflow": "hidden",
-                    "width": 8,
-                  }
-                }
-              />
               <View
                 style={
                   [
@@ -1746,6 +1674,19 @@ exports[`Lightbox Rendering Second photo 1`] = `
                   ]
                 }
               />
+              <View
+                style={
+                  {
+                    "alignSelf": "center",
+                    "aspectRatio": 1,
+                    "backgroundColor": "#939393",
+                    "borderRadius": 4,
+                    "margin": 4,
+                    "overflow": "hidden",
+                    "width": 8,
+                  }
+                }
+              />
             </View>
           </View>
           <View
@@ -1828,7 +1769,7 @@ exports[`Lightbox Rendering Second photo 1`] = `
       getItemLayout={[Function]}
       horizontal={true}
       initialNumToRender={1}
-      initialScrollIndex={1}
+      initialScrollIndex={0}
       keyExtractor={[Function]}
       maxToRenderPerBatch={1}
       onContentSizeChange={[Function]}
@@ -1847,13 +1788,6 @@ exports[`Lightbox Rendering Second photo 1`] = `
       windowSize={2}
     >
       <View>
-        <View
-          style={
-            {
-              "width": 750,
-            }
-          }
-        />
         <View
           onFocusCapture={[Function]}
           style={
@@ -1925,7 +1859,7 @@ exports[`Lightbox Rendering Second photo 1`] = `
                   onStartShouldSetResponder={[Function]}
                   source={
                     {
-                      "uri": "https://waarneming-test.nl/media/photo/031/772/31772399.jpg",
+                      "uri": "https://waarneming-test.nl/media/photo/031/772/31772398.jpg",
                     }
                   }
                   style={
@@ -1940,6 +1874,13 @@ exports[`Lightbox Rendering Second photo 1`] = `
             </RCTScrollView>
           </View>
         </View>
+        <View
+          style={
+            {
+              "width": 750,
+            }
+          }
+        />
       </View>
     </RCTScrollView>
     <View
@@ -2027,6 +1968,17 @@ exports[`Lightbox Rendering Second photo 1`] = `
               11/26/2020 2:37 PM
             </Text>
           </View>
+          <View
+            style={
+              {
+                "marginVertical": 4,
+              }
+            }
+          >
+            <Text>
+              Jan de Vogelaar
+            </Text>
+          </View>
         </View>
       </RCTSafeAreaView>
     </View>
@@ -2034,6 +1986,1207 @@ exports[`Lightbox Rendering Second photo 1`] = `
 </Modal>
 `;
 
+exports[`Lightbox Rendering Second 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",
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "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>
+      </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,
+                }
+              }
+            >
+              <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,
+        }
+      }
+    >
+      <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 Show crop button when canCrop returns true 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={
+                  {
+                    "alignSelf": "center",
+                    "aspectRatio": 1,
+                    "backgroundColor": "#939393",
+                    "borderRadius": 4,
+                    "margin": 4,
+                    "overflow": "hidden",
+                    "width": 8,
+                  }
+                }
+              />
+            </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,
+                    }
+                  }
+                />
+              </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
+              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="crop-simple"
+                  size={20}
+                  testID="crop-photo"
+                  type="light"
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+      </RCTSafeAreaView>
+    </View>
+  </View>
+</Modal>
+`;
+
+exports[`Lightbox Rendering When canCrop returns true, but no onCrop is provided, show no crop 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": [
+            {
+              "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={
+                  {
+                    "alignSelf": "center",
+                    "aspectRatio": 1,
+                    "backgroundColor": "#939393",
+                    "borderRadius": 4,
+                    "margin": 4,
+                    "overflow": "hidden",
+                    "width": 8,
+                  }
+                }
+              />
+            </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,
+                    }
+                  }
+                />
+              </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 With a crop button 1`] = `
 <Modal
   animationType="fade"

From 0a419d5aa47283334485d04b05f4f2d4930400cd Mon Sep 17 00:00:00 2001
From: Jonathan Neuteboom <--global>
Date: Mon, 1 Dec 2025 11:23:45 +0100
Subject: [PATCH 2/2] Rename canCrop to editable

---
 src/components/Lightbox.tsx                     | 17 ++++++++++++++---
 src/components/__tests__/Lightbox.test.tsx      | 14 +++++++-------
 .../__snapshots__/Lightbox.test.tsx.snap        |  6 +++---
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/components/Lightbox.tsx b/src/components/Lightbox.tsx
index 097ca50..05cb275 100644
--- a/src/components/Lightbox.tsx
+++ b/src/components/Lightbox.tsx
@@ -89,7 +89,7 @@ type Props = {
   onClose: () => void
   onDelete?: (imageIndex: number) => void
   onCrop?: (imageIndex: number) => void
-  canCrop?: (imageIndex: number) => boolean
+  editable?: (imageIndex: number) => boolean
   photos: string[]
   title?: string
   description?: string
@@ -97,14 +97,25 @@ type Props = {
   style?: LightboxStyle
 }
 
-const Lightbox = ({ index, onClose, onDelete, onCrop, canCrop, photos, title, description, content, style }: Props) => {
+const Lightbox = ({
+  index,
+  onClose,
+  onDelete,
+  onCrop,
+  editable,
+  photos,
+  title,
+  description,
+  content,
+  style,
+}: Props) => {
   const initialImageIndex = index ?? 0
   const [currentImageIndex, setCurrentImageIndex] = useState<number>()
 
   const imageIndex = currentImageIndex ?? initialImageIndex
   const onPressDelete = onDelete ? () => onDelete(imageIndex) : undefined
   const onPressCrop = onCrop ? () => onCrop(imageIndex) : undefined
-  const showCrop = canCrop ? canCrop(imageIndex) : true
+  const showCrop = editable ? editable(imageIndex) : true
 
   const ImageViewTypeErased = ImageView as unknown as any
 
diff --git a/src/components/__tests__/Lightbox.test.tsx b/src/components/__tests__/Lightbox.test.tsx
index 9c408dc..09dc1c2 100644
--- a/src/components/__tests__/Lightbox.test.tsx
+++ b/src/components/__tests__/Lightbox.test.tsx
@@ -104,27 +104,27 @@ describe('Lightbox', () => {
       expect(toJSON()).toMatchSnapshot()
     })
 
-    test('Do not show crop button when canCrop returns false', () => {
+    test('Do not show crop button when editable returns false', () => {
       const { toJSON, queryByTestId } = render(
-        <Lightbox photos={photos} index={0} onClose={onClose} onCrop={() => {}} canCrop={() => false} />,
+        <Lightbox photos={photos} index={0} onClose={onClose} onCrop={() => {}} editable={() => false} />,
       )
 
       expect(queryByTestId('crop-photo')).toBeNull()
       expect(toJSON()).toMatchSnapshot()
     })
 
-    test('Show crop button when canCrop returns true', () => {
+    test('Show crop button when editable returns true', () => {
       const { toJSON, queryByTestId } = render(
-        <Lightbox photos={photos} index={0} onClose={onClose} onCrop={() => {}} canCrop={() => true} />,
+        <Lightbox photos={photos} index={0} onClose={onClose} onCrop={() => {}} editable={() => true} />,
       )
 
       expect(queryByTestId('crop-photo')).not.toBeNull()
       expect(toJSON()).toMatchSnapshot()
     })
 
-    test('When canCrop returns true, but no onCrop is provided, show no crop button', () => {
+    test('When editable returns true, but no onCrop is provided, show no crop button', () => {
       const { toJSON, queryByTestId } = render(
-        <Lightbox photos={photos} index={0} onClose={onClose} canCrop={() => true} />,
+        <Lightbox photos={photos} index={0} onClose={onClose} editable={() => true} />,
       )
 
       expect(queryByTestId('crop-photo')).toBeNull()
@@ -192,7 +192,7 @@ describe('Lightbox', () => {
           index={0}
           onClose={onClose}
           onCrop={() => {}}
-          canCrop={(imageIndex) => imageIndex === 0}
+          editable={(imageIndex) => imageIndex === 0}
         />,
       )
       expect(queryByTestId('crop-photo')).not.toBeNull()
diff --git a/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap b/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap
index a958d25..d444eab 100644
--- a/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap
@@ -435,7 +435,7 @@ exports[`Lightbox Rendering Content that is dependent on the selected image 1`]
 </Modal>
 `;
 
-exports[`Lightbox Rendering Do not show crop button when canCrop returns false 1`] = `
+exports[`Lightbox Rendering Do not show crop button when editable returns false 1`] = `
 <Modal
   animationType="fade"
   hardwareAccelerated={true}
@@ -2395,7 +2395,7 @@ exports[`Lightbox Rendering Second photo 1`] = `
 </Modal>
 `;
 
-exports[`Lightbox Rendering Show crop button when canCrop returns true 1`] = `
+exports[`Lightbox Rendering Show crop button when editable returns true 1`] = `
 <Modal
   animationType="fade"
   hardwareAccelerated={true}
@@ -2826,7 +2826,7 @@ exports[`Lightbox Rendering Show crop button when canCrop returns true 1`] = `
 </Modal>
 `;
 
-exports[`Lightbox Rendering When canCrop returns true, but no onCrop is provided, show no crop button 1`] = `
+exports[`Lightbox Rendering When editable returns true, but no onCrop is provided, show no crop button 1`] = `
 <Modal
   animationType="fade"
   hardwareAccelerated={true}