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
*/