forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix composer jumpiness on native (#5476)
authored by
Eric Bailey
and committed by
GitHub
2429d5d1
f231da0c
+20
-30
+20
-30
src/view/com/composer/text-input/TextInput.tsx
+20
-30
src/view/com/composer/text-input/TextInput.tsx
···
8
8
} from 'react'
9
9
import {
10
10
NativeSyntheticEvent,
11
-
StyleSheet,
11
+
Text as RNText,
12
12
TextInput as RNTextInput,
13
13
TextInputSelectionChangeEventData,
14
14
View,
···
20
20
} from '@mattermost/react-native-paste-input'
21
21
22
22
import {POST_IMG_MAX} from '#/lib/constants'
23
-
import {usePalette} from '#/lib/hooks/usePalette'
24
23
import {downloadAndResize} from '#/lib/media/manip'
25
24
import {isUriImage} from '#/lib/media/util'
26
25
import {cleanError} from '#/lib/strings/errors'
27
26
import {getMentionAt, insertMentionAt} from '#/lib/strings/mention-manip'
28
27
import {useTheme} from '#/lib/ThemeContext'
29
-
import {isAndroid} from '#/platform/detection'
28
+
import {isAndroid, isNative} from '#/platform/detection'
30
29
import {
31
30
LinkFacetMatch,
32
31
suggestLinkCardUri,
33
32
} from '#/view/com/composer/text-input/text-input-util'
34
-
import {Text} from '#/view/com/util/text/Text'
35
33
import {atoms as a, useAlf} from '#/alf'
36
34
import {normalizeTextStyles} from '#/components/Typography'
37
35
import {Autocomplete} from './mobile/Autocomplete'
···
70
68
ref,
71
69
) {
72
70
const {theme: t, fonts} = useAlf()
73
-
const pal = usePalette('default')
74
71
const textInput = useRef<PasteInputRef>(null)
75
72
const textInputSelection = useRef<Selection>({start: 0, end: 0})
76
73
const theme = useTheme()
···
193
190
},
194
191
)
195
192
196
-
/*
197
-
* `PasteInput` appears to prefer no `lineHeight`
193
+
/**
194
+
* PasteInput doesn't like `lineHeight`, results in jumpiness
198
195
*/
199
-
style.lineHeight = undefined
196
+
if (isNative) {
197
+
style.lineHeight = undefined
198
+
}
200
199
201
200
/*
202
201
* Android impl of `PasteInput` doesn't support the array syntax for `fontVariant`
···
215
214
216
215
return Array.from(richtext.segments()).map(segment => {
217
216
return (
218
-
<Text
219
-
emoji
217
+
<RNText
220
218
key={i++}
221
-
style={[inputTextStyle, segment.facet ? pal.link : pal.text]}>
219
+
style={[
220
+
inputTextStyle,
221
+
{
222
+
color: segment.facet ? t.palette.primary_500 : t.atoms.text.color,
223
+
marginTop: -1,
224
+
},
225
+
]}>
222
226
{segment.text}
223
-
</Text>
227
+
</RNText>
224
228
)
225
229
})
226
-
}, [richtext, pal.link, pal.text, inputTextStyle])
230
+
}, [t, richtext, inputTextStyle])
227
231
228
232
return (
229
-
<View style={styles.container}>
233
+
<View style={[a.flex_1, a.pl_md, a.pb_2xl]}>
230
234
<PasteInput
231
235
testID="composerTextInput"
232
236
ref={textInput}
···
234
238
onPaste={onPaste}
235
239
onSelectionChange={onSelectionChange}
236
240
placeholder={placeholder}
237
-
placeholderTextColor={pal.colors.textLight}
241
+
placeholderTextColor={t.atoms.text_contrast_medium.color}
238
242
keyboardAppearance={theme.colorScheme}
239
243
autoFocus={true}
240
244
allowFontScaling
241
245
multiline
242
246
scrollEnabled={false}
243
247
numberOfLines={4}
244
-
style={[inputTextStyle, styles.textInput, {textAlignVertical: 'top'}]}
248
+
style={[inputTextStyle, a.w_full, {textAlignVertical: 'top'}]}
245
249
{...props}>
246
250
{textDecorated}
247
251
</PasteInput>
···
252
256
</View>
253
257
)
254
258
})
255
-
256
-
const styles = StyleSheet.create({
257
-
container: {
258
-
flex: 1,
259
-
},
260
-
textInput: {
261
-
flex: 1,
262
-
width: '100%',
263
-
padding: 5,
264
-
paddingBottom: 20,
265
-
marginLeft: 8,
266
-
alignSelf: 'flex-start',
267
-
},
268
-
})