From dc1545b4c46bf8d83f6db242d9211be66b59eee9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Barbet?= <jeremgraph@gmail.com>
Date: Thu, 20 Jun 2019 14:28:25 +0000
Subject: [PATCH] `alwaysOpen` props to keep the modal visible

* Initial work

* Fix watch scripts for examples

* Transition on overlay

* Fix watch script for RN

* Add examples

* Update docs

* Fix post version script
---
 docs/PROPSMETHODS.md                          | 10 +++
 examples/expo/App.js                          | 10 +--
 examples/expo/src/components/footer/Footer.js | 26 -------
 examples/expo/src/components/header/Header.js | 15 +++--
 .../expo/src/components/modals/AlwaysOpen.js  | 67 +++++++++++++++++++
 .../src/components/footer/Footer.js           | 26 -------
 .../src/components/header/Header.js           | 15 +++--
 .../src/screens/AlwaysOpen.js                 | 67 +++++++++++++++++++
 .../src/screens/App.js                        | 10 ++-
 examples/react-navigation/App.js              | 10 +--
 .../src/components/footer/Footer.js           | 26 -------
 .../src/components/header/Header.js           | 15 +++--
 .../src/components/modals/AlwaysOpen.js       | 67 +++++++++++++++++++
 package.json                                  |  4 +-
 post-version.sh                               |  8 +--
 src/Modalize.tsx                              | 52 ++++++++++----
 src/Options.ts                                |  5 ++
 17 files changed, 304 insertions(+), 129 deletions(-)
 delete mode 100644 examples/expo/src/components/footer/Footer.js
 create mode 100644 examples/expo/src/components/modals/AlwaysOpen.js
 delete mode 100644 examples/react-native-navigation/src/components/footer/Footer.js
 create mode 100644 examples/react-native-navigation/src/screens/AlwaysOpen.js
 delete mode 100644 examples/react-navigation/src/components/footer/Footer.js
 create mode 100644 examples/react-navigation/src/components/modals/AlwaysOpen.js

diff --git a/docs/PROPSMETHODS.md b/docs/PROPSMETHODS.md
index 73e8fbf9..11bc7a08 100644
--- a/docs/PROPSMETHODS.md
+++ b/docs/PROPSMETHODS.md
@@ -22,6 +22,16 @@ The value you pass is the height of the modal before being full opened.
 | -------- | -------- |
 | number   | No       |
 
+### `alwaysOpen`
+
+A number that will make the modal visible all the time. You can still [open](/PROPSMETHODS.md?id=open) and [close](/PROPSMETHODS.md?id=close) it, using the build-in methods.
+
+The value you pass is the height of the visible part of the modal on top of the screen.
+
+| Type     | Required |
+| -------- | -------- |
+| number   | No       |
+
 ### `handlePosition`
 
 Define where the handle on top of the modal should be positioned.
diff --git a/examples/expo/App.js b/examples/expo/App.js
index 2657c108..210625b1 100644
--- a/examples/expo/App.js
+++ b/examples/expo/App.js
@@ -2,7 +2,6 @@ import React from 'react';
 
 import { Layout } from './src/components/layout/Layout';
 import { Header } from './src/components/header/Header';
-import { Footer } from './src/components/footer/Footer';
 import { Button } from './src/components/button/Button';
 import { AbsoluteHeader } from './src/components/modals/AbsoluteHeader';
 import { SimpleContent } from './src/components/modals/SimpleContent';
@@ -11,6 +10,7 @@ import { SnappingList } from './src/components/modals/SnappingList';
 import { CustomStyle } from './src/components/modals/CustomStyle';
 import { FlatList } from './src/components/modals/FlatList';
 import { SectionList } from './src/components/modals/SectionList';
