How to update screen dimensions in react native - reactjs

Question

I have been trying to update my screen dimensions in react native so that the component resizes on-screen rotation with no vain. I have created my style in a separate file (Styles.js) and imported the styles in my login page like below:
Styles.js
import {
StyleSheet,
Dimensions
} from "react-native";
import {
scale,
ScaledSheet
} from "react-native-size-matters";
const styles = ScaledSheet.create({
scrollViewContainer: {
backgroundColor: '#E20030',
alignItems: 'center',
height: Dimensions.get('window').height,
padding: '50#s'
},
container2: {
alignItems: 'center',
justifyContent: 'center',
width: Dimensions.get('window').width,
flex: 1,
},
loginRect: {
borderRadius: '30#s',
marginTop: '20#s',
width: Dimensions.get('window').width * 0.8,
backgroundColor: 'white',
alignItems: 'center'
},
SectionStyle: {
flexDirection: 'row',
marginTop: 0,
marginLeft: '35#s',
marginRight: '35#s',
borderWidth: '1#s',
borderRadius: '5#s',
borderColor: '#dadae8',
},
});
Login.js
import React, { } from 'react';
import {
Text, View, TextInput, TouchableOpacity,
KeyboardAvoidingView,
} from 'react-native';
import { mystyles, styles } from './Components/styles';
const LoginScreen = () => {
return (
<View style={mystyles.scrollViewContainer}>
<KeyboardAvoidingView behavior="padding" style={{ flex: 100 }}>
<View style={mystyles.scrollViewContainer}>
<View style={mystyles.loginRect}>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1, marginLeft: 45, marginTop: 20 }}>
<Text style={{ color: 'black' }}>Username</Text>
</View>
</View>
<View style={styles.SectionStyle}>
<TextInput
style={styles.input}
/>
</View>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1, marginLeft: 45, marginTop: 20 }}>
<Text style={{ color: 'black' }}>Password</Text>
</View>
</View>
<View style={styles.SectionStyle}>
<TextInput
style={styles.input}
/>
</View>
<TouchableOpacity>
<Text style={styles.buttonTextStyle}>LOGIN</Text>
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
</View>
)
}
export default LoginScreen;
So I have tried using Dimensions onchange listener in my Styles.js but I get an error
ERROR Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
I created this function in the Styles.js file
m
function getDimensions() {
const [dimensions, setDimensions] = useState({
window,
screen
});
useEffect(() => {
const subscription = Dimensions.addEventListener(
"change",
({
window,
screen
}) => {
setDimensions({
window,
screen
});
console.log(dimensions.window.height + " +++ " + dimensions.screen)
}
);
// return () => subscription?.remove();
});
return dimensions.window;
}
Is there any way I can update the component sizes once the screen has been rotated?

Answer 1

This is working for me to detect rotation or changes in the size of the screen (split mode in tablets for example) without eventListeners.
import { Dimensions } from "react-native";
...
useEffect(() => {
...
}, [Dimensions.get("screen").height, Dimensions.get("screen").width]);
Hope this help to anybody