How to do styling with expo and react-native-paper based on device orientation?

I have some stylying that fits perfectly for the portrait mode, but in landscape, the fixed bottom is going on top of the content.

I want to change the styles based on orientation, so far I have seen:


One is async and can’t really be called in render unless we change the render in async and I am not sure if that’s supported.

How should I get proper styling based on device orientation?

I have written a HoC solution for my expo SDK36 project, it support orientation change and pass the ScreenOrientation.Orientation has props.orientation:

import React from 'react';
import { ScreenOrientation } from 'expo';
import { StatusBar } from 'react-native';

export default function withOrientation(ViewComponent) {
  class DetectOrientation extends React.Component {
    constructor(props) {
      this.state = {
        orientation: '',
      this.onOrientationChange = this.onOrientationChange.bind(this);

    UNSAFE_componentWillMount() {
      this.subscription = ScreenOrientation.addOrientationChangeListener(this.onOrientationChange);

    componentWillUnmount() {

    onOrientationChange(changeEvent) {
      const { orientationInfo } = changeEvent;
        orientation: orientationInfo.orientation.split('_')[0],

    async componentDidMount() {
      await this.detectOrientation();

    async detectOrientation() {
      const { orientation } = await ScreenOrientation.getOrientationAsync();
        orientation: orientation.split('_')[0],

    render() {
      return (
  return (props) => <DetectOrientation {...props} />;