0

I'm using a modal within a view - which contains a form. The form is longer than the viewport - so, the content is taking up the height of the page and scrolling out of view.

Can anyone advise on the best approach for dynamic height?

currently i'm using the following approach, but doesnt work if phone orientation switched and i'm sure there must be a better solution?

  heightScreen = () => {
    return Dimensions.get('window').height - 150;
  }  



<Modal
    isVisible={this.props.showModal}
    animationInTiming={500}
    backdropColor={'#f79431'}
    style={{  marginVertical:50, maxHeight: this.heightScreen()}}
   >
Dancer
  • 17,035
  • 38
  • 129
  • 206

1 Answers1

1

import {useEffect, useState} from 'react';
import {Dimensions} from 'react-native';

export const useOrientation = () => {
  const [orientation, setOrientation] = useState("PORTRAIT");

  useEffect(() => {
    Dimensions.addEventListener('change', ({ window:{ width, height } }) => {
        setOrientation(width < height ? "PORTRAIT" : "LANDSCAPE")
    })
  }, []);

  return orientation;
}

You can add this function as a helper to detect the orientation (portrait/landscape) and based on that to apply the correct height.

Nicolae Maties
  • 2,476
  • 1
  • 16
  • 26
  • thanks very much for your help @Nicolae - However the code above doesn't return a number - (ie height figure) unless i'm missing something? Cheers Paul – Dancer Mar 22 '21 at 15:56