This synthetic event is reused for performance reasons #451

mMarcos208 · 2022-09-16T14:36:16Z

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

The text was updated successfully, but these errors were encountered:

Tanujgarg · 2022-09-21T11:58:12Z

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

ignaciosantise · 2022-10-24T18:40:25Z

having the same problem after upgrading to 0.70.3

ckswopnera · 2022-11-11T04:40:02Z

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

mMarcos208 · 2022-11-11T11:56:58Z

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

tacianoscur · 2022-11-11T23:44:47Z

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

tacianoscur · 2022-11-11T23:47:39Z

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

willLopesz · 2022-11-16T16:54:33Z

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

mMarcos208 · 2022-11-16T18:40:14Z

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

tacianoscur · 2022-11-16T19:04:44Z

I’m not using adjustToContentHeight and still getting the error

mMarcos208 · 2022-11-18T15:13:43Z

Guys,

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

facebook/react-native#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.

facebook/react-native#28775 (comment)

I removed it and posted it on my github.

Can anyone help me test?

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

huszy · 2022-11-20T22:18:31Z

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();
     }

rakane · 2022-12-13T22:36:16Z

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.

evald24 · 2022-12-16T07:14:33Z

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

rizkhal · 2022-12-19T07:25:17Z

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

mariomurrent-softwaresolutions · 2023-01-16T07:55:57Z

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

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

RaimisonMorais · 2023-01-19T20:48:24Z

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!!

dukizwe · 2023-01-28T06:41:30Z

same problem here. does anyone manage to fix this ?

jnoleau · 2023-02-16T09:25:06Z

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 }}
  ...
/>

Vitor-SO · 2023-02-20T14:41:31Z

@RaimisonMorais

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

devsales · 2023-04-05T11:20:41Z

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.

gilceniosantos · 2023-05-06T03:32:19Z

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>

kmsayem12 · 2023-06-19T07:58:01Z

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

chrisedington · 2023-08-11T08:36:20Z

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.

GabrielMerigo · 2024-01-04T18:47:50Z

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

this worked for me!

ngdbao · 2024-02-25T07:12:07Z

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 }}
  ...
/>

It indeed ending error log, but this way prevents scrollable-gesture in child flatlist

danieljimol · 2024-04-29T08:57:14Z

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.

This worked for me, thanks.

Areeb0206 · 2024-08-15T03:48:31Z

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 }}
  ...
/>

what about scrolling?

Areeb0206 · 2024-08-15T04:07:39Z

I utilized a promise to coerce the module to believe that avoidKeyboardLikeIOS is true on modal rendering, and then flipped to false, resulting in the desired performance on Android.

const returnTrueThenFalse = () => new Promise(resolve => setTimeout(() => resolve(false), 1000));
const handleAvoidKeyboardLikeIOS = () => { return isIOS ? true : (returnTrueThenFalse().then() as unknown as boolean); };
avoidKeyboardLikeIOS={handleAvoidKeyboardLikeIOS()}

Scrolling will operate in one direction. If you were scrolling, you can travel both directions, but when you want to scroll to the top, it won't.

Areeb0206 · 2024-08-15T04:12:54Z

onClose={() => {}}
withReactModal={true}

add these props
scrolling will work and the error will be removed
"expo": "~51.0.28",
"react-native-modalize": "^2.1.1",
"react-native": "0.74.5",

Areeb0206 · 2024-08-15T04:14:30Z

I utilized a promise to coerce the module to believe that avoidKeyboardLikeIOS is true on modal rendering, and then flipped to false, resulting in the desired performance on Android.

const returnTrueThenFalse = () => new Promise(resolve => setTimeout(() => resolve(false), 1000)); const handleAvoidKeyboardLikeIOS = () => { return isIOS ? true : (returnTrueThenFalse().then() as unknown as boolean); }; avoidKeyboardLikeIOS={handleAvoidKeyboardLikeIOS()}

Scrolling will operate in one direction. If you were scrolling, you can travel both directions, but when you want to scroll to the top, it won't.

this will remove error,

onClose={() => {}}
withReactModal={true}

"expo": "~51.0.28",
"react-native-modalize": "^2.1.1",
"react-native": "0.74.5",

and this will enable scrolling

codeserk · 2024-11-24T22:08:12Z

any solution for this? nothing in the thread seems to work for my case:
I have a FlatList, so I really need to remove adjustToContentHeight because otherwise the behavior is quite broken if I try to scroll up(model gets closed instead of scrolling in the flat list) - and with the adjustToContentHeight off + static height I have this error/warning?

This comment was marked as spam.

Sign in to view

ChrisEdson mentioned this issue Nov 29, 2022

Crash on Android with React Native 0.70 #460

Open

This synthetic event is reused for performance reasons #451

This synthetic event is reused for performance reasons #451

Comments

mMarcos208 commented Sep 16, 2022 • edited Loading

Tanujgarg commented Sep 21, 2022 • edited Loading

This comment was marked as spam.

ignaciosantise commented Oct 24, 2022

This comment was marked as spam.

This comment was marked as spam.

This comment was marked as spam.

This comment was marked as spam.

This comment was marked as spam.

ckswopnera commented Nov 11, 2022

mMarcos208 commented Nov 11, 2022

tacianoscur commented Nov 11, 2022

tacianoscur commented Nov 11, 2022

willLopesz commented Nov 16, 2022

mMarcos208 commented Nov 16, 2022

tacianoscur commented Nov 16, 2022

mMarcos208 commented Nov 18, 2022

huszy commented Nov 20, 2022

rakane commented Dec 13, 2022 • edited Loading

evald24 commented Dec 16, 2022

rizkhal commented Dec 19, 2022

mariomurrent-softwaresolutions commented Jan 16, 2023

RaimisonMorais commented Jan 19, 2023

dukizwe commented Jan 28, 2023

jnoleau commented Feb 16, 2023

Vitor-SO commented Feb 20, 2023

devsales commented Apr 5, 2023

gilceniosantos commented May 6, 2023

kmsayem12 commented Jun 19, 2023

chrisedington commented Aug 11, 2023

GabrielMerigo commented Jan 4, 2024

ngdbao commented Feb 25, 2024

danieljimol commented Apr 29, 2024

Areeb0206 commented Aug 15, 2024

Areeb0206 commented Aug 15, 2024

Areeb0206 commented Aug 15, 2024

Areeb0206 commented Aug 15, 2024 • edited Loading

codeserk commented Nov 24, 2024

mMarcos208 commented Sep 16, 2022 •

edited

Loading

Tanujgarg commented Sep 21, 2022 •

edited

Loading

rakane commented Dec 13, 2022 •

edited

Loading

Areeb0206 commented Aug 15, 2024 •

edited

Loading