jollywhoppers.com
Bluesky app fork with some witchin' additions 💫
witchsky.app
bluesky
fork
client
iOS 26 (#9047)
Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
authored by
Eric Bailey
Claude Opus 4.6
and committed by
GitHub
73b096e4
9b0f0a8d
-6
__mocks__/@notifee/react-native.ts
-6
__mocks__/@notifee/react-native.ts
-9
__mocks__/@react-native-camera-roll/camera-roll.js
-9
__mocks__/@react-native-camera-roll/camera-roll.js
-4
__mocks__/react-native-background-fetch.ts
-4
__mocks__/react-native-background-fetch.ts
-1
__mocks__/react-native-fs.js
-1
__mocks__/react-native-fs.js
···
1
-
export default {}
···
-10
__mocks__/rn-fetch-blob.js
-10
__mocks__/rn-fetch-blob.js
-1
app.config.js
-1
app.config.js
+14
-1
modules/bottom-sheet/ios/SheetViewController.swift
+14
-1
modules/bottom-sheet/ios/SheetViewController.swift
···
27
return
28
}
29
30
+
// On iOS 26, the floaty sheet presentation adds the device bottom safe area
31
+
// on top of the custom detent value, creating visible padding inside the pill.
32
+
// Subtract it so the pill height matches our actual content.
33
+
var bottomSafeAreaAdjustment: CGFloat = 0
34
+
if #available(iOS 26.0, *) {
35
+
if let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
36
+
let window = windowScene.windows.first {
37
+
bottomSafeAreaAdjustment = window.safeAreaInsets.bottom
38
+
}
39
+
}
40
+
41
+
let adjustedHeight = contentHeight - bottomSafeAreaAdjustment
42
+
43
if #available(iOS 16.0, *) {
44
if contentHeight > screenHeight - 100 {
45
sheet.detents = [
···
49
} else {
50
sheet.detents = [
51
.custom { _ in
52
+
return adjustedHeight
53
}
54
]
55
if !preventExpansion {
+3
-2
modules/bottom-sheet/src/BottomSheetNativeComponent.tsx
+3
-2
modules/bottom-sheet/src/BottomSheetNativeComponent.tsx
···
5
type NativeSyntheticEvent,
6
Platform,
7
type StyleProp,
8
View,
9
type ViewStyle,
10
} from 'react-native'
···
20
BottomSheetPortalProvider,
21
Context as PortalContext,
22
} from './BottomSheetPortal'
23
-
24
-
const screenHeight = Dimensions.get('screen').height
25
26
const NativeView: React.ComponentType<
27
BottomSheetViewProps & {
···
94
95
let extraStyles
96
if (IS_IOS15 && this.state.viewHeight) {
97
const {viewHeight} = this.state
98
const cornerRadius = this.props.cornerRadius ?? 0
99
if (viewHeight < screenHeight / 2) {
···
154
}) {
155
const insets = useSafeAreaInsets()
156
const cornerRadius = rest.cornerRadius ?? 0
157
158
const sheetHeight = IS_IOS ? screenHeight - insets.top : screenHeight
159
···
5
type NativeSyntheticEvent,
6
Platform,
7
type StyleProp,
8
+
useWindowDimensions,
9
View,
10
type ViewStyle,
11
} from 'react-native'
···
21
BottomSheetPortalProvider,
22
Context as PortalContext,
23
} from './BottomSheetPortal'
24
25
const NativeView: React.ComponentType<
26
BottomSheetViewProps & {
···
93
94
let extraStyles
95
if (IS_IOS15 && this.state.viewHeight) {
96
+
const screenHeight = Dimensions.get('screen').height
97
const {viewHeight} = this.state
98
const cornerRadius = this.props.cornerRadius ?? 0
99
if (viewHeight < screenHeight / 2) {
···
154
}) {
155
const insets = useSafeAreaInsets()
156
const cornerRadius = rest.cornerRadius ?? 0
157
+
const {height: screenHeight} = useWindowDimensions()
158
159
const sheetHeight = IS_IOS ? screenHeight - insets.top : screenHeight
160
+7
package.json
+7
package.json
+4
src/alf/atoms.ts
+4
src/alf/atoms.ts
+11
-7
src/components/Dialog/index.tsx
+11
-7
src/components/Dialog/index.tsx
···
38
type DialogOuterProps,
39
} from '#/components/Dialog/types'
40
import {createInput} from '#/components/forms/TextField'
41
-
import {IS_ANDROID, IS_IOS} from '#/env'
42
import {BottomSheet, BottomSheetSnapPoint} from '../../../modules/bottom-sheet'
43
import {
44
type BottomSheetSnapPointChangeEvent,
···
166
return (
167
<BottomSheet
168
ref={ref}
169
-
cornerRadius={20}
170
backgroundColor={t.atoms.bg.backgroundColor}
171
{...nativeOptions}
172
onSnapPointChange={onSnapPointChange}
···
181
)
182
}
183
184
export function Inner({children, style, header}: DialogInnerProps) {
185
const insets = useSafeAreaInsets()
186
return (
···
190
style={[
191
a.pt_2xl,
192
a.px_xl,
193
-
{
194
-
paddingBottom: insets.bottom + insets.top,
195
-
},
196
style,
197
]}>
198
{children}
···
253
<KeyboardAwareScrollView
254
contentContainerStyle={[
255
a.pt_2xl,
256
-
a.px_xl,
257
{paddingBottom},
258
contentContainerStyle,
259
]}
···
342
a.pt_md,
343
{
344
paddingBottom: platform({
345
-
ios: tokens.space.md + bottom,
346
android: tokens.space.md + bottom + top,
347
}),
348
},
···
38
type DialogOuterProps,
39
} from '#/components/Dialog/types'
40
import {createInput} from '#/components/forms/TextField'
41
+
import {IS_ANDROID, IS_IOS, IS_LIQUID_GLASS} from '#/env'
42
import {BottomSheet, BottomSheetSnapPoint} from '../../../modules/bottom-sheet'
43
import {
44
type BottomSheetSnapPointChangeEvent,
···
166
return (
167
<BottomSheet
168
ref={ref}
169
+
// device-bezel radius when undefined
170
+
cornerRadius={IS_LIQUID_GLASS ? undefined : 20}
171
backgroundColor={t.atoms.bg.backgroundColor}
172
{...nativeOptions}
173
onSnapPointChange={onSnapPointChange}
···
182
)
183
}
184
185
+
/**
186
+
* @deprecated use `Dialog.ScrollableInner` instead
187
+
*/
188
export function Inner({children, style, header}: DialogInnerProps) {
189
const insets = useSafeAreaInsets()
190
return (
···
194
style={[
195
a.pt_2xl,
196
a.px_xl,
197
+
IS_LIQUID_GLASS
198
+
? a.pb_2xl
199
+
: {paddingBottom: insets.bottom + insets.top},
200
style,
201
]}>
202
{children}
···
257
<KeyboardAwareScrollView
258
contentContainerStyle={[
259
a.pt_2xl,
260
+
IS_LIQUID_GLASS ? a.px_2xl : a.px_xl,
261
{paddingBottom},
262
contentContainerStyle,
263
]}
···
346
a.pt_md,
347
{
348
paddingBottom: platform({
349
+
ios: tokens.space.md + bottom + (IS_LIQUID_GLASS ? top : 0),
350
android: tokens.space.md + bottom + top,
351
}),
352
},
+2
-2
src/components/Dialog/sheet-wrapper.ts
+2
-2
src/components/Dialog/sheet-wrapper.ts
···
1
import {useCallback} from 'react'
2
import {SystemBars} from 'react-native-edge-to-edge'
3
4
-
import {IS_IOS} from '#/env'
5
6
/**
7
* If we're calling a system API like the image picker that opens a sheet
···
9
*/
10
export function useSheetWrapper() {
11
return useCallback(async <T>(promise: Promise<T>): Promise<T> => {
12
-
if (IS_IOS) {
13
const entry = SystemBars.pushStackEntry({
14
style: {
15
statusBar: 'light',
···
1
import {useCallback} from 'react'
2
import {SystemBars} from 'react-native-edge-to-edge'
3
4
+
import {IS_IOS, IS_LIQUID_GLASS} from '#/env'
5
6
/**
7
* If we're calling a system API like the image picker that opens a sheet
···
9
*/
10
export function useSheetWrapper() {
11
return useCallback(async <T>(promise: Promise<T>): Promise<T> => {
12
+
if (IS_IOS && !IS_LIQUID_GLASS) {
13
const entry = SystemBars.pushStackEntry({
14
style: {
15
statusBar: 'light',
+4
-2
src/components/Menu/index.tsx
+4
-2
src/components/Menu/index.tsx
···
273
a.align_center,
274
a.gap_sm,
275
a.px_md,
276
+
a.rounded_lg,
277
+
a.curve_continuous,
278
a.border,
279
t.atoms.bg_contrast_25,
280
t.atoms.border_contrast_low,
···
312
return (
313
<View
314
style={[
315
+
a.rounded_lg,
316
+
a.curve_continuous,
317
a.overflow_hidden,
318
a.border,
319
t.atoms.border_contrast_low,
+4
-2
src/components/dialogs/LanguageSelectDialog.tsx
+4
-2
src/components/dialogs/LanguageSelectDialog.tsx
···
17
import * as Toggle from '#/components/forms/Toggle'
18
import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
19
import {Text} from '#/components/Typography'
20
-
import {IS_NATIVE, IS_WEB} from '#/env'
21
22
export function LanguageSelectDialog({
23
titleText,
···
52
return (
53
<Dialog.Outer
54
control={control}
55
-
nativeOptions={{minHeight: height - insets.top}}>
56
<Dialog.Handle />
57
<ErrorBoundary renderError={renderErrorBoundary}>
58
<DialogInner
···
17
import * as Toggle from '#/components/forms/Toggle'
18
import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
19
import {Text} from '#/components/Typography'
20
+
import {IS_LIQUID_GLASS, IS_NATIVE, IS_WEB} from '#/env'
21
22
export function LanguageSelectDialog({
23
titleText,
···
52
return (
53
<Dialog.Outer
54
control={control}
55
+
nativeOptions={{
56
+
minHeight: IS_LIQUID_GLASS ? height : height - insets.top,
57
+
}}>
58
<Dialog.Handle />
59
<ErrorBoundary renderError={renderErrorBoundary}>
60
<DialogInner
+8
src/env/index.ts
+8
src/env/index.ts
···
5
6
export * from '#/env/common'
7
8
+
// for some reason Platform.OS === 'ios' AND Platform.Version is undefined in our CI unit tests -sfn
9
+
const iOSMajorVersion =
10
+
Platform.OS === 'ios' && typeof Platform.Version === 'string'
11
+
? parseInt(Platform.Version.split('.')[0], 10)
12
+
: 0
13
+
14
/**
15
* The semver version of the app, specified in our `package.json`.file. On
16
* iOs/Android, the native build version is appended to the semver version, so
···
47
* Misc
48
*/
49
export const IS_HIGH_DPI: boolean = true
50
+
// ideally we'd use isLiquidGlassAvailable() from expo-glass-effect but checking iOS version is good enough for now
51
+
export const IS_LIQUID_GLASS: boolean = iOSMajorVersion >= 26
+1
src/env/index.web.ts
+1
src/env/index.web.ts
+4
-2
src/screens/SignupQueued.tsx
+4
-2
src/screens/SignupQueued.tsx
···
14
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
15
import {Loader} from '#/components/Loader'
16
import {P, Text} from '#/components/Typography'
17
-
import {IS_IOS, IS_WEB} from '#/env'
18
19
const COL_WIDTH = 400
20
···
107
animationType={native('slide')}
108
presentationStyle="formSheet"
109
style={[web(a.util_screen_outer)]}>
110
-
{IS_IOS && <SystemBars style={{statusBar: 'light'}} />}
111
<ScrollView
112
style={[a.flex_1, t.atoms.bg]}
113
contentContainerStyle={{borderWidth: 0}}
···
14
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
15
import {Loader} from '#/components/Loader'
16
import {P, Text} from '#/components/Typography'
17
+
import {IS_IOS, IS_LIQUID_GLASS, IS_WEB} from '#/env'
18
19
const COL_WIDTH = 400
20
···
107
animationType={native('slide')}
108
presentationStyle="formSheet"
109
style={[web(a.util_screen_outer)]}>
110
+
{IS_IOS && !IS_LIQUID_GLASS && (
111
+
<SystemBars style={{statusBar: 'light'}} />
112
+
)}
113
<ScrollView
114
style={[a.flex_1, t.atoms.bg]}
115
contentContainerStyle={{borderWidth: 0}}
+8
-10
src/view/com/composer/Composer.tsx
+8
-10
src/view/com/composer/Composer.tsx
···
133
import * as Toast from '#/components/Toast'
134
import {Text} from '#/components/Typography'
135
import {useAnalytics} from '#/analytics'
136
-
import {IS_ANDROID, IS_IOS, IS_NATIVE, IS_WEB} from '#/env'
137
import {BottomSheetPortalProvider} from '../../../../modules/bottom-sheet'
138
import {
139
draftToComposerPosts,
···
1522
<Animated.View
1523
style={topBarAnimatedStyle}
1524
layout={native(LinearTransition)}>
1525
-
<View style={styles.topbarInner}>
1526
<Button
1527
label={_(msg`Cancel`)}
1528
variant="ghost"
···
2138
return bottom * -1
2139
}
2140
2141
// iPhone SE
2142
if (top === 20) return 40
2143
2144
-
// all other iPhones
2145
return top + 10
2146
}
2147
···
2186
}
2187
2188
const styles = StyleSheet.create({
2189
-
topbarInner: {
2190
-
flexDirection: 'row',
2191
-
alignItems: 'center',
2192
-
paddingHorizontal: 8,
2193
-
height: 54,
2194
-
gap: 4,
2195
-
},
2196
postBtn: {
2197
borderRadius: 20,
2198
paddingHorizontal: 20,
···
133
import * as Toast from '#/components/Toast'
134
import {Text} from '#/components/Typography'
135
import {useAnalytics} from '#/analytics'
136
+
import {IS_ANDROID, IS_IOS, IS_LIQUID_GLASS, IS_NATIVE, IS_WEB} from '#/env'
137
import {BottomSheetPortalProvider} from '../../../../modules/bottom-sheet'
138
import {
139
draftToComposerPosts,
···
1522
<Animated.View
1523
style={topBarAnimatedStyle}
1524
layout={native(LinearTransition)}>
1525
+
<View style={[a.flex_row, a.align_center, a.gap_xs, a.p_lg, a.pb_md]}>
1526
<Button
1527
label={_(msg`Cancel`)}
1528
variant="ghost"
···
2138
return bottom * -1
2139
}
2140
2141
+
// they ditched the gap behaviour on 26
2142
+
if (IS_LIQUID_GLASS) {
2143
+
return top
2144
+
}
2145
+
2146
// iPhone SE
2147
if (top === 20) return 40
2148
2149
+
// all other iPhones on <26
2150
return top + 10
2151
}
2152
···
2191
}
2192
2193
const styles = StyleSheet.create({
2194
postBtn: {
2195
borderRadius: 20,
2196
paddingHorizontal: 20,
+4
-2
src/view/com/composer/GifAltText.tsx
+4
-2
src/view/com/composer/GifAltText.tsx
···
1
import {useState} from 'react'
2
-
import {TouchableOpacity, View} from 'react-native'
3
import {msg} from '@lingui/core/macro'
4
import {useLingui} from '@lingui/react'
5
import {Plural, Trans} from '@lingui/react/macro'
···
69
const {_} = useLingui()
70
const t = useTheme()
71
const [altTextDraft, setAltTextDraft] = useState(altText || vendorAltText)
72
return (
73
<>
74
<TouchableOpacity
···
108
control={control}
109
onClose={() => {
110
onSubmit(altTextDraft)
111
-
}}>
112
<Dialog.Handle />
113
<AltTextInner
114
vendorAltText={vendorAltText}
···
1
import {useState} from 'react'
2
+
import {TouchableOpacity, useWindowDimensions, View} from 'react-native'
3
import {msg} from '@lingui/core/macro'
4
import {useLingui} from '@lingui/react'
5
import {Plural, Trans} from '@lingui/react/macro'
···
69
const {_} = useLingui()
70
const t = useTheme()
71
const [altTextDraft, setAltTextDraft] = useState(altText || vendorAltText)
72
+
const {height: minHeight} = useWindowDimensions()
73
return (
74
<>
75
<TouchableOpacity
···
109
control={control}
110
onClose={() => {
111
onSubmit(altTextDraft)
112
+
}}
113
+
nativeOptions={{minHeight}}>
114
<Dialog.Handle />
115
<AltTextInner
116
vendorAltText={vendorAltText}
+5
-3
src/view/shell/Composer.ios.tsx
+5
-3
src/view/shell/Composer.ios.tsx
···
6
import {ComposePost, useComposerCancelRef} from '#/view/com/composer/Composer'
7
import {atoms as a, useTheme} from '#/alf'
8
import {SheetCompatProvider as TooltipSheetCompatProvider} from '#/components/Tooltip'
9
10
export function Composer({}: {winHeight: number}) {
11
const {setFullyExpandedCount} = useDialogStateControlContext()
···
32
visible={open}
33
presentationStyle="pageSheet"
34
animationType="slide"
35
-
onRequestClose={() => ref.current?.onPressCancel()}>
36
-
<View style={[t.atoms.bg, a.flex_1]}>
37
<TooltipSheetCompatProvider>
38
<ComposePost
39
cancelRef={ref}
···
45
text={state?.text}
46
imageUris={state?.imageUris}
47
videoUri={state?.videoUri}
48
-
openGallery={state?.openGallery}
49
/>
50
</TooltipSheetCompatProvider>
51
</View>
···
6
import {ComposePost, useComposerCancelRef} from '#/view/com/composer/Composer'
7
import {atoms as a, useTheme} from '#/alf'
8
import {SheetCompatProvider as TooltipSheetCompatProvider} from '#/components/Tooltip'
9
+
import {IS_LIQUID_GLASS} from '#/env'
10
11
export function Composer({}: {winHeight: number}) {
12
const {setFullyExpandedCount} = useDialogStateControlContext()
···
33
visible={open}
34
presentationStyle="pageSheet"
35
animationType="slide"
36
+
onRequestClose={() => ref.current?.onPressCancel()}
37
+
backdropColor="transparent"
38
+
style={[!IS_LIQUID_GLASS && a.rounded_sheet]}>
39
+
<View style={[a.flex_1, a.curve_continuous, t.atoms.bg]}>
40
<TooltipSheetCompatProvider>
41
<ComposePost
42
cancelRef={ref}
···
48
text={state?.text}
49
imageUris={state?.imageUris}
50
videoUri={state?.videoUri}
51
/>
52
</TooltipSheetCompatProvider>
53
</View>
+3
-2
src/view/shell/index.tsx
+3
-2
src/view/shell/index.tsx
···
43
import {NoAccessScreen} from '#/ageAssurance/components/NoAccessScreen'
44
import {RedirectOverlay} from '#/ageAssurance/components/RedirectOverlay'
45
import {PassiveAnalytics} from '#/analytics/PassiveAnalytics'
46
-
import {IS_ANDROID, IS_IOS} from '#/env'
47
import {RoutesContainer, TabsNavigator} from '#/Navigation'
48
import {BottomSheetOutlet} from '../../../modules/bottom-sheet'
49
import {updateActiveViewAsync} from '../../../modules/expo-bluesky-swiss-army/src/VisibilityView'
···
223
<SystemBars
224
style={{
225
statusBar:
226
-
t.name !== 'light' || (IS_IOS && fullyExpandedCount > 0)
227
? 'light'
228
: 'dark',
229
navigationBar: t.name !== 'light' ? 'light' : 'dark',
···
43
import {NoAccessScreen} from '#/ageAssurance/components/NoAccessScreen'
44
import {RedirectOverlay} from '#/ageAssurance/components/RedirectOverlay'
45
import {PassiveAnalytics} from '#/analytics/PassiveAnalytics'
46
+
import {IS_ANDROID, IS_IOS, IS_LIQUID_GLASS} from '#/env'
47
import {RoutesContainer, TabsNavigator} from '#/Navigation'
48
import {BottomSheetOutlet} from '../../../modules/bottom-sheet'
49
import {updateActiveViewAsync} from '../../../modules/expo-bluesky-swiss-army/src/VisibilityView'
···
223
<SystemBars
224
style={{
225
statusBar:
226
+
t.name !== 'light' ||
227
+
(IS_IOS && !IS_LIQUID_GLASS && fullyExpandedCount > 0)
228
? 'light'
229
: 'dark',
230
navigationBar: t.name !== 'light' ? 'light' : 'dark',