Measure height of react-native ref (ListView)

Question

How can you measure the height of a react-native element if you only have the ref?

I see NativeMethodsMixin but it's not clear how to implement it.

I've tried including it as:

import { NativeMethodsMixin } from 'react-native';
class Foo extends Component {
  mixins: [NativeMethodsMixin]
  measure(ref) {
    console.log(NativeMethodsMixin.measure(ref));
  }
  ...
}

but the app complains that NativeMethodsMixin is undefined.

If I go the RCTUIManager route:

import { NativeModules } from 'react-native';
const RCTUIManager = NativeModules.UIManager;
class Foo extends Component {
  measure(ref) {
    const height = RCTUIManager.measure(ref, (x, y, width, height, pageX, pageY) => height));
    console.log(height);
  }
  ...
}

then I get an error: Uncaught TypeError: Converting circular structure to JSON

I just want to get the height of that ref. What am I missing?

For anyone that finds this — you have to use a `ref`, and not the actual React backing class instance. https://facebook.github.io/react/docs/more-about-refs.html — chandlervdw, Aug 25 '16 at 22:56

score -1 · Answer 1 · answered Aug 18 '16 at 22:13

You can do like this:

    this.refs[your ref key].measure((fx, fy, width, height, px, py) => {
          this.state.origins.push({
            x: px,
            y: py,
            width,
            height,
          });
        });

this link maybe helpful:click here

Measure height of react-native ref (ListView)

1 Answers1