Evitar pulsar en una imagen transparente png usando Reat Native

Tiempo de lectura: 2 minutos

Este tutorial describe cómo permitir la interacción táctil con elementos detrás de un frame PNG que ocupa toda la pantalla pero tiene zonas transparentes. La solución utiliza la propiedad pointerEvents para garantizar que los eventos táctiles pasen a través de las áreas transparentes.

Crear un frame decorativo que:

Primero vamos a crear nuestro componente con una imagen superpuesta en este caso con un frame (es un png que ocupa toda la pantalla y representa un borde)

import React, { useRef } from 'react';
import { View, StyleSheet, TouchableOpacity, Text, ImageBackground, ScrollView } from 'react-native';

const App = () => {
  const frameImage = require('./assets/frame.png'); // Ruta al PNG del frame
  const scrollViewRef = useRef(null);

  return (
    <View style={styles.container}>
      <ImageBackground source={frameImage} style={styles.frame} resizeMode="cover" pointerEvents="none">
        <ScrollView 
          style={styles.scrollContainer} 
          ref={scrollViewRef} 
          keyboardShouldPersistTaps="handled"
          onContentSizeChange={() => scrollViewRef.current?.scrollToEnd({ animated: true })}>
          <View style={styles.content}>
            <Text style={styles.text}>¡Interacción debajo del frame!</Text>
            <TouchableOpacity style={styles.button} onPress={() => alert('¡Botón presionado!')}>
              <Text style={styles.buttonText}>Presióname</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
      </ImageBackground>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
  },
  frame: {
    flex: 1,
    position: 'absolute',
    width: '100%',
    height: '100%',
  },
  scrollContainer: {
    flex: 1,
  },
  content: {
    padding: 20,
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
    marginBottom: 20,
  },
  button: {
    backgroundColor: '#6200ee',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
  },
});

export default App;

1. ImageBackground:
   • Usamos ImageBackground para renderizar el frame PNG como una superposición.
   • La propiedad pointerEvents="none" asegura que el frame no intercepte los eventos táctiles, permitiendo que los elementos interactivos debajo sean accesibles.
2. ScrollView:
   • Contiene elementos interactivos como texto y botones.
   • La referencia ref y el método scrollToEnd aseguran que el contenido se desplace automáticamente al final si es necesario.
3. Botón Interactivo:
   • Usamos TouchableOpacity para crear un botón con un diseño sencillo.
   • La acción onPress demuestra la funcionalidad interactiva.

Configuración de los Assets

Asegúrate de tener un archivo PNG con bordes decorativos y un centro transparente en tu carpeta assets. Actualiza la ruta en require('./assets/frame.png') según tu estructura de proyecto.

Ahora podrás pulsar los botones sin interferir el frame en ellos.