Orientation

PHOTO EMBED

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