Wrapper de degradado de desvanecimiento en React Native

rn-fade-wrapper es un componente simple y de alto rendimiento para React Native que añade degradados de desvanecimiento suaves y personalizables a los bordes de cualquier contenido. Perfecto para mejorar la experiencia de usuario en contenedores desplazables, listas, carruseles, modales o cualquier vista con contenido desbordante.

✨ Características

• ⚡ Renderizado nativo para iOS y Android
• 🔁 Soporta direcciones de degradado vertical y horizontal
• 🎨 Tamaño y color de desvanecimiento totalmente personalizables (por lado o uniforme)
• ↕️ Modo opcional inward para desvanecer hacia el contenido en lugar de hacia afuera
• 🧩 API simple: wrapper para usar directamente con props intuitivas
• 💪 Gran rendimiento con bajo consumo — ideal para vistas desplazables y animaciones

📦 Instalación

yarn add rn-fade-wrapper

or

npm install rn-fade-wrapper

Expo

Esta biblioteca funciona en Expo (con expo prebuild) sin configuración adicional.

📱 Soporte de Plataforma

| Plataforma | Arquitectura Antigua | Fabric | |------------|---------------------|--------| | iOS | ✅ | ✅ | | Android | ✅ | ✅ |

🚀 Inicio Rápido

import { FadeWrapper } from 'rn-fade-wrapper';
const MyComponent = () => {
  return (
    
      
        Fading edges example
      
    
  );
};

🧩 Props

| Prop | Tipo | Por defecto | Descripción | |--------------|----------------------------|---------------------------|-------------| | color | string | "#ffffff" | Color del desvanecimiento (puede ser cualquier cadena de color válida) | | size | number | 20 | Tamaño uniforme del desvanecimiento en puntos | | style | ViewStyle | { zIndex: 2 } | Estilo personalizado aplicado a la vista contenedora | | inward | boolean | false | Hace que el degradado se desvanezca hacia adentro (hacia el centro) en lugar de hacia afuera | | sizes | { top?: number, right?: number, bottom?: number, left?: number } | undefined | Tamaños específicos de desvanecimiento por borde (sobrescribe size y orientation) | | orientation| 'horizontal' \| 'vertical' | 'vertical' | Preajuste para la dirección: aplica size a arriba/abajo o izquierda/derecha | | children | React.ReactNode | — | Tu contenido envuelto |

Nota: sizes tiene prioridad sobre size y orientation.

🎛 Ejemplos

🎯 Lados personalizados + desvanecimiento hacia adentro:

📜 Desvanecimiento al desplazarse horizontalmente:

  
    {/ content /}
  

🛠 Bajo el Capó

• iOS: Usa CAGradientLayer dentro de UIView nativo
• Android: Dibuja LinearGradient en un ViewGroup personalizado usando Canvas
• Maneja el diseño y vuelve a renderizar con lógica específica de la plataforma para consistencia

💡 Consejo de UX

Usa rn-fade-wrapper para indicar sutilmente el desbordamiento de contenido — especialmente en carruseles, vistas de desplazamiento y deslizadores horizontales. Los degradados ayudan a insinuar al usuario que hay más para desplazarse, mejorando la interacción.

📘 Licencia

MIT — libre para usar, mejorar y contribuir 🎉

--- Tranlated By Open Ai Tx | Last indexed: 2025-12-08 ---