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

How to / Third Party Tooling
1

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:

and

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?

2

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) {
      super(props);
      this.state = {
        orientation: '',
      };
      this.onOrientationChange = this.onOrientationChange.bind(this);
    }

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

    componentWillUnmount() {
      ScreenOrientation.removeOrientationChangeListener(this.subscription);
    }

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

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

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

    render() {
      return (
        <ViewComponent
          {...this.props}
          {...this.state}
          onLayout={this.detectOrientation}
        />
      );
    }
  }
  return (props) => <DetectOrientation {...props} />;
}