feat: enable horizontal scrolling of ScrollView from RN (jeremybarbet…

…#121) * fix: tap on text input clear button on ios * fix: enable nested horizontal scroll (ScrollView from RN) * fix: statusbar.currentheight is available on android only * fix: avoid_keyboard_like_ios should be false on android by default * feat: modal top offset prop
marcinolek · Feb 20, 2020 · d33f514 · d33f514
1 parent d6dc13a
commit d33f514
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 24 deletions.
diff --git 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 {
         <Text style={s.content__subheading}>{'Last step'.toUpperCase()}</Text>
         <Text style={s.content__heading}>Send the message?</Text>
         <Text style={s.content__description}>{faker.lorem.paragraph()}</Text>
-        <TextInput style={s.content__input} placeholder="Type your username" />
+        <TextInput
+          style={s.content__input}
+          placeholder="Type your username"
+          clearButtonMode="while-editing"
+        />
 
         <TouchableOpacity style={s.content__button} activeOpacity={0.9} onPress={this.closeModal}>
           <Text style={s.content__buttonText}>{'Send'.toUpperCase()}</Text>
@@ -35,7 +39,7 @@ export class FixedContent extends React.PureComponent {
 
   render() {
     return (
-      <Modalize ref={this.modal} adjustToContentHeight avoidKeyboardLikeIOS>
+      <Modalize ref={this.modal} adjustToContentHeight>
         {this.renderContent()}
       </Modalize>
     );

diff --git 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 {
           ))}
       </ScrollView>
 
-      <TextInput style={s.content__input} placeholder="Type your username" />
+      <TextInput
+        style={s.content__input}
+        placeholder="Type your username"
+        clearButtonMode="while-editing"
+      />
     </View>,
   ];
 
@@ -56,7 +59,6 @@ export class SimpleContent extends React.PureComponent {
           showsVerticalScrollIndicator: false,
           stickyHeaderIndices: [0],
         }}
-        avoidKeyboardLikeIOS
       >
         {this.renderContent()}
       </Modalize>

diff --git 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 {
         <Text style={s.content__subheading}>{'Last step'.toUpperCase()}</Text>
         <Text style={s.content__heading}>Send the message?</Text>
         <Text style={s.content__description}>{faker.lorem.paragraph()}</Text>
-        <TextInput style={s.content__input} placeholder="Type your username" />
+        <TextInput
+          style={s.content__input}
+          placeholder="Type your username"
+          clearButtonMode="while-editing"
+        />
 
         <TouchableOpacity style={s.content__button} activeOpacity={0.9} onPress={this.closeModal}>
           <Text style={s.content__buttonText}>{'Send'.toUpperCase()}</Text>
@@ -48,7 +52,6 @@ export class FixedContent extends React.PureComponent {
         ref={this.modal}
         onClosed={this.onClosed}
         adjustToContentHeight
-        avoidKeyboardLikeIOS
       >
         {this.renderContent()}
       </Modalize>

diff --git 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 {
           ))}
       </ScrollView>
 
-      <TextInput style={s.content__input} placeholder="Type your username" />
+      <TextInput
+        style={s.content__input}
+        placeholder="Type your username"
+        clearButtonMode="while-editing"
+      />
     </View>,
   ];
 
@@ -66,7 +69,6 @@ export class SimpleContent extends React.PureComponent {
           showsVerticalScrollIndicator: false,
           stickyHeaderIndices: [0],
         }}
-        avoidKeyboardLikeIOS
       >
         {this.renderContent()}
       </Modalize>

diff --git 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 {
         <Text style={s.content__subheading}>{'Last step'.toUpperCase()}</Text>
         <Text style={s.content__heading}>Send the message?</Text>
         <Text style={s.content__description}>{faker.lorem.paragraph()}</Text>
-        <TextInput style={s.content__input} placeholder="Type your username" />
+        <TextInput
+          style={s.content__input}
+          placeholder="Type your username"
+          clearButtonMode="while-editing"
+        />
 
         <TouchableOpacity style={s.content__button} activeOpacity={0.9} onPress={this.closeModal}>
           <Text style={s.content__buttonText}>{'Send'.toUpperCase()}</Text>
@@ -35,7 +39,7 @@ export class FixedContent extends React.PureComponent {
 
   render() {
     return (
-      <Modalize ref={this.modal} adjustToContentHeight avoidKeyboardLikeIOS>
+      <Modalize ref={this.modal} adjustToContentHeight>
         {this.renderContent()}
       </Modalize>
     );

diff --git 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 {
           ))}
       </ScrollView>
 
-      <TextInput style={s.content__input} placeholder="Type your username" />
+      <TextInput
+        style={s.content__input}
+        placeholder="Type your username"
+        clearButtonMode="while-editing"
+      />
     </View>,
   ];
 
@@ -56,7 +59,6 @@ export class SimpleContent extends React.PureComponent {
           showsVerticalScrollIndicator: false,
           stickyHeaderIndices: [0],
         }}
-        avoidKeyboardLikeIOS
       >
         {this.renderContent()}
       </Modalize>

diff --git a/src/index.tsx b/src/index.tsx
@@ -48,6 +48,10 @@ export class Modalize<FlatListItem = any, SectionListItem = any> 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<FlatListItem = any, SectionListItem = any> extends React.C
   constructor(props: IProps<FlatListItem, SectionListItem>) {
     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<FlatListItem = any, SectionListItem = any> extends React.C
         onGestureEvent={Animated.event([{ nativeEvent: { translationY: this.dragY } }], {
           useNativeDriver,
         })}
+        minDist={20}
+        activeOffsetY={20}
+        activeOffsetX={20}
         onHandlerStateChange={this.onHandleChildren}
       >
         <Animated.View
@@ -726,7 +730,10 @@ avoidKeyboardLikeIOS,
           ref={this.modal}
           maxDurationMs={100000}
           maxDeltaY={lastSnap}
-          enabled={panGestureEnabled}
+          enabled={Platform.select({
+            ios: false,
+            android: panGestureEnabled,
+          })}
         >
           <View style={s.modalize__wrapper} pointerEvents="box-none">
             {showContent && (

diff --git a/src/options.ts b/src/options.ts
@@ -46,6 +46,11 @@ export interface IProps<FlatListItem = any, SectionListItem = any> {
    */
   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
    */