I'm Converting my expo app to react-native-web, I have an issue when I'm showing Image. by default react-native-web adding a class to Image with position:absolute
. I want to override that class, here is my code.
React-native Code
<View>
<Image
style={{width: '80%', height: '35%',position: 'relative'}}
source={require('../../assets/images/stn_logo.png')}
alt="Logo" title="Logo" border="0"
/>
</View>
converted code from chrome elements
<div class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010" style="height: 35%; position: relative; width: 80%;">
<div class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw" style="background-image: url("/static/media/stn_logo.153bbaf1.png");"></div>
<img alt="" draggable="false" src="/static/media/stn_logo.153bbaf1.png" class="css-accessibilityImage-9pa8cd">
</div>
Here you can see that My React css added to Parent div but on img
tag react-native-web added a class css-accessibilityImage-9pa8cd
, which CSS is below from chrome
.css-accessibilityImage-9pa8cd {
bottom: 0px;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
right: 0px;
top: 0px;
width: 100%;
z-index: -1;
}
I want to override the position to relative. I already set position:relative
to React-Native Image element.
can anyone help me to change the predefined CSS of React-native-web
I'd like to add, the
<img>
tag isn't meant to display the image. It just seems to be there for added accessibility and is invisible by design.The image is actually displayed using the
<div>
element directly above the<img>
element, and uses abackground-image
property withbackground-size:cover
. It's got a height and width of 100%, so it's getting it's size from the parent<div>
.The "true" issue is that the parent has no dimensions, so the child
<div>
that's supposed to be displaying the image has no dimensions. Here's the same two fixes as the other answer here, but with some added explanation as to why they work:<div>
, which in turn gives dimensions to the child<div>
displaying the image.position:absolute
toposition:relative
for the hidden<img>
tag. This works similar to the first fix, by giving dimensions to the parent<div>
which the child<div>
displaying the image then inherits.