He intentado replicar este https://codepen.io/iamdejean/pen/wvwjjer . Pero no puedo hacer eso. He intentado como el siguiente:
import React from 'react' import { ImageBackground, StyleSheet, Text, View, Image } from 'react-native'; import { TouchableOpacity } from 'react-native-gesture-handler' export const CustomGifContainer = ({onPress, text, image}) => { return ( <View style={GifContainerStyles.container}> <TouchableOpacity onPress={onPress} style={GifContainerStyles.Gifcontainer} activeOpacity={ 0.5} > <ImageBackground source={image} style={GifContainerStyles.GifBackground}> <View style={GifContainerStyles.Gifoverlay}> <Text style={GifContainerStyles.text}>{text}</Text> </View> </ImageBackground> </TouchableOpacity> </View> ) }react-native-masked-view puede hacer lo que está buscando, aunque no tiene soporte para la web.
export default function CustomGifContainer ({onPress, text, imgSource,imgDimensions={}}){ const {width=600,height=600} = imgDimensions return ( <TouchableOpacity style={{backgroundColor:'rgba(0,0,0,.25)',margin:5}} onPress={onPress} > <MaskedView style={{padding:5}} maskElement={ /*maskElement needs transparent background*/ <View style={{backgroundColor:'transparent'}}> <View style={styles.textWrapper}> <Text style={styles.text}>{text}</Text> </View> </View> } > <Image source={imgSource} style={{width,height,alignSelf:'center'}} resizeMode="cover" /> </MaskedView> </TouchableOpacity> ) }Asegúrese de ejecutar en Android/ios ya que no funciona en la web