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:
vsecoder
2026-04-18 20:03:15 +03:00
parent 5b64ef2560
commit 0ff2760a11
2 changed files with 17 additions and 8 deletions

View File

@@ -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',