diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index db4a3233..e10e801e 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -32,6 +32,7 @@ import {SelectedPhotos} from './photos/SelectedPhotos'
import {usePalette} from 'lib/hooks/usePalette'
import QuoteEmbed from '../util/PostEmbeds/QuoteEmbed'
import {useExternalLinkFetch} from './useExternalLinkFetch'
+import {isDesktopWeb} from 'platform/detection'
const MAX_TEXT_LENGTH = 256
@@ -188,10 +189,6 @@ export const ComposePost = observer(function ComposePost({
const canPost = text.length <= MAX_TEXT_LENGTH
- const selectTextInputLayout =
- selectedPhotos.length !== 0
- ? styles.textInputLayoutWithPhoto
- : styles.textInputLayoutWithoutPhoto
const selectTextInputPlaceholder = replyTo
? 'Write your reply'
: selectedPhotos.length !== 0
@@ -253,7 +250,9 @@ export const ComposePost = observer(function ComposePost({
{error}
)}
-
+
{replyTo ? (
@@ -268,12 +267,7 @@ export const ComposePost = observer(function ComposePost({
) : undefined}
-
+
+
- >
+
)
},
)
const styles = StyleSheet.create({
+ container: {
+ width: '100%',
+ },
textInput: {
flex: 1,
+ minHeight: 80,
padding: 5,
+ paddingBottom: 20,
marginLeft: 8,
alignSelf: 'flex-start',
},
diff --git a/src/view/com/composer/text-input/mobile/Autocomplete.tsx b/src/view/com/composer/text-input/mobile/Autocomplete.tsx
index 424a8629..293c89da 100644
--- a/src/view/com/composer/text-input/mobile/Autocomplete.tsx
+++ b/src/view/com/composer/text-input/mobile/Autocomplete.tsx
@@ -1,10 +1,5 @@
import React, {useEffect} from 'react'
-import {
- Animated,
- TouchableOpacity,
- StyleSheet,
- useWindowDimensions,
-} from 'react-native'
+import {Animated, TouchableOpacity, StyleSheet, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {UserAutocompleteViewModel} from 'state/models/user-autocomplete-view'
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
@@ -20,52 +15,72 @@ export const Autocomplete = observer(
onSelect: (item: string) => void
}) => {
const pal = usePalette('default')
- const winDim = useWindowDimensions()
const positionInterp = useAnimatedValue(0)
useEffect(() => {
Animated.timing(positionInterp, {
toValue: view.isActive ? 1 : 0,
duration: 200,
- useNativeDriver: false,
+ useNativeDriver: true,
}).start()
}, [positionInterp, view.isActive])
const topAnimStyle = {
- top: positionInterp.interpolate({
- inputRange: [0, 1],
- outputRange: [winDim.height, winDim.height / 4],
- }),
+ transform: [
+ {
+ translateY: positionInterp.interpolate({
+ inputRange: [0, 1],
+ outputRange: [200, 0],
+ }),
+ },
+ ],
}
return (
-
- {view.suggestions.map(item => (
- onSelect(item.handle)}>
-
- {item.displayName || item.handle}
-
- @{item.handle}
+
+
+ {view.suggestions.slice(0, 5).map(item => (
+ onSelect(item.handle)}>
+
+ {item.displayName || item.handle}
+
+ @{item.handle}
+
-
-
- ))}
-
+
+ ))}
+
+
)
},
)
const styles = StyleSheet.create({
- outer: {
+ container: {
+ display: 'none',
+ height: 250,
+ },
+ animatedContainer: {
+ display: 'none',
position: 'absolute',
- left: 0,
+ left: -64,
right: 0,
- bottom: 0,
+ top: 0,
borderTopWidth: 1,
},
+ visible: {
+ display: 'flex',
+ },
item: {
borderBottomWidth: 1,
paddingVertical: 16,