Get view position in React-native

Measure and get position on view react-native

Hi Guys, In this article, we are going to learn about how to get a view position in react-native, we are going to explore how to measure and get the position of react-native elements on the screen, we are going to use onLayout, measureInWindow, also displayed when view renders using onLayout and display onPress using measureInWindow, so let’s start

1. Create a new project

react-native init projectName

2. Imports following components

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,FlatList, Button, ScrollView} from 'react-native';

3. Define default values in the constructor

 constructor() {
    super();
    this.state = {
      scrollToHeight: 0,
      vheight: 0,
      vwidth: 0,
      vpx:0,
      vpy:0,
      vfx:0,
      vfy:0,
      vx:0,
      vy:0,
      nativeEvent:null,
   }
}

4. Measure view position onPress

We are using measureInWindow to measure the component position.

  measure(){
    this.refs.Marker.measureInWindow((x, y, width, height) => {
        console.log("++++++ measureInWindow "+width+" "+height+" "+x+" "+y);
        this.setState({ vheight: height, vwidth: width, vx: x, vy: y });
      }
    );
  };

as you saw in the above method you are storing x, y position, and height, width in the state.

In the above method, we are using the view using reference this.refs.Marker just add ref=”Marker” in view which you want to measure like below

<View ref="Marker" />

5. Measure position using onLayout onRender view

You have to add onLayout on view like below.

<View
      ref="Marker"
      onLayout={({nativeEvent}) => {
          this.setState({nativeEvent: nativeEvent.layout});
      }}
>
// Add component
</View>

onLayout returns following JSON object using nativeEvent.layout

{"height": 35,"width":102.5,"y":0,"x":0}

Let’s see the full source code

6. Full source code

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,FlatList, Button, ScrollView} from 'react-native';


//Define a color for toolbar
global.backgroundColor = '#176abf';


export default class Home extends Component {

  constructor() {
    super();
    this.state = {
      scrollToHeight: 0,
      vheight: 0,
      vwidth: 0,
      vpx:0,
      vpy:0,
      vfx:0,
      vfy:0,
      vx:0,
      vy:0,
      nativeEvent:null, 
    }
  }

  static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
       return {
         title:  'Techup.co.in',
         headerStyle: {
             backgroundColor: '#000000',
         },
         headerTintColor: '##EED92B',
         headerTitleStyle: {
             fontWeight: 'bold',
         }, 
       }
    };


  componentDidMount() {
   // do API call here
  }


  measure(){

    this.refs.Marker.measureInWindow((x, y, width, height) => {
        console.log("++++++ measureInWindow "+width+" "+height+" "+x+" "+y);
        this.setState({ vheight: height, vwidth: width, vx: x, vy: y });
      
      }
    );

  };

  render() {
    return (
      <View style={styles.container}>
         <View style={{flex:1}}    >
          <Button
            title="Measue position"
            onPress={() => this.measure()}    // <---- Method called for measure position
          />
          <Text style={{fontSize:20}}>Using measureInWindow</Text>
          <Text>Width: {this.state.vwidth} Height: {this.state.vheight} {'\n'} x: {this.state.vx}  y: {this.state.vy}</Text>
          <Text style={{fontSize:20}}>Using onLayout</Text>
          <Text>{ JSON.stringify(this.state.nativeEvent)}</Text>
          </View>
    
      <View >
        <View  style={{margin:10, alignItems:'center', justifyContent:'center'}}>
  
       //We are going to measure position for this view
        <View
          ref="Marker"
          onLayout={({nativeEvent}) => {
               this.setState({nativeEvent: nativeEvent.layout});
          }}
              >
          <Button
            title="Measure me"
          />
          </View>
    </View>
   </View>
 
  </View>
    );
  }
}

const styles = StyleSheet.create({
  
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 40,
    textAlign: 'center',
    margin: 10,  
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,   
    fontSize: 18,
  },
});

7. Output:

Thank you 🙂