How to get a image width when screen size changes in react?

Question

I had created a image hover,Some text in screen when i hover cover the text image appears the image is responsive,i want to set the text width equal to image width when changing the screen size the text width should change with image width,Please help me i'm using this css lib How can i create the function to get the width of the image and set it to text width?

const About = () => {
    return (
        <div className="bucket">
            <div class="row">
                <div class="col-sm-8 mainOne">
                <figure class="imghvr-shutter-in-horiz">
                <h1 className=" text animated bounceInLeft delay-2s">A Front-End Dev...</h1>
                    <figcaption>

                    <img 
                 className="responsive"
                    src="https://netbramha.com/wp-content/uploads/2016/12/senior-front-end-developer-openings-1.gif"/>
                    </figcaption>
                </figure>

                </div>
                <div class="col-sm-4 mainTwo">
                    <div className="col">sub one</div>
                    <div className="col">sub two</div>
                </div>
            </div>
        </div>
    )
}

CSS

 .responsive {
    width: 100%;
    height: auto;
  }

Answer 1

You can use the class fill available

.responsive{
   width: -webkit-fill-available;
}

Answer 2

<Image
   style={{flex:1, height: undefined, width: undefined}}
   source={require('../../../assets/images/onboarding-how-it-works.png')}
   resizeMode="contain"
/>