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:
parent
eccc04b1e3
commit
7d04e42bb5
@ -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
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user