fix(devices): Mac CTA-button invisible — Pressable style-fn → TouchableOpacity

Memory feedback_known_ui_layout_bugs.md Pattern 5: Pressable with
style={({pressed}) => ({...})} is layout-poison in some RN-render-paths,
button collapses to 0-height and renders invisible. Windows-button right
below worked because it uses static style={{...}}.

TouchableOpacity gets same press-feedback via activeOpacity prop.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
chahinebrini 2026-05-11 04:38:26 +02:00
parent eccc04b1e3
commit 7d04e42bb5

View File

@ -5,6 +5,7 @@ import {
Pressable, Pressable,
ScrollView, ScrollView,
Text, Text,
TouchableOpacity,
View, View,
} from 'react-native'; } from 'react-native';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@ -515,9 +516,10 @@ export default function DevicesScreen() {
{/* CTA or Upgrade */} {/* CTA or Upgrade */}
{isLegend ? ( {isLegend ? (
<View style={{ gap: 10 }}> <View style={{ gap: 10 }}>
<Pressable <TouchableOpacity
onPress={() => setAddMacVisible(true)} onPress={() => setAddMacVisible(true)}
style={({ pressed }) => ({ activeOpacity={0.7}
style={{
backgroundColor: colors.brandOrange, backgroundColor: colors.brandOrange,
borderRadius: 14, borderRadius: 14,
paddingVertical: 16, paddingVertical: 16,
@ -525,14 +527,13 @@ export default function DevicesScreen() {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
gap: 8, gap: 8,
opacity: pressed ? 0.7 : 1, }}
})}
> >
<Ionicons name="add-circle-outline" size={20} color="#fff" /> <Ionicons name="add-circle-outline" size={20} color="#fff" />
<Text style={{ fontSize: 16, color: '#fff', fontFamily: 'Nunito_700Bold' }}> <Text style={{ fontSize: 16, color: '#fff', fontFamily: 'Nunito_700Bold' }}>
{t('devices.add_mac')} {t('devices.add_mac')}
</Text> </Text>
</Pressable> </TouchableOpacity>
<Pressable <Pressable
disabled disabled