/Javascript/React/Get size of a View in React Native

Get size of a View in React Native

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

export default class Comp extends Component {

  find_dimesions(layout){
    const {x, y, width, height} = layout;
    console.warn(x);
    console.warn(y);
    console.warn(width);
    console.warn(height);
  }
  render() {
    return (
      <View onLayout={(event) => { this.find_dimesions(event.nativeEvent.layout) }} style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

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

AppRegistry.registerComponent('Comp', () => Comp);

Source: stackoverflow.com

Similar codes

0 vote223 views1 answer
Did you mean "@babel/transform-react-jsx-source"
Javascript React
23 votes299 views5 answers
USE ICONS IN REACT
Javascript React
0 vote208 views1 answer
How to write unit test cases in react js
Javascript React
12 votes211 views1 answer
Suspense react
Javascript React
0 vote214 views1 answer
Bottom shadow in react native
Javascript React
23 votes217 views4 answers
How to copy to clipboard in react js
Javascript React
25 votes225 views2 answers
You are running `create-react-app` 4.0.3, which is behind the latest release (5. 0.0).
Javascript React
0 vote201 views1 answer
Inline style to change background color react
Javascript React
15 votes220 views2 answers
Ternary react
Javascript React
0 vote242 views1 answer
My env.local file not working in my react app usind mac
Javascript React