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); }; });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter