Orientation
Wed Mar 16 2022 15:01:21 GMT+0000 (Coordinated Universal Time)
Saved by
@markmarleydev
To change the orientation go into the app.json and change from portrait to default which will allow device to switch from portrait to landscape
// Changed the position of the keyboard to get key areas active within the app
<KeyboardAvoidingView behavior="position" KeybordVerticalOffset={30}>
</KeyboardAvoidingView>
You need to be wary if calculating the screen size at the beginning when switching screen orientation implement a useEffect to listen for the change in screen orientation which then can update the sytling as you see fit.
// You can also add event listeners
useEffect(() => {
const updateLayout = () => {
setAvailableDeviceWidth(Dimensions.get('window').width);
setAvailableDeviceHeight(Dimensions.get('window').height);
};
Dimensions.addEventListener('change', updateLayout);
return () => {
Dimensions.removeEventListener('change', updateLayout);
};
});
content_copyCOPY
Comments