react-native-modalize

react-native-modalize copied to clipboard

ERROR Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property nativeEvent on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://reactjs.org/link/event-pooling for more information. WARN Possible Unhandled Promise Rejection (id: 0): TypeError: null is not an object (evaluating '_ref2.nativeEvent.layout')

Reproduce

<Modalize
       modalHeight={600}
       alwaysOpen={130}
       withHandle
       modalStyle={homeModalizeStyles.modalStyle}
       HeaderComponent={position === 'initial' ? <HomeFooter /> : <HomeHeader />}
       FooterComponent={position === 'top' && <HomeFooter />}
       handleStyle={homeModalizeStyles.handleStyle}
       childrenStyle={homeModalizeStyles.childrenStyle}
       onPositionChange={setPosition}
       panGestureComponentEnabled
       flatListProps={{
         data: menu,
         keyExtractor: (item) => item.key,
         showsVerticalScrollIndicator: false,
         numColumns: 3,
         renderItem: ({item}) => {
           return (
             <View style={homeModalizeStyles.alignCenter}>
               <TouchableWithoutFeedback onPress={item.onPress}>
                 <View style={homeModalizeStyles.iconRounded}>
                   {item.isIcon ? (
                     <Icon name={item.icon} size={16} color={colors.black} />
                   ) : (
                     <MaterialCommunityIcons name={item.icon} color={colors.black} size={18} />
                   )}
                 </View>
               </TouchableWithoutFeedback>
               <View style={homeModalizeStyles.labelContainer}>
                 <Text style={homeModalizeStyles.label}>{item.title}</Text>
                 <Text style={homeModalizeStyles.label}>{item.subTitle}</Text>
               </View>
             </View>
           )
         },
       }}
     />

Dependencies:

• react-native-modalize 2.1.1
• react-native 0.70.1
• react-native-gesture-handler ^2.6.1
• react-native-navigation: not using

I'm having the same problem after updating to 0.70.1.

same

having the same problem after upgrading to 0.70.3

same

Same here!

Same here, did anyone manage to solve it?

same here

Same

I downgrade the expo version to 46.0.0 and the error is gone

@ckswopnera downgrade isn't option. I'm not using expo. downgrade version cause error in Xcode and another things.

same here. react-native: 0.70.3 react-native-gesture-handler: ^2.8.0 react-native-modalize: ^2.1.1

btw on android I can't scroll down to close modal, only by calling .close() function. don't know if it's related

in my case, this error only occurs when I remove the adjustToContentHeight property, if anyone else can test if this is it?!

@willLopesz what version of gesture-handler? In my case, I'm not using adjustToContentHeight prop

I’m not using adjustToContentHeight and still getting the error

Guys,

In my investigations I found a bug in the onLayout prop of the KeyboardAvoidingView component, which was corrected and merged here:

https://github.com/facebook/react-native/issues/32608

In this lib it is used here in the code:

const AnimatedKeyboardAvoidingView = Animated.createAnimatedComponent(KeyboardAvoidingView);

According to that comment the problems with the Animation.

https://github.com/facebook/react-native/issues/28775#issuecomment-668831226

I removed it and posted it on my github.

Can anyone help me test?

react-native-modalize: https://github.com/mMarcos208/react-native-modalize

Hi, We are using the following patch in our project while it's getting fixed. It persists the original event before the LayoutAnimation occurs. It's far from perfect but works for us.

diff --git a/node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js b/node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js
index 6a343d8..474b2ec 100644
--- a/node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js
+++ b/node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js
@@ -111,6 +111,10 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
       this._initialFrameHeight = this._frame.height;
     }
 
+    if (this.props.onLayout) {
+      event.persist();
+    }
+
     if (wasFrameNull) {
       await this._updateBottomIfNecessary();
     }

Hi, We are using the following patch in our project while it's getting fixed. It persists the original event before the LayoutAnimation occurs. It's far from perfect but works for us.

diff --git a/node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js b/node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js
index 6a343d8..474b2ec 100644
--- a/node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js
+++ b/node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js
@@ -111,6 +111,10 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
       this._initialFrameHeight = this._frame.height;
     }
 
+    if (this.props.onLayout) {
+      event.persist();
+    }
+
     if (wasFrameNull) {
       await this._updateBottomIfNecessary();
     }

For me this patch causes the error is no longer being thrown. However the modal can only be closed with close(), not via swipe.

Edit: I accidentally was missing the GestureHandlerRootView in my main App.tsx file. Adding fixed the issue with swipe events not working.

I have a similar problem. There is no re-rendering of elements inside a modal on Android =(

react: 18.1.0 react-native: 0.70.6 react-native-modalize: 2.1.1 react-native-portalize: 1.0.7 react-native-gesture-handler: 2.8.0

add adjustToContentHeight props with true value and set height using childrenStyle props

add adjustToContentHeight props with true value and set height using childrenStyle props

But what if i dont want to set the height fixed?

I'm using Expo. I went to "node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js"

where is: if (this.props.onLayout) { this.props.onLayout(event); }

replaces to: if (this.props.onLayout) { event.persist(); //this.props.onLayout(event); }

It worked here!!

same problem here. does anyone manage to fix this ?

add adjustToContentHeight props with true value and set height using childrenStyle props

hacky but working and fixed height is preserved.

for example replace

<Modalize
  modalHeight={370}
  ...
/>

with

<Modalize
  adjustToContentHeight
  childrenStyle={{ height: 370 }}
  ...
/>

@RaimisonMorais

the error stoped but the modal dont open if i press back button and try open the modal again.

add adjustToContentHeight props with true value and set height using childrenStyle props

hacky but working and fixed height is preserved.

for example replace

<Modalize
  modalHeight={370}
  ...
/>

with

<Modalize
  adjustToContentHeight
  childrenStyle={{ height: 370 }}
  ...
/>

Thanks, works for me too! The snapPoint prop is no longer needed and has to be left empty.

mesmo aqui. react-native: 0.70.3 react-native-gesture-handler: ^2.8.0 react-native-modalize:^2.1.1

btw no android não consigo rolar para baixo para fechar o modal, apenas chamou .close()a função. não sei se está relacionado

Basta fazer isto em seu App.js

<GestureHandlerRootView style={{ flex: 1 }}> <View/> </GestureHandlerRootView>

add adjustToContentHeight props with true value and set height using childrenStyle props

hacky but working and fixed height is preserved.

for example replace

<Modalize
  modalHeight={370}
  ...
/>

with

<Modalize
  adjustToContentHeight
  childrenStyle={{ height: 370 }}
  ...
/>

@jnoleau Thank you. Work for me

add adjustToContentHeight props with true value and set height using childrenStyle props

hacky but working and fixed height is preserved.

for example replace

<Modalize
  modalHeight={370}
  ...
/>

with

<Modalize
  adjustToContentHeight
  childrenStyle={{ height: 370 }}
  ...
/>

This also solves a bit of a memory/performance issue related to the initial problem.

add adjustToContentHeight props with true value and set height using childrenStyle props

this worked for me!