+import { AlwaysOpen } from './src/components/modals/AlwaysOpen';
 
 export default () => {
   const modal = [];
@@ -27,10 +27,7 @@ export default () => {
 
   return (
     <Layout>
-      <Header
-        subheading="Run with React Navigation"
-        copy="Import your modal on the screen you need"
-      />
+      <Header subheading="Run with React Navigation" />
 
       {renderButtons([
         'Modal with a simple content',
@@ -42,8 +39,6 @@ export default () => {
         'Modal with a Section List',
       ])}
 
-      <Footer />
-
       <SimpleContent ref={el => { modal[0] = el; }} />
       <FixedContent ref={el => { modal[1] = el; }} />
       <SnappingList ref={el => { modal[2] = el; }} />
@@ -51,6 +46,7 @@ export default () => {
       <CustomStyle ref={el => { modal[4] = el; }} />
       <FlatList ref={el => { modal[5] = el; }} />
       <SectionList ref={el => { modal[6] = el; }} />
+      <AlwaysOpen />
     </Layout>
   );
 };
diff --git a/examples/expo/src/components/footer/Footer.js b/examples/expo/src/components/footer/Footer.js
deleted file mode 100644
index d0a47b04..00000000
--- a/examples/expo/src/components/footer/Footer.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, Text, Linking } from 'react-native';
-
-export const Footer = () => (
-  <View style={s.footer}>
-    <Text style={s.footer__copy}>
-      Created by <Text style={s.footer__author} onPress={() => Linking.openURL('https://github.com/jeremybarbet')}>Jérémy Barbet</Text> — v1.0.0
-    </Text>
-  </View>
-);
-
-const s = StyleSheet.create({
-  footer: {
-    position: 'absolute',
-    bottom: 40,
-  },
-
-  footer__copy: {
-    fontSize: 12,
-    color: '#b5b5b5',
-  },
-
-  footer__author: {
-    color: '#404040',
-  },
-});
diff --git a/examples/expo/src/components/header/Header.js b/examples/expo/src/components/header/Header.js
index 618d6520..19b306f6 100644
--- a/examples/expo/src/components/header/Header.js
+++ b/examples/expo/src/components/header/Header.js
@@ -1,11 +1,14 @@
 import React from 'react';
-import { View, StyleSheet, Text } from 'react-native';
+import { View, StyleSheet, Text, Linking } from 'react-native';
 
-export const Header = ({ subheading, copy }) => (
+export const Header = ({ subheading }) => (
   <View style={s.header}>
     <Text style={s.header__heading}>Modalize</Text>
     <Text style={s.header__subheading}>{subheading}</Text>
-    <Text style={s.header__copy}>{copy}</Text>
+
+    <Text style={s.header__copy}>
+      Created by <Text style={s.header__author} onPress={() => Linking.openURL('https://github.com/jeremybarbet')}>Jérémy Barbet</Text> — v1.0.0
+    </Text>
   </View>
 );
 
@@ -36,8 +39,12 @@ const s = StyleSheet.create({
     marginTop: 20,
     marginHorizontal: 40,
 
-    fontSize: 16,
+    fontSize: 14,
     color: '#b5b5b5',
     textAlign: 'center',
   },
+
+  header__author: {
+    color: '#404040',
+  },
 });
diff --git a/examples/expo/src/components/modals/AlwaysOpen.js b/examples/expo/src/components/modals/AlwaysOpen.js
new file mode 100644
index 00000000..76be0a1e
--- /dev/null
+++ b/examples/expo/src/components/modals/AlwaysOpen.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Modalize from 'react-native-modalize';
+import faker from 'faker';
+
+export class AlwaysOpen extends React.PureComponent {
+
+  modal = React.createRef();
+
+  renderContent = () => (
+    <View style={s.content}>
+      <Text style={s.content__subheading}>{'Introduction'.toUpperCase()}</Text>
+      <Text style={s.content__heading}>Always open modal!</Text>
+      <Text style={s.content__description}>{faker.lorem.paragraph()}</Text>
+    </View>
+  )
+
+  render() {
+    return (
+      <Modalize
+        ref={this.modal}
+        style={s.content__modal}
+        alwaysOpen={85}
+        handlePosition="inside"
+      >
+        {this.renderContent()}
+      </Modalize>
+    );
+  }
+}
+
+const s = StyleSheet.create({
+  content: {
+    padding: 20,
+  },
+
+  content__modal: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.45,
+    shadowRadius: 16,
+  },
+
+  content__subheading: {
+    marginBottom: 2,
+
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#ccc',
+  },
+
+  content__heading: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#333',
+  },
+
+  content__description: {
+    paddingTop: 10,
+    paddingBottom: 10,
+
+    fontSize: 15,
+    fontWeight: '200',
+    lineHeight: 22,
+    color: '#666',
+  },
+});
diff --git a/examples/react-native-navigation/src/components/footer/Footer.js b/examples/react-native-navigation/src/components/footer/Footer.js
deleted file mode 100644
index d0a47b04..00000000
--- a/examples/react-native-navigation/src/components/footer/Footer.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, Text, Linking } from 'react-native';
-
-export const Footer = () => (
-  <View style={s.footer}>
-    <Text style={s.footer__copy}>
-      Created by <Text style={s.footer__author} onPress={() => Linking.openURL('https://github.com/jeremybarbet')}>Jérémy Barbet</Text> — v1.0.0
-    </Text>
-  </View>
-);
-
-const s = StyleSheet.create({
-  footer: {
-    position: 'absolute',
-    bottom: 40,
-  },
-
-  footer__copy: {
-    fontSize: 12,
-    color: '#b5b5b5',
-  },
-
-  footer__author: {
-    color: '#404040',
-  },
-});
diff --git a/examples/react-native-navigation/src/components/header/Header.js b/examples/react-native-navigation/src/components/header/Header.js
index 618d6520..19b306f6 100644
--- a/examples/react-native-navigation/src/components/header/Header.js
+++ b/examples/react-native-navigation/src/components/header/Header.js
@@ -1,11 +1,14 @@
 import React from 'react';
