diff --git a/examples/expo/src/components/modals/FixedContent.js b/examples/expo/src/components/modals/FixedContent.js index 7d0ed785..c79730fe 100644 --- a/examples/expo/src/components/modals/FixedContent.js +++ b/examples/expo/src/components/modals/FixedContent.js @@ -12,7 +12,11 @@ export class FixedContent extends React.PureComponent { {'Last step'.toUpperCase()} Send the message? {faker.lorem.paragraph()} - + {'Send'.toUpperCase()} @@ -35,7 +39,7 @@ export class FixedContent extends React.PureComponent { render() { return ( - + {this.renderContent()} ); diff --git a/examples/expo/src/components/modals/SimpleContent.js b/examples/expo/src/components/modals/SimpleContent.js index 66cc2819..26da9d68 100644 --- a/examples/expo/src/components/modals/SimpleContent.js +++ b/examples/expo/src/components/modals/SimpleContent.js @@ -1,6 +1,5 @@ import React from 'react'; -import { StyleSheet, Text, View, Dimensions, TextInput } from 'react-native'; -import { ScrollView } from 'react-native-gesture-handler'; +import { StyleSheet, Text, View, Dimensions, TextInput, ScrollView } from 'react-native'; import { Modalize } from 'react-native-modalize'; import faker from 'faker'; @@ -38,7 +37,11 @@ export class SimpleContent extends React.PureComponent { ))} - + , ]; @@ -56,7 +59,6 @@ export class SimpleContent extends React.PureComponent { showsVerticalScrollIndicator: false, stickyHeaderIndices: [0], }} - avoidKeyboardLikeIOS > {this.renderContent()} diff --git a/examples/react-native-navigation/src/screens/FixedContent.js b/examples/react-native-navigation/src/screens/FixedContent.js index 2ade8fdf..88971892 100644 --- a/examples/react-native-navigation/src/screens/FixedContent.js +++ b/examples/react-native-navigation/src/screens/FixedContent.js @@ -33,7 +33,11 @@ export class FixedContent extends React.PureComponent { {'Last step'.toUpperCase()} Send the message? {faker.lorem.paragraph()} - + {'Send'.toUpperCase()} @@ -48,7 +52,6 @@ export class FixedContent extends React.PureComponent { ref={this.modal} onClosed={this.onClosed} adjustToContentHeight - avoidKeyboardLikeIOS > {this.renderContent()} diff --git a/examples/react-native-navigation/src/screens/SimpleContent.js b/examples/react-native-navigation/src/screens/SimpleContent.js index c9684846..c7d15e89 100644 --- a/examples/react-native-navigation/src/screens/SimpleContent.js +++ b/examples/react-native-navigation/src/screens/SimpleContent.js @@ -1,6 +1,5 @@ import React from 'react'; -import { StyleSheet, Text, View, Dimensions, TextInput } from 'react-native'; -import { ScrollView } from 'react-native-gesture-handler'; +import { StyleSheet, Text, View, Dimensions, TextInput, ScrollView } from 'react-native'; import { Navigation } from 'react-native-navigation'; import { Modalize } from 'react-native-modalize'; import faker from 'faker'; @@ -53,7 +52,11 @@ export class SimpleContent extends React.PureComponent { ))} - + , ]; @@ -66,7 +69,6 @@ export class SimpleContent extends React.PureComponent { showsVerticalScrollIndicator: false, stickyHeaderIndices: [0], }} - avoidKeyboardLikeIOS > {this.renderContent()} diff --git a/examples/react-navigation/src/components/modals/FixedContent.js b/examples/react-navigation/src/components/modals/FixedContent.js index 34356982..0d79fd22 100644 --- a/examples/react-navigation/src/components/modals/FixedContent.js +++ b/examples/react-navigation/src/components/modals/FixedContent.js @@ -24,7 +24,11 @@ export class FixedContent extends React.PureComponent { {'Last step'.toUpperCase()} Send the message? {faker.lorem.paragraph()} - + {'Send'.toUpperCase()} @@ -35,7 +39,7 @@ export class FixedContent extends React.PureComponent { render() { return ( - + {this.renderContent()} ); diff --git a/examples/react-navigation/src/components/modals/SimpleContent.js b/examples/react-navigation/src/components/modals/SimpleContent.js index 2b2591d4..79f76f68 100644 --- a/examples/react-navigation/src/components/modals/SimpleContent.js +++ b/examples/react-navigation/src/components/modals/SimpleContent.js @@ -1,6 +1,5 @@ import React from 'react'; -import { StyleSheet, Text, View, Dimensions, TextInput } from 'react-native'; -import { ScrollView } from 'react-native-gesture-handler'; +import { StyleSheet, Text, View, Dimensions, TextInput, ScrollView } from 'react-native'; import { Modalize } from 'react-native-modalize'; import faker from 'faker'; @@ -44,7 +43,11 @@ export class SimpleContent extends React.PureComponent { ))} - + , ]; @@ -56,7 +59,6 @@ export class SimpleContent extends React.PureComponent { showsVerticalScrollIndicator: false, stickyHeaderIndices: [0], }} - avoidKeyboardLikeIOS > {this.renderContent()} diff --git a/src/index.tsx b/src/index.tsx index 85ba8adb..67884be6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -48,6 +48,10 @@ export class Modalize extends React.C ios: true, android: false, }), + modalTopOffset: Platform.select({ + ios: 0, + android: StatusBar.currentHeight || 0, + }), panGestureEnabled: true, closeOnOverlayTap: true, withReactModal: false, @@ -84,11 +88,8 @@ export class Modalize extends React.C constructor(props: IProps) { super(props); - const { fromTop } = props; - - const fullHeight = isIos || fromTop ? screenHeight : screenHeight - 10; - const computedHeight = - fullHeight - (fromTop ? 0 : this.handleHeight) - (isIphoneX && !fromTop ? 34 : 0); + const fullHeight = screenHeight - props.modalTopOffset!; + const computedHeight = fullHeight - this.handleHeight - (isIphoneX ? 34 : 0); const modalHeight = props.modalHeight || computedHeight; this.initialComputedModalHeight = modalHeight; @@ -619,6 +620,9 @@ export class Modalize extends React.C onGestureEvent={Animated.event([{ nativeEvent: { translationY: this.dragY } }], { useNativeDriver, })} + minDist={20} + activeOffsetY={20} + activeOffsetX={20} onHandlerStateChange={this.onHandleChildren} > {showContent && ( diff --git a/src/options.ts b/src/options.ts index 3f885994..1f4a2cbe 100644 --- a/src/options.ts +++ b/src/options.ts @@ -46,6 +46,11 @@ export interface IProps { */ modalHeight?: number; + /** + * A number to define the modal's top offset + */ + modalTopOffset?: number; + /** * Using this props will show the modal all the time, and the number represents how expanded the modal has to be */