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.
Prerequisites
- Introduction to React Native
- React Native Components
- React Hooks
- Expo CLI
- Node.js and npm
Steps to Create React Native Application
Step 1: Create React Native Application With Expo CLI
Create a new React Native project for <<Project Name>>.
npx create-expo-app <<Project Name>>
Step 2: Change the directory to the project folder:
cd <<Project Name>>
Project Structure:
The project structure will look like this:
Approach 1: Using Dimensions Module
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}> Geeksforneveropen </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:
Approach 2: Using useWindowDimensions
In this approach, we’ll use the useWindowDimensions hook to effortlessly access the width and height of the screen.
Example: The code defines a React Native component named ‘App’ that showcases the dimensions of the device screen. It import necessary components from ‘react-native’ while utilizing the useWindowDimensions hook to obtain both the width and height of the screen.
Javascript
// App.js file import React from "react"; import { View, Text, useWindowDimensions, StyleSheet, } from "react-native"; const App = () => { const { width, height } = useWindowDimensions(); return ( <View style={styles.container}> <Text style={styles.text}>Geeksforneveropen</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", }, text: { fontSize: 30, fontWeight: "bold", marginBottom: 20, 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; |
Output:
