How to useDimensions Module in React Native
In this approach, the Dimensions module is utilized to retrieve the screen width and height. By invoking Dimensions.get(‘window’), the dimensions are accessed and displayed using the Text component.
Example: In this example, we are using above explained approach.
Javascript
// App.js file import React from "react"; import { View, Text, Dimensions, StyleSheet, } from "react-native"; const App = () => { const { width, height } = Dimensions.get("window"); return ( <View style={styles.container}> <Text style={styles.heading}> w3wiki </Text> <View style={styles.dimensionContainer}> <Text style={styles.dimensionText}> Screen Width: {width} </Text> <Text style={styles.dimensionText}> Screen Height: {height} </Text> </View> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#f0f0f0", }, heading: { fontSize: 30, fontWeight: "bold", marginBottom: 30, color: "green", }, dimensionContainer: { backgroundColor: "white", borderRadius: 10, padding: 20, shadowColor: "#000", shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.25, shadowRadius: 3.84, elevation: 5, }, dimensionText: { fontSize: 18, marginBottom: 10, color: "#666", }, }); export default App; |
Step 4: To launch the React native application, navigate to the terminal or command prompt and execute the necessary command.
npx expo start
- To run on Android:
npx react-native run-android
- To run on iOS:
npx react-native run-ios
Output:
How to Get Window Width and Height In React Native ?
In this article, we’ll explore two different approaches to obtaining the screen width and height in a React Native application.
Screen dimensions, including width and height, play a vital role in designing user interfaces that adapt seamlessly to different devices and orientations. By understanding these dimensions, developers empower themselves to create responsive layouts and deliver a cohesive user experience across diverse devices.
Contact Us