From 7d04e42bb53c100bde9faed42b7ae688c05daf69 Mon Sep 17 00:00:00 2001
From: chahinebrini <chahinebrini@gmail.com>
Date: Mon, 11 May 2026 04:38:26 +0200
Subject: [PATCH] =?UTF-8?q?fix(devices):=20Mac=20CTA-button=20invisible=20?=
 =?UTF-8?q?=E2=80=94=20Pressable=20style-fn=20=E2=86=92=20TouchableOpacity?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 apps/rebreak-native/app/devices.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

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