Here is my code snippet:
<View style={{borderColor:"red",borderWidth:4,flex:1,transform: [{ rotate:'90deg' }]}}>
<Text>Hi</Text>
</View>
The result can be seen here: https://i.sstatic.net/C9ryl.jpg
Unfortunately, the current implementation is not functioning as expected. The View element rotates successfully, but its width and height are calculated based on the phone's portrait mode, causing design issues in landscape mode. To address this issue, I attempted a workaround:
import { useWindowDimensions } from 'react-native';
import React, { useState, useEffect,useCallback, useRef } from 'react';
import { Text,View} from "react-native";
const FullScreenMediaPlayer = (props) => {
const windowWidth = useWindowDimensions().width;
const windowHeight = useWindowDimensions().height;
return (
<View style={{width:windowHeight,height:windowWidth,borderColor:"red",borderWidth:4,flex:1,transform: [{ rotate:'90deg' }]}}>
<Text>Hui</Text>
</View>
);
}
export default FullScreenMediaPlayer;
The updated result can be viewed here: https://i.sstatic.net/PxkW7.jpg The width of the View is still not matching the screen's width? Is there a way to rotate the View while maintaining its height and width equal to the screen's dimensions in landscape mode without using the orientation package?
Note: I prefer achieving this purely through styling adjustments rather than relying on external packages.