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>
This commit is contained in:
@@ -252,6 +252,14 @@ export default function NewContactScreen() {
|
|||||||
<Text style={{ color: '#8b8b8b', fontSize: 12, marginTop: 14, marginBottom: 6 }}>
|
<Text style={{ color: '#8b8b8b', fontSize: 12, marginTop: 14, marginBottom: 6 }}>
|
||||||
Плата за запрос (уходит получателю, anti-spam)
|
Плата за запрос (уходит получателю, anti-spam)
|
||||||
</Text>
|
</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 }}>
|
<View style={{ flexDirection: 'row', gap: 8 }}>
|
||||||
{FEE_TIERS.map(t => {
|
{FEE_TIERS.map(t => {
|
||||||
const active = fee === t.value;
|
const active = fee === t.value;
|
||||||
@@ -261,25 +269,32 @@ export default function NewContactScreen() {
|
|||||||
onPress={() => setFee(t.value)}
|
onPress={() => setFee(t.value)}
|
||||||
style={({ pressed }) => ({
|
style={({ pressed }) => ({
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignItems: 'center',
|
opacity: pressed ? 0.7 : 1,
|
||||||
paddingVertical: 10,
|
|
||||||
borderRadius: 10,
|
|
||||||
backgroundColor: active ? '#ffffff' : pressed ? '#1a1a1a' : '#111111',
|
|
||||||
borderWidth: 1, borderColor: active ? '#ffffff' : '#1f1f1f',
|
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<Text style={{
|
<View
|
||||||
color: active ? '#000' : '#ffffff',
|
style={{
|
||||||
fontWeight: '700', fontSize: 13,
|
alignItems: 'center',
|
||||||
}}>
|
paddingVertical: 10,
|
||||||
{t.label}
|
borderRadius: 10,
|
||||||
</Text>
|
backgroundColor: active ? '#ffffff' : '#111111',
|
||||||
<Text style={{
|
borderWidth: 1,
|
||||||
color: active ? '#333' : '#8b8b8b',
|
borderColor: active ? '#ffffff' : '#1f1f1f',
|
||||||
fontSize: 11, marginTop: 2,
|
}}
|
||||||
}}>
|
>
|
||||||
{formatAmount(t.value)}
|
<Text style={{
|
||||||
</Text>
|
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>
|
</Pressable>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|||||||
Reference in New Issue
Block a user