Some fixes and new props #115

xxsnakerxx · 2020-01-16T23:53:41Z

fixed keyboard handling
fixed panning on Android (HeaderComponent)
added new props keyboardAvoidingOffset, panGestureEnabled, 'closeOnOverlayTap'

jeremybarbet · 2020-01-18T10:40:33Z

Hey! thanks for that, this is very good stuff! I will look into it next week and try it out on apps! Cheers

jeremybarbet · 2020-01-20T08:57:02Z

docs/EXAMPLES.md

@@ -29,7 +29,7 @@ yarn start
 ```bash
 cd examples/react-native-navigation
 yarn ios (or android)
-cd ../..
+cd ../


The package json containing the watch script is on the root of the project, so it's correct to be 2 levels higher

jeremybarbet · 2020-01-20T19:17:45Z

src/index.tsx

@@ -186,18 +190,23 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
    const { withHandle } = this.props;

    if (!withHandle) {
-      return 20;
+      return 0;


By removing the 20px, the modal is now stuck to the top of the screen without margin. It was intentional to have this space when the handle is not shown. Even though, I'm not again a props to change this margin

jeremybarbet · 2020-01-20T19:20:19Z

src/index.tsx

+    const { modalHeight, headerHeight, footerHeight } = this.state;
+    const contentViewHeight: ViewStyle[] = [];
+
+    if (!adjustToContentHeight) {


When I tried to open the simple content example on Android, and press inside the input, the modal went back down, and wasn't focus on the input, and I couldn't scroll to it. For iOS it was all good

jeremybarbet · 2020-01-20T19:23:50Z

src/index.tsx

-          style={{ marginBottom }}
-          enabled={enabled}
-        >
+        <Animated.View style={!adjustToContentHeight ? s.flex1 : null}>


I think the issue related to the modal that goes down on Android is because of this keyboard avoiding view getting remove. But I just tried it quickly, so not sure

jeremybarbet · 2020-01-20T19:25:13Z

src/styles.ts

@@ -90,4 +90,8 @@ export default StyleSheet.create({

    backgroundColor: 'rgba(0, 0, 0, 0.65)',
  },
+
+  flex1: {


Can you rename that into children?

This reverts commit 8696e78.

xxsnakerxx · 2020-01-21T20:09:42Z

@jeremybarbet please check the next changes, changed a way to handle the modal height

jeremybarbet

I know the keyboard behavior was already broken on Android, but after trying it out on the examples, it still doesn't translate the modal when the keyboard appears.

The rest of the changes looks good to me! Just let me know if you can fix the keyboard issue on Android or need a bit of help 👍🏻

jeremybarbet · 2020-01-22T10:02:30Z

src/index.tsx

@@ -116,34 +122,30 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
      isVisible: false,
      showContent: true,
      overlay: new Animated.Value(0),
-      modalHeight,
+      modalHeight: props.adjustToContentHeight ? undefined : modalHeight,


Suggested change

modalHeight: props.adjustToContentHeight ? undefined : modalHeight,

modalHeight: props.adjustToContentHeight ? 0 : modalHeight,

From what I see, you check all the time (at least from what I saw) modalHeight || 0 in the following file. Wouldn't be faster to define it at first? and you wouldn't have to do modalHeight || 0 anywhere else

modal height undefined on the first mount works as height: auto, if we set the height to 0 onLayout will return height:0 every time

jeremybarbet · 2020-01-22T10:04:11Z

src/index.tsx

@@ -342,35 +364,6 @@ export class Modalize<FlatListItem = any, SectionListItem = any> extends React.C
    );
  };

-  private onContentViewChange = (keyboardHeight?: number): void => {


Very nice to get rid of that 👍

jeremybarbet · 2020-01-22T10:05:09Z

src/index.tsx

    return (
-      <View style={s.component} onLayout={onLayout} pointerEvents="box-none">
+      <View style={s.component} pointerEvents="box-none">


I would say that the View is not necessary here anymore since you removed the onLayout props

I agree, but I was afraid to clean up, I'll try

jeremybarbet · 2020-01-22T10:06:49Z

src/index.tsx

+    const keyboardAvoidingViewProps: KeyboardAvoidingViewProps = {
+      keyboardVerticalOffset: keyboardAvoidingOffset,
+      behavior: keyboardAvoidingBehavior || 'padding',
+      enabled,


Suggested change

enabled,

isIos,

Can you straight isIos and remove enabled variable

jeremybarbet · 2020-01-22T10:07:36Z

src/index.tsx

+      style: [s.modalize__content, this.modalizeContent, modalStyle],
+    };
+
+    if (!isIos) {


Why are you not running the function on ios?

Because if pass onLayout prop to KAW on iOS, it overrides onLayout logic in KAW and it stops working(RN bug) https://github.com/facebook/react-native/blob/8553e1acc4195479190971cc7a3ffaa0ed37a5e0/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L119

xxsnakerxx · 2020-01-22T10:29:55Z

@jeremybarbet

it still doesn't translate the modal when the keyboard appears

could you give me a screenshot or video, I tested examples on both platforms, and it worked on both

xxsnakerxx · 2020-01-22T10:52:09Z

@jeremybarbet videos

ios
android

jeremybarbet · 2020-01-22T15:11:52Z

Here you go: https://share.getcloudapp.com/nOum7QAb This is using the expo example, I tried it out on react-navigation and it works well 👍🏻

xxsnakerxx · 2020-01-22T16:15:47Z

@jeremybarbet LOL, if add

"androidStatusBar": {
      "backgroundColor": "#000000"
    },

to expo config, it works as expected

I will add the new property avoidKeyboardLikeIOS which help in that case

jeremybarbet · 2020-01-23T11:33:47Z

Wow okay that's good to know!

Don't you think avoidKeyboardLikeIOS should default to true on Android as well?

After that, I'm good to merge. I'll probably release a rc version, so I will try on a couple of production apps I have, and make sure it doesnt break any edges cases we could have forget 👌🏻

xxsnakerxx · 2020-01-23T11:39:52Z

Don't you think avoidKeyboardLikeIOS should default to true on Android as well?

No, because it's a bug in expo, for default android apps it should be false

jeremybarbet · 2020-01-23T12:46:36Z

Okay, got it. I will find some time to merge and release. Thanks for the contributions!

* fix: header component pan gesture handler for Android * feat: added new props and fixed keyboard handling * fix: options import for case sensetive fs * docs: fixed examples * docs: added new props * fix: examples * Revert "docs: fixed examples" This reverts commit 8696e78. * fix: watch:react-navigation script * fix: simplified handling of the modal height and keyboard handling * fix: keyboardAvoidingView enabled prop * fix: removed unnecessary component wrapper * feat: added the new avoidKeyboardLikeIOS prop * fix: updated expo examples

xxsnakerxx added 6 commits January 17, 2020 00:38

fix: header component pan gesture handler for Android

c81b671

feat: added new props and fixed keyboard handling

f4303d6

fix: options import for case sensetive fs

86643ac

docs: fixed exapmples

8696e78

docs: added new props

7d8240d

fix: examples

434ae53

xxsnakerxx requested a review from jeremybarbet January 17, 2020 15:13

jeremybarbet requested changes Jan 20, 2020

View reviewed changes

xxsnakerxx added 3 commits January 20, 2020 20:43

Revert "docs: fixed exapmples"

a521b8b

This reverts commit 8696e78.

fix: watch:react-navigation script

8a3c9dd

fix: simplified handling of the modal height and keyboard handling

d5d6025

jeremybarbet reviewed Jan 22, 2020

View reviewed changes

xxsnakerxx added 2 commits January 22, 2020 11:32

fix: keyboardAvoidingView enabled prop

d26b99d

fix: removed unnecessary component wrapper

8dffe3d

xxsnakerxx added 2 commits January 22, 2020 17:26

feat: added the new avoidKeyboardLikeIOS prop

b6d95f3

fix: updated expo examples

ea3d21d

jeremybarbet merged commit 7563c82 into jeremybarbet:master Jan 23, 2020

xxsnakerxx deleted the keyboard-gestures-fixes branch January 23, 2020 14:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Some fixes and new props #115

Some fixes and new props #115

xxsnakerxx commented Jan 16, 2020

jeremybarbet commented Jan 18, 2020

jeremybarbet Jan 20, 2020

jeremybarbet Jan 20, 2020

jeremybarbet Jan 20, 2020

jeremybarbet Jan 20, 2020

jeremybarbet Jan 20, 2020

xxsnakerxx commented Jan 21, 2020

jeremybarbet left a comment

jeremybarbet Jan 22, 2020

xxsnakerxx Jan 22, 2020

jeremybarbet Jan 22, 2020

jeremybarbet Jan 22, 2020

xxsnakerxx Jan 22, 2020

jeremybarbet Jan 22, 2020

jeremybarbet Jan 22, 2020

xxsnakerxx Jan 22, 2020

xxsnakerxx commented Jan 22, 2020

xxsnakerxx commented Jan 22, 2020

jeremybarbet commented Jan 22, 2020

xxsnakerxx commented Jan 22, 2020

jeremybarbet commented Jan 23, 2020

xxsnakerxx commented Jan 23, 2020

jeremybarbet commented Jan 23, 2020

	modalHeight: props.adjustToContentHeight ? undefined : modalHeight,
	modalHeight: props.adjustToContentHeight ? 0 : modalHeight,

Some fixes and new props #115

Some fixes and new props #115

Conversation

xxsnakerxx commented Jan 16, 2020

jeremybarbet commented Jan 18, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xxsnakerxx commented Jan 21, 2020

jeremybarbet left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xxsnakerxx commented Jan 22, 2020

xxsnakerxx commented Jan 22, 2020

jeremybarbet commented Jan 22, 2020

xxsnakerxx commented Jan 22, 2020

jeremybarbet commented Jan 23, 2020

xxsnakerxx commented Jan 23, 2020

jeremybarbet commented Jan 23, 2020