fix(feed): compose footer above keyboard, tab spacing, FAB position
- Composer footer (attach / counter / fee bar) now rides with the keyboard on both platforms: KeyboardAvoidingView behavior is "padding" on iOS and "height" on Android. Previously behavior was undefined on Android, and the global softwareKeyboardLayoutMode:"pan" setting lifted the whole screen — leaving the footer hidden below the keyboard. - Feed tab strip (Подписки / Для вас / В тренде) had zero horizontal breathing room — three equal-width Pressables flush to the edges. Added 12px outer paddingHorizontal + 10px gap + slightly bigger paddingVertical. The active indicator is now 32px wide (was 48) so it sits under the label instead of underlining two words. - Floating compose FAB pinned to the right edge with a 14px inset (was 18). Vertical offset tightened from +70 to +62 above the safe-area inset — closer to the NavBar top edge while still clear of the icons. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -198,7 +198,7 @@ export default function ComposeScreen() {
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={{ flex: 1, backgroundColor: '#000000' }}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
>
|
||||
{/* Header */}
|
||||
<View
|
||||
|
||||
@@ -148,10 +148,15 @@ export default function FeedScreen() {
|
||||
<View style={{ flex: 1, backgroundColor: '#000000', paddingTop: insets.top }}>
|
||||
<TabHeader title="Лента" />
|
||||
|
||||
{/* Tab strip */}
|
||||
{/* Tab strip — больше воздуха между табами. Горизонтальный padding
|
||||
на контейнере + gap между Pressable'ами делает табы "breathable",
|
||||
индикатор активной вкладки — тонкая полоска только под текстом,
|
||||
шириной примерно с лейбл. */}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
paddingHorizontal: 12,
|
||||
gap: 10,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#141414',
|
||||
}}
|
||||
@@ -163,7 +168,7 @@ export default function FeedScreen() {
|
||||
style={({ pressed }) => ({
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
paddingVertical: 14,
|
||||
paddingVertical: 16,
|
||||
backgroundColor: pressed ? '#0a0a0a' : 'transparent',
|
||||
})}
|
||||
>
|
||||
@@ -172,6 +177,7 @@ export default function FeedScreen() {
|
||||
color: tab === key ? '#ffffff' : '#6a6a6a',
|
||||
fontWeight: tab === key ? '700' : '500',
|
||||
fontSize: 14,
|
||||
letterSpacing: -0.1,
|
||||
}}
|
||||
>
|
||||
{TAB_LABELS[key]}
|
||||
@@ -179,8 +185,8 @@ export default function FeedScreen() {
|
||||
{tab === key && (
|
||||
<View
|
||||
style={{
|
||||
marginTop: 8,
|
||||
width: 48,
|
||||
marginTop: 10,
|
||||
width: 32,
|
||||
height: 3,
|
||||
borderRadius: 1.5,
|
||||
backgroundColor: '#1d9bf0',
|
||||
@@ -235,13 +241,16 @@ export default function FeedScreen() {
|
||||
contentContainerStyle={posts.length === 0 ? { flexGrow: 1 } : undefined}
|
||||
/>
|
||||
|
||||
{/* Floating compose button */}
|
||||
{/* Floating compose button — pinned to the bottom-right corner
|
||||
with 14px side inset. Vertical offset clears the 5-icon NavBar
|
||||
(which lives below this view in the same layer) by sitting
|
||||
~14px above its top edge. */}
|
||||
<Pressable
|
||||
onPress={() => router.push('/(app)/compose' as never)}
|
||||
style={({ pressed }) => ({
|
||||
position: 'absolute',
|
||||
right: 18,
|
||||
bottom: Math.max(insets.bottom, 12) + 70, // clear the NavBar
|
||||
right: 14,
|
||||
bottom: Math.max(insets.bottom, 0) + 62,
|
||||
width: 56, height: 56,
|
||||
borderRadius: 28,
|
||||
backgroundColor: pressed ? '#1a8cd8' : '#1d9bf0',
|
||||
|
||||
Reference in New Issue
Block a user