Change style when rotation the smartphone - reactjs

Question

I use the react-native-orientation-locker package and I would like to change the style when I rotate the smartphone
I use the state to initialize my style, but this solution I don't think is optimal
here is an example of my code
const [styles, setStyles] = useState(Styles(theme, layout))
const changeStyles = (o: OrientationType): void => {
layout = getDeviceVideoLayout(o) // return 'PORTRAIT or 'LANDSCAPE-LEFT' or 'LANDSCAPE-RIGHT'
// change the rotation of the phone
const { height, width } = Dimensions.get('window')
//I update width and height
theme.layout.width = width
theme.layout.height = height
// I update the status
setStyles(Styles(theme, layout))
}
useDeviceOrientationChange((o) => {
changeStyles(o)
})
I don't like this solution of the style in the state
an example of my style
const StyleCommon = (theme: Theme, bottomSpace: number): StyleGeneral => StyleSheet.create({
container: {
height: theme.layout.height,
width: '100%',
backgroundColor: theme.colors.black
},
actionButtonContainer: {
width: 50,
backgroundColor: 'rgba(242, 241, 240, 0.3)',
borderRadius: 12,
marginBottom: 20
}
})
const StyleLayoutPortrait = (theme: Theme, bottomSpace: number): StyleLayout => StyleSheet.create({
actionContainer: {
position: 'absolute',
bottom: theme.spacing.sm + theme.layout.insets.bottom + 40 + bottomSpace,
right: theme.spacing.sm
}
})
const StyleLayoutLandscapeLeft = (theme: Theme): StyleLayout => StyleSheet.create({
actionContainer: {
position: 'absolute',
top: theme.spacing.sm,
right: theme.spacing.sm
}
})
const StyleLayoutLandscapeRight = (theme: Theme): StyleLayout => StyleSheet.create({
actionContainer: {
position: 'absolute',
right: theme.spacing.sm + theme.layout.insets.top,
top: theme.spacing.sm
}
})
const Styles = (theme: Theme, layout: VideoLayoutType, bottomSpace: number): Style => {
if (layout === 'LANDSCAPE-RIGHT') {
return ({
...StyleCommon(theme, bottomSpace),
...StyleLayoutLandscapeRight(theme)
})
} else if (layout === 'LANDSCAPE-LEFT') {
return ({
...StyleCommon(theme, bottomSpace),
...StyleLayoutLandscapeLeft(theme)
})
} else {
return ({
...StyleCommon(theme, bottomSpace),
...StyleLayoutPortrait(theme, bottomSpace)
})
}
}
I do not think this solution is optimal, how could I do?

Answer 1

indicatorContainerProps:{
position: 'fixed',
right: '0px',
bottom: '0%',
marginBottom: '40%',
display:'flex',
justifyContent:'center',
flexDirection:'row',
alignItems:'center',
"#media (orientation:landscape)": {
marginBottom: '0px'
}
This example is for Jsx or ReactJs.
You just need to specify the some class name like text
text:{
position: 'fixed',
right: '0px',
bottom: '0%',
marginBottom: '40%',
display:'flex',
justifyContent:'center',
flexDirection:'row',
alignItems:'center',
"#media (orientation:landscape)": { //here you can change based on orientation
marginBottom: '0px'
}