fix: disable scroll when using adjustToContentHeight

jeremybarbet · Feb 5, 2020 · 5550f3f · 5550f3f
1 parent 9413350
commit 5550f3f
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 10 deletions.
diff --git a/examples/expo/App.js b/examples/expo/App.js
@@ -70,7 +70,7 @@ export default () => {
           modal[6] = el;
         }}
       />
-      <AlwaysOpen />
+      {/* <AlwaysOpen /> */}
     </Layout>
   );
 };
diff --git a/examples/expo/src/components/modals/FixedContent.js b/examples/expo/src/components/modals/FixedContent.js
@@ -39,7 +39,7 @@ export class FixedContent extends React.PureComponent {
 
   render() {
     return (
-      <Modalize ref={this.modal} scrollViewProps={{ scrollEnabled: false }} adjustToContentHeight>
+      <Modalize ref={this.modal} adjustToContentHeight>
         {this.renderContent()}
       </Modalize>
     );

diff --git a/examples/react-native-navigation/src/screens/FixedContent.js b/examples/react-native-navigation/src/screens/FixedContent.js
@@ -48,12 +48,7 @@ export class FixedContent extends React.PureComponent {
 
   render() {
     return (
-      <Modalize
-        ref={this.modal}
-        onClosed={this.onClosed}
-        scrollViewProps={{ scrollEnabled: false }}
-        adjustToContentHeight
-      >
+      <Modalize ref={this.modal} onClosed={this.onClosed} adjustToContentHeight>
         {this.renderContent()}
       </Modalize>
     );

diff --git a/examples/react-navigation/src/components/modals/FixedContent.js b/examples/react-navigation/src/components/modals/FixedContent.js
@@ -39,7 +39,7 @@ export class FixedContent extends React.PureComponent {
 
   render() {
     return (
-      <Modalize ref={this.modal} scrollViewProps={{ scrollEnabled: false }} adjustToContentHeight>
+      <Modalize ref={this.modal} adjustToContentHeight>
         {this.renderContent()}
       </Modalize>
     );

diff --git a/src/index.tsx b/src/index.tsx
@@ -44,6 +44,7 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
     handlePosition: 'outside',
     useNativeDriver: true,
     adjustToContentHeight: false,
+    disableScrollIfPossible: true,
     avoidKeyboardLikeIOS: Platform.select({
       ios: true,
       android: false,
@@ -136,6 +137,7 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
       enableBounces: true,
       keyboardToggle: false,
       keyboardHeight: 0,
+      disableScroll: undefined,
     };
 
     this.beginScrollY.addListener(({ value }) => (this.beginScrollYValue = value));
@@ -370,6 +372,20 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
     });
   };
 
+  private onContentViewLayout = ({ nativeEvent }: LayoutChangeEvent): void => {
+    const { adjustToContentHeight, disableScrollIfPossible } = this.props;
+
+    if (!adjustToContentHeight) {
+      return;
+    }
+
+    const { height } = nativeEvent.layout;
+    const shorterHeight = height < this.initialComputedModalHeight;
+    const disableScroll = shorterHeight && disableScrollIfPossible;
+
+    this.setState({ disableScroll });
+  };
+
   private onHandleComponent = ({ nativeEvent }: PanGestureHandlerStateChangeEvent): void => {
     if (nativeEvent.oldState === State.BEGAN) {
       this.beginScrollY.setValue(0);
@@ -565,7 +581,7 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
 
   private renderContent = (): React.ReactNode => {
     const { children, scrollViewProps, flatListProps, sectionListProps } = this.props;
-    const { enableBounces } = this.state;
+    const { enableBounces, disableScroll } = this.state;
     const keyboardDismissMode = isIos ? 'interactive' : 'on-drag';
 
     const opts = {
@@ -576,6 +592,8 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
         { useNativeDriver: false },
       ),
       scrollEventThrottle: 16,
+      onLayout: this.onContentViewLayout,
+      scrollEnabled: !disableScroll,
       keyboardDismissMode,
     };
 

diff --git a/src/options.ts b/src/options.ts
@@ -119,6 +119,12 @@ export interface IProps<FlatListItem = any, SectionListItem = any> {
    */
   adjustToContentHeight?: boolean;
 
+  /**
+   * Disable the scroll when the content is shorter than screen's height.
+   * @default true
+   */
+  disableScrollIfPossible: boolean;
+
   /**
    * Define keyboard's Android behavior like iOS's one.
    * @default Platform.select({ ios: true, android: false })
@@ -257,6 +263,11 @@ export interface IState {
    */
   enableBounces: boolean;
 
+  /**
+   * Disable scroll if disableScrollIfPossible is true or if we are the initial position of the snapPoint or alwaysOpen modals
+   */
+  disableScroll: boolean | undefined;
+
   /**
    * Store if the keyboard is displayed. Used to change the offset on the ContentView when the keyboard is open.
    */