nasso.dev
my fork of the bluesky client
android scroll performance fixes pt. 1 (#6196)
hailey.at
+25
-28
src/alf/index.tsx
+25
-28
src/alf/index.tsx
···
103
103
})
104
104
}, [])
105
105
106
-
return (
107
-
<Context.Provider
108
-
value={React.useMemo<Alf>(
109
-
() => ({
110
-
themes,
111
-
themeName: themeName,
112
-
theme: themes[themeName],
113
-
fonts: {
114
-
scale: fontScale,
115
-
scaleMultiplier: fontScaleMultiplier,
116
-
family: fontFamily,
117
-
setFontScale: setFontScaleAndPersist,
118
-
setFontFamily: setFontFamilyAndPersist,
119
-
},
120
-
flags: {},
121
-
}),
122
-
[
123
-
themeName,
124
-
themes,
125
-
fontScale,
126
-
setFontScaleAndPersist,
127
-
fontFamily,
128
-
setFontFamilyAndPersist,
129
-
fontScaleMultiplier,
130
-
],
131
-
)}>
132
-
{children}
133
-
</Context.Provider>
106
+
const value = React.useMemo<Alf>(
107
+
() => ({
108
+
themes,
109
+
themeName: themeName,
110
+
theme: themes[themeName],
111
+
fonts: {
112
+
scale: fontScale,
113
+
scaleMultiplier: fontScaleMultiplier,
114
+
family: fontFamily,
115
+
setFontScale: setFontScaleAndPersist,
116
+
setFontFamily: setFontFamilyAndPersist,
117
+
},
118
+
flags: {},
119
+
}),
120
+
[
121
+
themeName,
122
+
themes,
123
+
fontScale,
124
+
setFontScaleAndPersist,
125
+
fontFamily,
126
+
setFontFamilyAndPersist,
127
+
fontScaleMultiplier,
128
+
],
134
129
)
130
+
131
+
return <Context.Provider value={value}>{children}</Context.Provider>
135
132
}
136
133
137
134
export function useAlf() {
+33
-34
src/view/com/util/text/Text.tsx
+33
-34
src/view/com/util/text/Text.tsx
···
5
5
import {lh, s} from '#/lib/styles'
6
6
import {TypographyVariant, useTheme} from '#/lib/ThemeContext'
7
7
import {logger} from '#/logger'
8
-
import {isIOS} from '#/platform/detection'
8
+
import {isIOS, isWeb} from '#/platform/detection'
9
9
import {applyFonts, useAlf} from '#/alf'
10
10
import {
11
11
childHasEmoji,
···
44
44
...props
45
45
}: React.PropsWithChildren<CustomTextProps>) {
46
46
const theme = useTheme()
47
-
const typography = theme.typography[type]
48
-
const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined
49
47
const {fonts} = useAlf()
50
48
51
49
if (IS_DEV) {
···
60
58
}
61
59
}
62
60
63
-
if (selectable && isIOS) {
61
+
const textProps = React.useMemo(() => {
62
+
const typography = theme.typography[type]
63
+
const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined
64
+
64
65
const flattened = StyleSheet.flatten([
65
66
s.black,
66
67
typography,
···
74
75
// @ts-ignore
75
76
if (flattened.fontSize) {
76
77
// @ts-ignore
77
-
flattened.fontSize = flattened.fontSize * fonts.scaleMultiplier
78
+
flattened.fontSize = Math.round(
79
+
// @ts-ignore
80
+
flattened.fontSize * fonts.scaleMultiplier,
81
+
)
78
82
}
79
83
80
-
const shared = {
81
-
uiTextView: true,
84
+
return {
85
+
uiTextView: selectable && isIOS,
82
86
selectable,
83
87
style: flattened,
88
+
dataSet: isWeb
89
+
? Object.assign({tooltip: title}, dataSet || {})
90
+
: undefined,
84
91
...props,
85
92
}
93
+
}, [
94
+
dataSet,
95
+
fonts.family,
96
+
fonts.scaleMultiplier,
97
+
lineHeight,
98
+
props,
99
+
selectable,
100
+
style,
101
+
theme,
102
+
title,
103
+
type,
104
+
])
86
105
106
+
if (selectable && isIOS) {
87
107
return (
88
-
<UITextView {...shared}>
89
-
{isIOS && emoji ? renderChildrenWithEmoji(children, shared) : children}
108
+
<UITextView {...textProps}>
109
+
{isIOS && emoji
110
+
? renderChildrenWithEmoji(children, textProps)
111
+
: children}
90
112
</UITextView>
91
113
)
92
114
}
93
115
94
-
const flattened = StyleSheet.flatten([
95
-
s.black,
96
-
typography,
97
-
lineHeightStyle,
98
-
style,
99
-
])
100
-
101
-
applyFonts(flattened, fonts.family)
102
-
103
-
// should always be defined on `typography`
104
-
// @ts-ignore
105
-
if (flattened.fontSize) {
106
-
// @ts-ignore
107
-
flattened.fontSize = flattened.fontSize * fonts.scaleMultiplier
108
-
}
109
-
110
-
const shared = {
111
-
selectable,
112
-
style: flattened,
113
-
dataSet: Object.assign({tooltip: title}, dataSet || {}),
114
-
...props,
115
-
}
116
-
117
116
return (
118
-
<RNText {...shared}>
119
-
{isIOS && emoji ? renderChildrenWithEmoji(children, shared) : children}
117
+
<RNText {...textProps}>
118
+
{isIOS && emoji ? renderChildrenWithEmoji(children, textProps) : children}
120
119
</RNText>
121
120
)
122
121
}