This synthetic event is reused for performance reasons

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

[Tanujgarg]

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

[huszy]

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