my fork of the bluesky client

android scroll performance fixes pt. 1 (#6196)

authored by hailey.at and committed by

GitHub 89c93313 3aeee1e4

+58 -62
+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
··· 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 }