“Function components cannot be given refs” when using react-native-popover-view in Expo SDK 52

[eelnar]

Describe the bug
When using react-native-popover-view with Expo SDK 52, I’m encountering the following warning/error:
"Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?"

Device/Setup Info:

• Device: iPhone 15
• OS: iOS 18
• react-native version: 0.74.5.
• react-native-popover-view version: 6.0.0

[AdamGerthel]

Can you provide a reproducible example? Have you had this issue with previous versions or was it recently introduced?

[eelnar]

Hey Adam - sorry for the late response, for some reason, I missed your comment.

Here's code snippet:

<Popover
                   isVisible={isPopoverVisible}
                   onRequestClose={() => setIsPopoverVisible(false)}
                   from={(
                       <TouchableWithoutFeedback onPress={() => setIsPopoverVisible(true)}>
                           <View style={styles.flagOuterContainer}>
                               <View style={styles.flagInnerContainer}>
                                   <Text>
                                       {GetCountryFlag(experience?.country)}
                                   </Text>
                               </View>
                           </View>
                       </TouchableWithoutFeedback>
                   )}
               >
                   <TouchableWithoutFeedback onPress={() => {
                       setIsPopoverVisible(false);
                       handleNavigateToAreaExperiencesScreen();
                   }}>
                       <View>
                           <Text style={styles.countryPopOverDescText}>
                               {_renderLocationPopoverText(experience)}
                           </Text>
                       </View>
                   </TouchableWithoutFeedback>
           </Popover>

Since day one, I've been using version "5.1.9". It works great on expo: "51.0.39" but when I upgraded to SDK version 52, app crashed cuz of "react-native-popover-view". This is really cool library, thank you for building it. If you could resolve that issue it would be fantastic.

[dumptyd]

Using the component as a function call instead of JSX resolved the issue for me

from={<SomeComponent propA={whatever}>} -> from={SomeComponent({ propA: whatever })}

But it would be nice to have it work with JSX too.