useKeplerWindowDimensions

/**
 * Vega window Dimensions with module name
 * @platform vega
 */
export interface DisplayMetricsKepler {
  width: number;
  height: number;
  scale: number;
  fontScale: number;
  moduleName: string; // the name used to register the main React app component in the React Native AppRegistry for the surface (window/screen).
}

import { useKeplerWindowDimensions } from 'react-native';

const windowWidth = useWindowDimensions()[<index>].width;
const windowHeight = useWindowDimensions()[<index>].height;

import React from "react";
import { View, StyleSheet, Text, useKeplerWindowDimensions } from "react-native";

const App = () => {
  const windows = useKeplerWindowDimensions();
  return (
    <View style={styles.container}>
        <Text style={styles.displayText}>Module states: </Text>
            {windows && windows.map((element: { width: number; height: number; scale: number; fontScale: number; moduleName: string; }, i: number) =>
                <Text key={i} style={styles.commentText}>
                    {`App module: ${element.moduleName}, height: ${element.height}, width: ${element.width}`}
                 </Text>
            )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  displayText: {
     fontSize: 20,
     fontWeight: "bold"
  },
  commentText: {
     fontSize: 16
  }
});

export default App;

useKeplerWindowDimensions()[<index>].fontScale;

useKeplerWindowDimensions()[<index>].height;

useKeplerWindowDimensions()[<index>].scale;

useKeplerWindowDimensions()[<index>].width;

useKeplerWindowDimensions()[<index>].moduleName;