React Native: Getting the position of an element

I am styling an Image component with flexbox to be in the center of the screen which works pretty well. Now I want a second Image component to be displayed directly on the top of the first one. The second image is using absolute positioning. Currently I’m just guessing pixels so that it fits, but of course this is not accurate and way too much maintainability effort.

I am pretty much looking for the React Native equivalent of jQuery’s .offset(). Is there such a thing and if there isn’t what’s the best way to achieve this?

  • property not working with getter AND setter
  • Appropriate way to get user's location(also in killed state) for an “hyperlocal” app
  • how to identifying Iphone incoming call and display notification?
  • Prevent iOS mobile safari from going idle / auto-locking / sleeping?
  • Realm Swift 0.92.3 “Run Script Phase” not working
  • Creating a percentage based iOS layout
  • 3 Solutions Collect From Internet About “React Native: Getting the position of an element”

    React-Native provides a .measure(...) method (source code) which returns the offsets and width/height of a component. Simply provide a callback function to .measure(...):

    myComponent.measure( (fx, fy, width, height, px, py) => {
    
        console.log('Component width is: ' + width)
        console.log('Component height is: ' + height)
        console.log('X offset to frame: ' + fx)
        console.log('Y offset to frame: ' + fy)
        console.log('X offset to page: ' + px)
        console.log('Y offset to page: ' + py)
    })
    

    Example…

    The following calculates the layout of a custom component after it is rendered:

    class MyComponent extends React.component {
        render() {
            return <View ref="mycomponent" />
        }
        componentDidMount() {
            // Print component dimensions to console
            this.refs.mycomponent.measure( (fx, fy, width, height, px, py) => {
                console.log('Component width is: ' + width)
                console.log('Component height is: ' + height)
                console.log('X offset to frame: ' + fx)
                console.log('Y offset to frame: ' + fy)
                console.log('X offset to page: ' + px)
                console.log('Y offset to page: ' + py)
            })        
        }
    }
    

    Bug notes

    • Note that sometimes the component does not finish rendering before componentDidMount() is called. If you are getting zeros as a result from measure(...), then wrapping it in a setTimeout should solve the problem, i.e.:

      setTimeout( myComponent.measure(…), 0 )

    I needed to find the position of an element inside a ListView and used this snippet that works kind of like .offset:

    const UIManager = require('NativeModules').UIManager;
    const handle = React.findNodeHandle(this.refs.myElement);
    UIManager.measureLayoutRelativeToParent(
      handle, 
      (e) => {console.error(e)}, 
      (x, y, w, h) => {
        console.log('offset', x, y, w, h);
      });
    

    This assumes I had a ref='myElement' on my component.

    To get info about any element, you can simply show the inspector.

    Open the debug mode (on the iOS simulator it’s under Hardware > Shake gesture):

    React Native Debug mode

    It’s in a way similar to the web DOM inspector, you can select layers and see style properties, and also positions.

    React Native Inspector