ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
fix: (iOS) PWA header for Home and Profile pages
thanks @leafwind.tw
xan.lol
+7
-1
src/components/Layout/Header/index.tsx
+7
-1
src/components/Layout/Header/index.tsx
···
60
60
gutters,
61
61
platform({
62
62
native: [a.pb_xs, {minHeight: 48}],
63
-
web: [a.py_xs, {minHeight: 52}],
63
+
web: [
64
+
a.py_xs,
65
+
{
66
+
minHeight: 52,
67
+
paddingTop: 'env(safe-area-inset-top)',
68
+
},
69
+
],
64
70
}),
65
71
t.atoms.border_contrast_low,
66
72
gtMobile && [a.mx_auto, {maxWidth: 600}],
+16
-2
src/screens/Profile/Header/Shell.tsx
+16
-2
src/screens/Profile/Header/Shell.tsx
···
1
-
import {memo, useCallback, useEffect, useMemo} from 'react'
1
+
import {memo, useCallback, useEffect, useMemo, useRef} from 'react'
2
2
import {Pressable, TouchableWithoutFeedback, View} from 'react-native'
3
3
import Animated, {
4
4
measure,
···
74
74
75
75
const aviRef = useAnimatedRef()
76
76
const bannerRef = useAnimatedRef<Animated.View>()
77
+
const containerRef = useRef<View>(null)
78
+
79
+
// Apply safe-area CSS on web
80
+
useEffect(() => {
81
+
if (containerRef.current && typeof window !== 'undefined') {
82
+
const element = containerRef.current as any
83
+
if (element.style) {
84
+
element.style.paddingTop = 'env(safe-area-inset-top)'
85
+
}
86
+
}
87
+
}, [])
77
88
78
89
const onPressBack = useCallback(() => {
79
90
if (navigation.canGoBack()) {
···
191
202
}, [profile.banner, moderation, _openLightboxBanner, bannerRef])
192
203
193
204
return (
194
-
<View style={t.atoms.bg} pointerEvents={IS_IOS ? 'auto' : 'box-none'}>
205
+
<View
206
+
ref={containerRef}
207
+
style={t.atoms.bg}
208
+
pointerEvents={IS_IOS ? 'auto' : 'box-none'}>
195
209
<View
196
210
pointerEvents={IS_IOS ? 'auto' : 'box-none'}
197
211
style={[a.relative, {height: 150}]}>