Mi objetivo es presentar un botón que muestre una imagen de estado activado al presionarlo y, cuando se deje, muestre inmediatamente una imagen de estado desactivado. Al tocar por primera vez, el botón muestra la imagen de estado apagado y en todos los toques siguientes muestra la imagen de estado encendido como se esperaba. ¿Por qué muestra la imagen de estado apagado en el primer toque?

Imágenes:

 const button_f_on = require('./app_ressources/button_on.png'); const button_f_off = require('./app_ressources/button_off.png');

Pestaña con componente Pressable:

 const testTab = ({ navigation, route }) => { return ( <View style={styles.container_random}> <Pressable style={styles.button_f} onPress={play}> {({ pressed }) => ( <Image style={styles.button_f_image} resizeMode='contain' source={pressed ? button_f_on : button_f_off}></Image> )} </Pressable> </View> ); };

Estilos:

 container_random: { backgroundColor:"#fcc938", alignContent:'center', justifyContent:'center', flex:6, flexDirection:'column' }, button_f: { alignItems:'center', justifyContent:'center', alignSelf:'center', resizeMode:'contain', borderRadius:180, padding:0, flex:3 }, button_f_image: { width: '90%', height: undefined, aspectRatio: 1 }

Editar: incorporé useState, ¡fue agradable aprender! Pero al final fue un problema de renderizado causado por las dimensiones de las imágenes utilizadas. Los reduje un 50% (de 3500px * 3500px a 1750px * 1750px) y el problema desapareció.

 const testTab = ({ navigation, route }) => { const [pressed , setPressed] = useState(false); let d = pressed ? [styles.button_f_image, styles.hidden] : styles.button_f_image let d2 = pressed ? styles.button_f_image : [styles.button_f_image, styles.hidden] return ( <View style={styles.container_random}> <Pressable style={styles.button_f} onPressIn={() => { play(); setPressed(!pressed);}} onPressOut={() => { setPressed(!pressed);}} > <Image style={[d]} resizeMode='contain' source={button_f_off}></Image> <Image style={[d2]} resizeMode='contain' source={button_f_on}></Image> </Pressable> </View> ); };