forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix to blurviews
+55
-18
+36
-3
src/view/com/util/BlurView.web.tsx
+36
-3
src/view/com/util/BlurView.web.tsx
···
1
-
import {View} from 'react-native'
1
+
import React from 'react'
2
+
import {StyleSheet, View, ViewProps} from 'react-native'
3
+
import {addStyle} from '../../lib/addStyle'
4
+
5
+
type BlurViewProps = ViewProps & {
6
+
blurType?: 'dark' | 'light'
7
+
blurAmount?: number
8
+
}
9
+
10
+
export const BlurView = ({
11
+
style,
12
+
blurType,
13
+
blurAmount,
14
+
...props
15
+
}: React.PropsWithChildren<BlurViewProps>) => {
16
+
// @ts-ignore using an RNW-specific attribute here -prf
17
+
style = addStyle(style, {backdropFilter: `blur(${blurAmount || 10}px`})
18
+
if (blurType === 'dark') {
19
+
style = addStyle(style, styles.dark)
20
+
} else {
21
+
style = addStyle(style, styles.light)
22
+
}
23
+
return <View style={style} {...props} />
24
+
}
2
25
3
-
// TODO can actually support this, see https://github.com/Kureev/react-native-blur/issues/417
4
-
export const BlurBiew = View
26
+
const styles = StyleSheet.create({
27
+
blur: {
28
+
// @ts-ignore using an RNW-specific attribute here -prf
29
+
backdropFilter: 'blur(5px)',
30
+
},
31
+
dark: {
32
+
backgroundColor: '#0008',
33
+
},
34
+
light: {
35
+
backgroundColor: '#fff8',
36
+
},
37
+
})
+3
-2
src/view/com/util/ViewHeader.tsx
+3
-2
src/view/com/util/ViewHeader.tsx
···
10
10
FontAwesomeIcon,
11
11
FontAwesomeIconStyle,
12
12
} from '@fortawesome/react-native-fontawesome'
13
+
import {CenteredView} from './Views'
13
14
import {UserAvatar} from './UserAvatar'
14
15
import {Text} from './text/Text'
15
16
import {MagnifyingGlassIcon} from '../../lib/icons'
···
49
50
canGoBack = store.nav.tab.canGoBack
50
51
}
51
52
return (
52
-
<View style={[styles.header, pal.view]}>
53
+
<CenteredView style={[styles.header, pal.view]}>
53
54
<TouchableOpacity
54
55
testID="viewHeaderBackOrMenuBtn"
55
56
onPress={canGoBack ? onPressBack : onPressMenu}
···
112
113
)}
113
114
</TouchableOpacity>
114
115
) : undefined}
115
-
</View>
116
+
</CenteredView>
116
117
)
117
118
})
118
119
+2
-1
src/view/com/util/ViewSelector.tsx
+2
-1
src/view/com/util/ViewSelector.tsx
···
1
1
import React, {useEffect, useState} from 'react'
2
-
import {FlatList, View} from 'react-native'
2
+
import {View} from 'react-native'
3
3
import {Selector} from './Selector'
4
4
import {HorzSwipe} from './gestures/HorzSwipe'
5
+
import {FlatList} from './Views'
5
6
import {useAnimatedValue} from '../../lib/hooks/useAnimatedValue'
6
7
import {OnScrollCb} from '../../lib/hooks/useOnMainScroll'
7
8
import {clamp} from '../../../lib/numbers'
+1
-11
src/view/com/util/Views.web.tsx
+1
-11
src/view/com/util/Views.web.tsx
···
19
19
ScrollView as RNScrollView,
20
20
ScrollViewProps,
21
21
StyleSheet,
22
-
StyleProp,
23
22
View,
24
23
ViewProps,
25
24
} from 'react-native'
25
+
import {addStyle} from '../../lib/addStyle'
26
26
27
27
export function CenteredView({
28
28
style,
···
48
48
return (
49
49
<RNScrollView contentContainerStyle={contentContainerStyle} {...props} />
50
50
)
51
-
}
52
-
53
-
function addStyle<T>(
54
-
base: StyleProp<T>,
55
-
addedStyle: StyleProp<T>,
56
-
): StyleProp<T> {
57
-
if (Array.isArray(base)) {
58
-
return base.concat([addedStyle])
59
-
}
60
-
return [base, addedStyle]
61
51
}
62
52
63
53
const styles = StyleSheet.create({
+11
src/view/lib/addStyle.ts
+11
src/view/lib/addStyle.ts
+2
-1
src/view/screens/Profile.tsx
+2
-1
src/view/screens/Profile.tsx
···
2
2
import {ActivityIndicator, StyleSheet, View} from 'react-native'
3
3
import {observer} from 'mobx-react-lite'
4
4
import {ViewSelector} from '../com/util/ViewSelector'
5
+
import {CenteredView} from '../com/util/Views'
5
6
import {ScreenParams} from '../routes'
6
7
import {ProfileUiModel, Sections} from '../../state/models/profile-ui'
7
8
import {useStores} from '../../state'
···
181
182
onEndReached={onEndReached}
182
183
/>
183
184
) : (
184
-
renderHeader()
185
+
<CenteredView>{renderHeader()}</CenteredView>
185
186
)}
186
187
<FAB icon="pen-nib" onPress={onPressCompose} />
187
188
</View>