diff --git a/examples/expo/App.js b/examples/expo/App.js index 2bd90cb5..cb596de7 100644 --- a/examples/expo/App.js +++ b/examples/expo/App.js @@ -70,7 +70,7 @@ export default () => { modal[6] = el; }} /> - + {/* */} ); }; diff --git a/examples/expo/src/components/modals/FixedContent.js b/examples/expo/src/components/modals/FixedContent.js index eaa39fa1..c79730fe 100644 --- 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 ( - + {this.renderContent()} ); diff --git a/examples/react-native-navigation/src/screens/FixedContent.js b/examples/react-native-navigation/src/screens/FixedContent.js index 18deb5ff..6247444b 100644 --- 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 ( - + {this.renderContent()} ); diff --git a/examples/react-navigation/src/components/modals/FixedContent.js b/examples/react-navigation/src/components/modals/FixedContent.js index 5f26aadf..0d79fd22 100644 --- 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 ( - + {this.renderContent()} ); diff --git a/src/index.tsx b/src/index.tsx index d818d75b..334f9abc 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -44,6 +44,7 @@ export class Modalize 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 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 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 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 extends React.C { useNativeDriver: false }, ), scrollEventThrottle: 16, + onLayout: this.onContentViewLayout, + scrollEnabled: !disableScroll, keyboardDismissMode, }; diff --git a/src/options.ts b/src/options.ts index d795085a..4f76e9b6 100644 --- a/src/options.ts +++ b/src/options.ts @@ -119,6 +119,12 @@ export interface IProps { */ 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. */