From 060ac6c2c9b376df4bb852ede374b1640d3064d9 Mon Sep 17 00:00:00 2001
From: vsecoder <vsecoder@git.vsecoder.vodka>
Date: Sat, 18 Apr 2026 23:22:11 +0300
Subject: [PATCH] fix(contact): fee-tier pills lose background via Pressable
 style-fn

Same Pressable dynamic-style bug that keeps reappearing: on some RN
builds the style function is re-evaluated during render in a way that
drops properties (previously hit on the FAB, then on PostCard, now on
the anti-spam fee selector). User saw three bare text labels on black
stuck together instead of distinct white/grey pills.

Fix: move visual properties (backgroundColor, borderWidth, padding,
border) to a static inner <View>. Pressable keeps only the opacity-
based press feedback which is stable because no other properties need
to flip on press. Functionally identical UX, layout guaranteed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 client-app/app/(app)/new-contact.tsx | 49 ++++++++++++++++++----------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/client-app/app/(app)/new-contact.tsx b/client-app/app/(app)/new-contact.tsx
index 05a8b40..2526804 100644
--- a/client-app/app/(app)/new-contact.tsx
+++ b/client-app/app/(app)/new-contact.tsx
@@ -252,6 +252,14 @@ export default function NewContactScreen() {
             <Text style={{ color: '#8b8b8b', fontSize: 12, marginTop: 14, marginBottom: 6 }}>
               Плата за запрос (уходит получателю, anti-spam)
             </Text>
+            {/* Fee-tier pills.
+                Layout (background, border, padding) lives on a static
+                inner View — Pressable's dynamic style-function has been
+                observed to drop backgroundColor between renders on
+                some RN/Android versions, which is what made these
+                chips look like three bare text labels on black
+                instead of distinct pills. Press feedback via opacity
+                on the Pressable itself, which is stable. */}
             <View style={{ flexDirection: 'row', gap: 8 }}>
               {FEE_TIERS.map(t => {
                 const active = fee === t.value;
@@ -261,25 +269,32 @@ export default function NewContactScreen() {
                     onPress={() => setFee(t.value)}
                     style={({ pressed }) => ({
                       flex: 1,
-                      alignItems: 'center',
-                      paddingVertical: 10,
-                      borderRadius: 10,
-                      backgroundColor: active ? '#ffffff' : pressed ? '#1a1a1a' : '#111111',
-                      borderWidth: 1, borderColor: active ? '#ffffff' : '#1f1f1f',
+                      opacity: pressed ? 0.7 : 1,
                     })}
                   >
-                    <Text style={{
-                      color: active ? '#000' : '#ffffff',
-                      fontWeight: '700', fontSize: 13,
-                    }}>
-                      {t.label}
-                    </Text>
-                    <Text style={{
-                      color: active ? '#333' : '#8b8b8b',
-                      fontSize: 11, marginTop: 2,
-                    }}>
-                      {formatAmount(t.value)}
-                    </Text>
+                    <View
+                      style={{
+                        alignItems: 'center',
+                        paddingVertical: 10,
+                        borderRadius: 10,
+                        backgroundColor: active ? '#ffffff' : '#111111',
+                        borderWidth: 1,
+                        borderColor: active ? '#ffffff' : '#1f1f1f',
+                      }}
+                    >
+                      <Text style={{
+                        color: active ? '#000' : '#ffffff',
+                        fontWeight: '700', fontSize: 13,
+                      }}>
+                        {t.label}
+                      </Text>
+                      <Text style={{
+                        color: active ? '#333' : '#8b8b8b',
+                        fontSize: 11, marginTop: 2,
+                      }}>
+                        {formatAmount(t.value)}
+                      </Text>
+                    </View>
                   </Pressable>
                 );
               })}