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 struggled with this one and like you was using non-ejected expo react native and did not have an index.html file. One way to fix this is defining BOTH height and width pixels to your image that is missing.
The other way that I just figured out is to create the index.html file that @zulqarnain alluded to -- to create it you need to run expo customize:web
and select web/index.html, hit the space bar, and then hit enter. -- see https://docs.expo.io/guides/customizing-webpack/#editing-static-files for documentation.
From there you can access the file and override the CSS of the form. I added this in the style section of the index.html
.css-accessibilityImage-9pa8cd{
inset: 0px;
height: 100%;
opacity: 0;
position: relative;
width: 100%;
z-index: -1;
}
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 a background-image
property with background-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
to position: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.If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With