How to Get Window Width and Height In React Native ?

import {
  View, // Importing the View component for creating container-like elements
  Text, // Importing the Text component for displaying text
  Dimensions, // Importing Dimensions to get the screen width and height
  StyleSheet, // Importing StyleSheet to create styles for the components
} from "react-native";

const App = () => {
  // Destructuring width and height from the Dimensions API
  const { width, height } = Dimensions.get("window");

  return (
    <View style={styles.container}> {/* Main container with styling */}
      <Text style={styles.heading}> {/* Heading text */}
        Geeksforgeeks
      </Text>
      <View style={styles.dimensionContainer}> {/* Container for displaying dimensions */}
        <Text style={styles.dimensionText}> {/* Text to display screen width */}
          Screen Width: {width}
        </Text>
        <Text style={styles.dimensionText}> {/* Text to display screen height */}
          Screen Height: {height}
        </Text>
      </View>
    </View>
  );
};

// Defining styles for the components
const styles = StyleSheet.create({
  container: {
    flex: 1, // Makes the container take up the full screen
    justifyContent: "center", // Centers content vertically
    alignItems: "center", // Centers content horizontally
    backgroundColor: "#f0f0f0", // Light gray background color
  },
  heading: {
    fontSize: 30, // Large font size for the heading
    fontWeight: "bold", // Bold font weight
    marginBottom: 30, // Space below the heading
    color: "green", // Green text color
  },
  dimensionContainer: {
    backgroundColor: "white", // White background for the dimensions container
    borderRadius: 10, // Rounded corners
    padding: 20, // Padding inside the container
    shadowColor: "#000", // Shadow color
    shadowOffset: { // Shadow offset for iOS
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25, // Shadow opacity for iOS
    shadowRadius: 3.84, // Shadow radius for iOS
    elevation: 5, // Shadow elevation for Android
  },
  dimensionText: {
    fontSize: 18, // Font size for dimension text
    marginBottom: 10, // Space below each dimension text
    color: "#666", // Gray text color
  },
});

export default App; // Exporting the App component as the default export

import {
  View, // Importing the View component for creating container elements
  Text, // Importing the Text component for displaying text
  useWindowDimensions, // Importing the hook to get screen dimensions
  StyleSheet, // Importing StyleSheet for creating styles
} from "react-native"; // Importing from the react-native library

// Main functional component of the app
const App = () => {
  // Destructuring width and height from useWindowDimensions hook
  const { width, height } = useWindowDimensions();

  return (
    // Main container view
    <View style={styles.container}>
      {/* Displaying the title text */}
      <Text style={styles.text}>Geeksforgeeks</Text>
      {/* Container for displaying screen dimensions */}
      <View style={styles.dimensionContainer}>
        {/* Displaying the screen width */}
        <Text style={styles.dimensionText}>
          Screen Width: {width}
        </Text>
        {/* Displaying the screen height */}
        <Text style={styles.dimensionText}>
          Screen Height: {height}
        </Text>
      </View>
    </View>
  );
};

// Defining styles for the components
const styles = StyleSheet.create({
  container: {
    flex: 1, // Makes the container take the full screen
    justifyContent: "center", // Centers content vertically
    alignItems: "center", // Centers content horizontally
    backgroundColor: "#f0f0f0", // Light gray background color
  },
  text: {
    fontSize: 30, // Large font size for the title
    fontWeight: "bold", // Bold font weight
    marginBottom: 20, // Space below the title
    color: "green", // Green text color
  },
  dimensionContainer: {
    backgroundColor: "white", // White background for the dimensions container
    borderRadius: 10, // Rounded corners
    padding: 20, // Padding inside the container
    shadowColor: "#000", // Shadow color
    shadowOffset: {
      width: 0, // Horizontal shadow offset
      height: 2, // Vertical shadow offset
    },
    shadowOpacity: 0.25, // Shadow transparency
    shadowRadius: 3.84, // Shadow blur radius
    elevation: 5, // Elevation for Android shadow
  },
  dimensionText: {
    fontSize: 18, // Font size for dimension text
    marginBottom: 10, // Space below each dimension text
    color: "#666", // Gray text color
  },
});

// Exporting the App component as the default export
export default App;