-import { View, StyleSheet, Text } from 'react-native';
+import { View, StyleSheet, Text, Linking } from 'react-native';
 
-export const Header = ({ subheading, copy }) => (
+export const Header = ({ subheading }) => (
   <View style={s.header}>
     <Text style={s.header__heading}>Modalize</Text>
     <Text style={s.header__subheading}>{subheading}</Text>
-    <Text style={s.header__copy}>{copy}</Text>
+
+    <Text style={s.header__copy}>
+      Created by <Text style={s.header__author} onPress={() => Linking.openURL('https://github.com/jeremybarbet')}>Jérémy Barbet</Text> — v1.0.0
+    </Text>
   </View>
 );
 
@@ -36,8 +39,12 @@ const s = StyleSheet.create({
     marginTop: 20,
     marginHorizontal: 40,
 
-    fontSize: 16,
+    fontSize: 14,
     color: '#b5b5b5',
     textAlign: 'center',
   },
+
+  header__author: {
+    color: '#404040',
+  },
 });
diff --git a/examples/react-native-navigation/src/screens/AlwaysOpen.js b/examples/react-native-navigation/src/screens/AlwaysOpen.js
new file mode 100644
index 00000000..76be0a1e
--- /dev/null
+++ b/examples/react-native-navigation/src/screens/AlwaysOpen.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Modalize from 'react-native-modalize';
+import faker from 'faker';
+
+export class AlwaysOpen extends React.PureComponent {
+
+  modal = React.createRef();
+
+  renderContent = () => (
+    <View style={s.content}>
+      <Text style={s.content__subheading}>{'Introduction'.toUpperCase()}</Text>
+      <Text style={s.content__heading}>Always open modal!</Text>
+      <Text style={s.content__description}>{faker.lorem.paragraph()}</Text>
+    </View>
+  )
+
+  render() {
+    return (
+      <Modalize
+        ref={this.modal}
+        style={s.content__modal}
+        alwaysOpen={85}
+        handlePosition="inside"
+      >
+        {this.renderContent()}
+      </Modalize>
+    );
+  }
+}
+
+const s = StyleSheet.create({
+  content: {
+    padding: 20,
+  },
+
+  content__modal: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.45,
+    shadowRadius: 16,
+  },
+
+  content__subheading: {
+    marginBottom: 2,
+
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#ccc',
+  },
+
+  content__heading: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#333',
+  },
+
+  content__description: {
+    paddingTop: 10,
+    paddingBottom: 10,
+
+    fontSize: 15,
+    fontWeight: '200',
+    lineHeight: 22,
+    color: '#666',
+  },
+});
diff --git a/examples/react-native-navigation/src/screens/App.js b/examples/react-native-navigation/src/screens/App.js
index ac48defb..6bc7c76a 100644
--- a/examples/react-native-navigation/src/screens/App.js
+++ b/examples/react-native-navigation/src/screens/App.js
@@ -4,9 +4,10 @@ import { Navigation } from 'react-native-navigation';
 import { ABSOLUTE_HEADER, CUSTOM_STYLE, FIXED_CONTENT, FLAT_LIST, SECTION_LIST, SIMPLE_CONTENT, SNAPPING_LIST } from '../screens';
 import { Layout } from '../components/layout/Layout';
 import { Header } from '../components/header/Header';
