How to override React native web pre defined css

Question

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(&quot;/static/media/stn_logo.153bbaf1.png&quot;);"></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

Answer 1

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;
  }

Answer 2

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:

1. The first fix is to add a height and width to the Image component in React Native. This adds a height and width to the parent <div>, which in turn gives dimensions to the child <div> displaying the image.
2. The other fix, which seems a little problematic to me, is to change 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.