I've tried to replicate this https://codepen.io/iamdejean/pen/wvwjjer. But I can't do like that. I've tried like the below:
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 can do what you're looking for, although it doesnt have support for the 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>
)
}
Make sure to run on android/ios as it doesnt work on the web