-import { Footer } from '../components/footer/Footer';
 import { Button } from '../components/button/Button';
 
+import { AlwaysOpen } from './AlwaysOpen';
+
 export const App = () => {
   const handleOverlay = (name) => {
     Navigation.showOverlay({
@@ -29,10 +30,7 @@ export const App = () => {
 
   return (
     <Layout>
-      <Header
-        subheading="Run with React Native Navigation"
-        copy="Uses showOverlay method"
-      />
+      <Header subheading="Run with React Native Navigation" />
 
       {renderButtons([
         { name: 'Modal with a simple content', id: SIMPLE_CONTENT },
@@ -44,7 +42,7 @@ export const App = () => {
         { name: 'Modal with a Section List', id: SECTION_LIST },
       ])}
 
-      <Footer />
+      <AlwaysOpen />
     </Layout>
   );
 };
diff --git a/examples/react-navigation/App.js b/examples/react-navigation/App.js
index 760190ba..ac35f788 100644
--- a/examples/react-navigation/App.js
+++ b/examples/react-navigation/App.js
@@ -2,7 +2,6 @@ import React from 'react';
 
 import { Layout } from './src/components/layout/Layout';
 import { Header } from './src/components/header/Header';
-import { Footer } from './src/components/footer/Footer';
 import { Button } from './src/components/button/Button';
 import { AbsoluteHeader } from './src/components/modals/AbsoluteHeader';
 import { SimpleContent } from './src/components/modals/SimpleContent';
@@ -11,6 +10,7 @@ import { SnappingList } from './src/components/modals/SnappingList';
 import { CustomStyle } from './src/components/modals/CustomStyle';
 import { FlatList } from './src/components/modals/FlatList';
 import { SectionList } from './src/components/modals/SectionList';
+import { AlwaysOpen } from './src/components/modals/AlwaysOpen';
 
 export const App = () => {
   const modal = [];
@@ -27,10 +27,7 @@ export const App = () => {
 
   return (
     <Layout>
-      <Header
-        subheading="Run with React Navigation"
-        copy="Import your modal on the screen you need"
-      />
+      <Header subheading="Run with React Navigation" />
 
       {renderButtons([
         'Modal with a simple content',
@@ -42,8 +39,6 @@ export const App = () => {
         'Modal with a Section List',
       ])}
 
-      <Footer />
-
       <SimpleContent ref={el => { modal[0] = el; }} />
       <FixedContent ref={el => { modal[1] = el; }} />
       <SnappingList ref={el => { modal[2] = el; }} />
@@ -51,6 +46,7 @@ export const App = () => {
       <CustomStyle ref={el => { modal[4] = el; }} />
       <FlatList ref={el => { modal[5] = el; }} />
       <SectionList ref={el => { modal[6] = el; }} />
+      <AlwaysOpen />
     </Layout>
   );
 };
diff --git a/examples/react-navigation/src/components/footer/Footer.js b/examples/react-navigation/src/components/footer/Footer.js
deleted file mode 100644
index d0a47b04..00000000
--- a/examples/react-navigation/src/components/footer/Footer.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, Text, Linking } from 'react-native';
-
-export const Footer = () => (
-  <View style={s.footer}>
-    <Text style={s.footer__copy}>
-      Created by <Text style={s.footer__author} onPress={() => Linking.openURL('https://github.com/jeremybarbet')}>Jérémy Barbet</Text> — v1.0.0
-    </Text>
-  </View>
-);
-
-const s = StyleSheet.create({
-  footer: {
-    position: 'absolute',
-    bottom: 40,
-  },
-
-  footer__copy: {
-    fontSize: 12,
-    color: '#b5b5b5',
-  },
-
-  footer__author: {
-    color: '#404040',
-  },
-});
diff --git a/examples/react-navigation/src/components/header/Header.js b/examples/react-navigation/src/components/header/Header.js
index 618d6520..19b306f6 100644
--- a/examples/react-navigation/src/components/header/Header.js
+++ b/examples/react-navigation/src/components/header/Header.js
@@ -1,11 +1,14 @@
 import React from 'react';
-import { View, StyleSheet, Text } from 'react-native';
+import { View, StyleSheet, Text, Linking } from 'react-native';
 
-export const Header = ({ subheading, copy }) => (
+export const Header = ({ subheading }) => (
   <View style={s.header}>
     <Text style={s.header__heading}>Modalize</Text>
     <Text style={s.header__subheading}>{subheading}</Text>
-    <Text style={s.header__copy}>{copy}</Text>
+
+    <Text style={s.header__copy}>
+      Created by <Text style={s.header__author} onPress={() => Linking.openURL('https://github.com/jeremybarbet')}>Jérémy Barbet</Text> — v1.0.0
+    </Text>
   </View>
 );
 
@@ -36,8 +39,12 @@ const s = StyleSheet.create({
     marginTop: 20,
     marginHorizontal: 40,
 
-    fontSize: 16,
+    fontSize: 14,
     color: '#b5b5b5',
     textAlign: 'center',
   },
+
+  header__author: {
+    color: '#404040',
+  },
 });
diff --git a/examples/react-navigation/src/components/modals/AlwaysOpen.js b/examples/react-navigation/src/components/modals/AlwaysOpen.js
new file mode 100644
index 00000000..76be0a1e
--- /dev/null
+++ b/examples/react-navigation/src/components/modals/AlwaysOpen.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Modalize from 'react-native-modalize';
+import faker from 'faker';
+
+export class AlwaysOpen extends React.PureComponent {
+
+  modal = React.createRef();
+
+  renderContent = () => (
+    <View style={s.content}>
+      <Text style={s.content__subheading}>{'Introduction'.toUpperCase()}</Text>
+      <Text style={s.content__heading}>Always open modal!</Text>
+      <Text style={s.content__description}>{faker.lorem.paragraph()}</Text>
+    </View>
+  )
+
+  render() {
+    return (
+      <Modalize
+        ref={this.modal}
+        style={s.content__modal}
+        alwaysOpen={85}
+        handlePosition="inside"
+      >
+        {this.renderContent()}
+      </Modalize>
+    );
+  }
+}
+
+const s = StyleSheet.create({
+  content: {
+    padding: 20,
+  },
+
+  content__modal: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.45,
+    shadowRadius: 16,
+  },
+
+  content__subheading: {
+    marginBottom: 2,
+
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#ccc',
+  },
+
+  content__heading: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#333',
+  },
+
+  content__description: {
+    paddingTop: 10,
+    paddingBottom: 10,
+
+    fontSize: 15,
+    fontWeight: '200',
+    lineHeight: 22,
+    color: '#666',
+  },
+});
diff --git a/package.json b/package.json
index b8fa9e8f..5bc33367 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,8 @@
     "lint": "tslint 'src/**/*.ts?(x)'",
     "postversion": "sh ./post-version.sh",
     "watch:modalize": "yarn tsc --watch",
-    "watch:expo": "concurrently \"yarn watch:modalize\" \"yarn cpx 'lib/**/*' 'examples/expo/node_modules/react-native-modalize/lib' --watch\"",
-    "watch:react-native-navigation": "concurrently \"yarn watch:modalize\" \"yarn cpx 'lib/**/*' 'examples/react-native-navigation/node_modules/react-native-modalize/lib' --watch\"",
+    "watch:expo": "concurrently \"yarn watch:modalize\" \"yarn cpx 'src/**/*' 'examples/expo/node_modules/react-native-modalize' --watch\"",
+    "watch:react-native-navigation": "concurrently \"yarn watch:modalize\" \"yarn cpx 'src/**/*' 'examples/react-native-navigation/node_modules/react-native-modalize' --watch\"",
     "watch:react-navigation": "concurrently \"yarn watch:modalize\" \"yarn cpx 'lib/**/*' 'examples/react-navigation/node_modules/react-native-modalize/lib' --watch\""
   },
   "keywords": [
diff --git a/post-version.sh b/post-version.sh
index 0a26b60b..e1b7d36d 100644
--- a/post-version.sh
+++ b/post-version.sh
@@ -1,10 +1,10 @@
 # Get version from package.json
 PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]')
 
-# Change dependency version on the footer component
-perl -pi -e "s/> — v(.*)/> — v$PACKAGE_VERSION/" ./examples/expo/src/components/footer/Footer.js
-perl -pi -e "s/> — v(.*)/> — v$PACKAGE_VERSION/" ./examples/react-navigation/src/components/footer/Footer.js
-perl -pi -e "s/> — v(.*)/> — v$PACKAGE_VERSION/" ./examples/react-native-navigation/src/components/footer/Footer.js
+# Change dependency version on the header component
+perl -pi -e "s/> — v(.*)/> — v$PACKAGE_VERSION/" ./examples/expo/src/components/header/Header.js
+perl -pi -e "s/> — v(.*)/> — v$PACKAGE_VERSION/" ./examples/react-navigation/src/components/header/Header.js
+perl -pi -e "s/> — v(.*)/> — v$PACKAGE_VERSION/" ./examples/react-native-navigation/src/components/header/Header.js
 
 # Remove default tag from npm version
 git tag -d v$PACKAGE_VERSION
diff --git a/src/Modalize.tsx b/src/Modalize.tsx
index 9972efa5..0f326349 100644
--- a/src/Modalize.tsx
+++ b/src/Modalize.tsx
@@ -105,6 +105,10 @@ export default class Modalize extends React.Component<IProps, IState> {
   componentDidMount() {
     this.onContentViewChange();
 
+    if (this.props.alwaysOpen) {
+      this.onAnimateOpen(this.props.alwaysOpen);
+    }
+
     BackHandler.addEventListener('hardwareBackPress', this.onBackPress);
     Keyboard.addListener('keyboardWillShow', this.onKeyboardShow);
     Keyboard.addListener('keyboardWillHide', this.onKeyboardHide);
@@ -211,10 +215,10 @@ export default class Modalize extends React.Component<IProps, IState> {
     return style && style.position === 'absolute';
   }
 
-  private onAnimateOpen = (): void => {
+  private onAnimateOpen = (alwaysOpen?: number): void => {
     const { onOpened, height, useNativeDriver } = this.props;
     const { overlay, modalHeight } = this.state;
-    const toValue = height ? modalHeight - height : 0;
+    const toValue = alwaysOpen ? modalHeight - alwaysOpen : height ? modalHeight - height : 0;
 
     this.setState({
       isVisible: true,
@@ -223,7 +227,7 @@ export default class Modalize extends React.Component<IProps, IState> {
 
     Animated.parallel([
       Animated.timing(overlay, {
-        toValue: 1,
+        toValue: alwaysOpen ? 0 : 1,
         duration: 280,
         easing: Easing.ease,
         useNativeDriver,
@@ -335,8 +339,8 @@ export default class Modalize extends React.Component<IProps, IState> {
   }
 
   private onHandleChildren = ({ nativeEvent }: PanGestureHandlerStateChangeEvent): void => {
-    const { height, useNativeDriver, adjustToContentHeight } = this.props;
-    const { lastSnap, contentHeight } = this.state;
+    const { height, useNativeDriver, adjustToContentHeight, alwaysOpen } = this.props;
+    const { lastSnap, contentHeight, modalHeight, overlay } = this.state;
     const { velocityY, translationY } = nativeEvent;
 
     this.setState({ enableBounces: this.beginScrollYValue > 0 || translationY < 0 });
@@ -345,7 +349,7 @@ export default class Modalize extends React.Component<IProps, IState> {
       const toValue = translationY - this.beginScrollYValue;
       let destSnapPoint = 0;
 
-      if (height) {
+      if (height || alwaysOpen) {
         const dragToss = 0.05;
         const endOffsetY = lastSnap + toValue + dragToss * velocityY;
 
@@ -356,7 +360,11 @@ export default class Modalize extends React.Component<IProps, IState> {
             destSnapPoint = snap;
             this.willCloseModalize = false;
 
-            if (snap === this.snapEnd) {
+            if (alwaysOpen) {
+              destSnapPoint = modalHeight - alwaysOpen;
+            }
+
+            if (snap === this.snapEnd && !alwaysOpen) {
               this.willCloseModalize = true;
               this.close();
             }
@@ -364,7 +372,8 @@ export default class Modalize extends React.Component<IProps, IState> {
         });
       } else if (
         translationY > (adjustToContentHeight ? contentHeight / 3 : THRESHOLD) &&
-        this.beginScrollYValue === 0
+        this.beginScrollYValue === 0 &&
+        !alwaysOpen
       ) {
         this.willCloseModalize = true;
         this.close();
@@ -380,6 +389,15 @@ export default class Modalize extends React.Component<IProps, IState> {
       this.translateY.flattenOffset();
       this.dragY.setValue(0);
 
+      if (alwaysOpen) {
+        Animated.timing(overlay, {
+          toValue: Number(destSnapPoint <= 0),
+          duration: 280,
+          easing: Easing.ease,
+          useNativeDriver,
+        }).start();
+      }
+
       Animated.spring(this.translateY, {
         velocity: velocityY,
         tension: 50,
@@ -598,8 +616,9 @@ export default class Modalize extends React.Component<IProps, IState> {
   }
 
   private renderOverlay = (): React.ReactNode => {
-    const { useNativeDriver, overlayStyle } = this.props;
+    const { useNativeDriver, overlayStyle, alwaysOpen } = this.props;
     const { showContent } = this.state;
+    const pointerEvents = alwaysOpen ? 'box-none' : 'auto';
 
     return (
       <PanGestureHandler
@@ -612,7 +631,10 @@ export default class Modalize extends React.Component<IProps, IState> {
         )}
         onHandlerStateChange={this.onHandleChildren}
       >
-        <Animated.View style={s.overlay}>
+        <Animated.View
+          style={s.overlay}
+          pointerEvents={pointerEvents}
+        >
           {showContent && (
             <TapGestureHandler
               ref={this.modalOverlayTap}
@@ -620,7 +642,10 @@ export default class Modalize extends React.Component<IProps, IState> {
               simultaneousHandlers={this.modalOverlay}
               onHandlerStateChange={this.onHandleOverlay}
             >
-              <Animated.View style={[s.overlay__background, overlayStyle, this.overlayBackground]} />
+              <Animated.View
+                style={[s.overlay__background, overlayStyle, this.overlayBackground]}
+                pointerEvents={pointerEvents}
+              />
             </TapGestureHandler>
           )}
         </Animated.View>
@@ -629,16 +654,17 @@ export default class Modalize extends React.Component<IProps, IState> {
   }
 
   private renderModalize = (): React.ReactNode => {
-    const { style, adjustToContentHeight, keyboardAvoidingBehavior } = this.props;
+    const { style, adjustToContentHeight, keyboardAvoidingBehavior, alwaysOpen } = this.props;
     const { isVisible, lastSnap, showContent } = this.state;
     const enabled = this.isIos && adjustToContentHeight;
+    const pointerEvents = alwaysOpen ? 'box-none' : 'auto';
 
     if (!isVisible) {
       return null;
     }
 
     return (
-      <View style={s.modalize}>
+      <View style={s.modalize} pointerEvents={pointerEvents}>
         <TapGestureHandler
           ref={this.modal}
           maxDurationMs={100000}
diff --git a/src/Options.ts b/src/Options.ts
index 152931ef..9486fd39 100644
--- a/src/Options.ts
+++ b/src/Options.ts
@@ -11,6 +11,11 @@ export interface IProps {
    */
   height?: number;
 
+  /**
+   * Using this props will show the modal all the time, and the number represents how expanded the modal has to be
+   */
+  alwaysOpen?: number;
+
   /**
    * Define where the handle on top of the modal should be positioned.
    * @default 'outside'