Skip to content

Fix use of safe area view #68

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
SjaakSchilperoort wants to merge 2 commits into
base: develop
Choose a base branch
from
Draft

Fix use of safe area view #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c6216fc
Remove use of safe area view
SjaakSchilperoort Aug 7, 2025
434dde0
Use hook useSafeAreaInsets instead of SafeAreaView
SjaakSchilperoort Aug 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down
113 changes: 60 additions & 53 deletions src/components/Lightbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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 =
(
Expand All @@ -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
Expand Down
58 changes: 52 additions & 6 deletions src/components/__tests__/ContentImage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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()
Expand Down
Loading