Get dimensions imperatively - RN Image, View

[sanjarcode]

The Dimensions API is present but useful due to padding etc. Pretty non informative.

Image

https://stackoverflow.com/a/59801268

Image.resolveAssetSource(require('../myImage.png')).width

for network images - there's Image.getSize

View width height

https://stackoverflow.com/a/66870056

import React from 'react'
import { View } from 'react-native'

function MyComponent() {
  const onLayout=(event)=> {
    const {x, y, height, width} = event.nativeEvent.layout;
    
  }
  return (
    <View onLayout={onLayout}>
      <OtherComponent />
    </View>
  )
}

---

Usage example

import React, { useState } from "react";

import { Image, View, ScrollView, Text } from "react-native";

const myImage = require("../assets/images/SomeLocalImage.png");
const myImageDetails = Image.resolveAssetSource(myImage);

/**
 * Goal: render image as large as possible but without causing overflow
 *
 * Trying with local image
 */
export default function ImageTest() {
  const [multiplier, setMultiplier] = useState(1);
  return (
    <View style={{ flex: 1, paddingHorizontal: 16 }}>
      <ScrollView>
        <Text>Image trial</Text>
        <View
          // using layout to avoid hardcode padding calculation
          // just using this for getting `width`
          onLayout={(event) => {
            const { width } = event.nativeEvent.layout;
            if (multiplier === 1) setMultiplier(width / myImageDetails.width);
          }}
        />

        <Image
          source={myImage}
          style={{
            height: myImageDetails.height * multiplier,
            width: myImageDetails.width * multiplier,
          }}
        />
        <View>
          <Image
            source={myImage}
            style={{
              width: "100%",
              borderWidth: 1,
            }}
            resizeMode="contain"
          />
        </View>
      </ScrollView>
    </View>
  );
}