Component 'NVSearchBar' re-registered direct event 'topChangeText' as a bubbling event

[advancedtw]

I'm running the latest version and I get this error when I try to launch a scene. Only IOS is complaining.

deps

simulator running IOS 17.5 , iphone 15 pro 
"react-native": "0.75.4", new arch enabled 
"navigation": "^6.2.0",
"navigation-react": "^4.5.1",
"navigation-react-native": "^9.22.2"

in the code below HomeScreen can be any view it doesn't seem to affect the result.
I've tried removing as much stuff as possible but again the bug is still there

export const Stack = () => {
  const { theme } = useStyles(); // unistyles, tried without didn't make a difference
  return (
    <NavigationHandler stateNavigator={stateNavigator}>
      <NavigationStack
        customAnimation
        unmountStyle={{ type: "translate", startX: "100%" }}
        backgroundColor={() => theme.colors.background}
        underlayColor={() => theme.colors.background}
      >
        <Scene<AppNavigationProps> stateKey="home">
          <NavigationBar title="home">
            <StatusBar tintStyle="light" />
          </NavigationBar>
          <HomeScreen />
        </Scene>
      </NavigationStack>
    </NavigationHandler>
  );
};

report.txt

[grahammendick]

Hi, nice to hear from you. I just created a brand new react-native app and set it up with the Navigation router and didn't face that problem.

I've debugged it to where your error is coming from (line 1475 of the RCTUIManager) and you can see that the Navigation router has onChangeText of the NVSearchBar as a bubbling event so it won't hit the error.

Maybe you could open the project in XCode and debug it to the same point to see what you get?

[advancedtw]

is it also with new arch enabled ? I forgot to mention that I'm using expo "prebuild" it could be also be a problem with the dev client.
in my case it does hit the breakpoint with topChangeText and NVSearchBar. do you want me to do more investigation while I have the debugger open?

[grahammendick]

Yea it's with new arch enabled but I'm not using expo.

Yes please, can you investigate where the topChangeText is showing up. Is it in the bubblingEvents? Maybe you could show me the same screenshot as I included? Also, if it shows up under bubblingEvents then how does it hit the error? Maybe stop it just before the error and then show me the screen shot?

[grahammendick]

Also, I noticed it's a DirectEventHandler in the native spec instead of a BubblingEventHandler. I wonder if expo is doing something with the native spec that bare React Native isn't.

Could you edit it to a BubblingEventHandler, pod install again and see what happens, please?

[advancedtw]

this is pretty similar to what you have

this is the content of directEvents if you are curious.
{
topAccessibilityAction = {
registrationName = onAccessibilityAction;
};
topAccessibilityEscape = {
registrationName = onAccessibilityEscape;
};
topAccessibilityTap = {
registrationName = onAccessibilityTap;
};
topAppear = {
registrationName = onAppear;
};
topCancelButtonPress = {
registrationName = onCancelButtonPress;
};
topChangeActive = {
registrationName = onChangeActive;
};
topChangeScopeButton = {
registrationName = onChangeScopeButton;
};
topChangeSync = {
registrationName = onChangeSync;
};
topChangeText = {
registrationName = onChangeText;
};
topContentSizeChange = {
registrationName = onContentSizeChange;
};
topDetentChanged = {
registrationName = onDetentChanged;
};
topDisappear = {
registrationName = onDisappear;
};
topDismiss = {
registrationName = onDismiss;
};
topDismissed = {
registrationName = onDismissed;
};
topError = {
registrationName = onError;
};
topFinishTransitioning = {
registrationName = onFinishTransitioning;
};
topGestureCancel = {
registrationName = onGestureCancel;
};
topHeaderHeightChange = {
registrationName = onHeaderHeightChange;
};
topKeyPressSync = {
registrationName = onKeyPressSync;
};
topLayout = {
registrationName = onLayout;
};
topLoad = {
registrationName = onLoad;
};
topLoadEnd = {
registrationName = onLoadEnd;
};
topLoadStart = {
registrationName = onLoadStart;
};
topMagicTap = {
registrationName = onMagicTap;
};
topMomentumScrollBegin = {
registrationName = onMomentumScrollBegin;
};
topMomentumScrollEnd = {
registrationName = onMomentumScrollEnd;
};
topNativeDismissCancelled = {
registrationName = onNativeDismissCancelled;
};
topOrientationChange = {
registrationName = onOrientationChange;
};
topPartialLoad = {
registrationName = onPartialLoad;
};
topPopped = {
registrationName = onPopped;
};
topProgress = {
registrationName = onProgress;
};
topQuery = {
registrationName = onQuery;
};
topRefresh = {
registrationName = onRefresh;
};
topRequestClose = {
registrationName = onRequestClose;
};
topRest = {
registrationName = onRest;
};
topScroll = {
registrationName = onScroll;
};
topScrollBeginDrag = {
registrationName = onScrollBeginDrag;
};
topScrollEndDrag = {
registrationName = onScrollEndDrag;
};
topScrollToTop = {
registrationName = onScrollToTop;
};
topSearchBlur = {
registrationName = onSearchBlur;
};
topSearchButtonPress = {
registrationName = onSearchButtonPress;
};
topSearchFocus = {
registrationName = onSearchFocus;
};
topSelectionChange = {
registrationName = onSelectionChange;
};
topSheetDetentChanged = {
registrationName = onSheetDetentChanged;
};
topShow = {
registrationName = onShow;
};
topTextLayout = {
registrationName = onTextLayout;
};
topTransitionProgress = {
registrationName = onTransitionProgress;
};
topWillAppear = {
registrationName = onWillAppear;
};
topWillDisappear = {
registrationName = onWillDisappear;
};
topWillNavigateBack = {
registrationName = onWillNavigateBack;
};
}

[grahammendick]

Great, thanks. But then how does it hit the error condition. If you press play in xcode does it throw an error? Or does it only throw if running through expo

[advancedtw]

yes of course it does throw using xcode I just made a video of me stepping over. I'm trying to shrink it to 10mb so I can upload it.

[grahammendick]

Oh, I just saw you said that topChangeText is in directEvents. It isn't for me? I wonder why the difference?

[advancedtw]

here tell me if this is helpful.

recs.mp4

[grahammendick]

Oh I've an idea. I reckon you're using another package that defines topChangeText as a direct event!
Can you put a breakpoint in the // Add direct events section (line 1444) and check what viewConfig is adding topChangeText, please?

You can make the breakpoint conditional to speed the process up

[advancedtw]

I have the breakpoint set with the condition can you be more specific about which property of viewConfig you want to inspect?

[grahammendick]

When it hits the breakpoint scroll up and hover on the managerClass. Then we'll unmask the culprit!

[advancedtw]

I've got RNSSearchBarManager! that is react native screen if Im not mistaken but I'm not using this lib anymore.

[grahammendick]

Aha!! Yep, there it is

Pretty sure everything will work if you uninstall react-native-screens

[advancedtw]

I will delete it from package.json so the pods don't get installed and see if this is really fixed or maybe expo is doing something weird with the setup.

While I have you here I don't want to impose too much but I have an other bug on android regarding the Sheet. should I open a new issue?

[grahammendick]

Yes, please open a new issue 🙏

[grahammendick]

I don't want to impose too much

You're definitely not imposing. I appreciate your feedback and I'm always happy to help

[advancedtw]

That did it. I deleted the rn screen entry from package.json and reinstalled the pods no more errors! It's possible the other Sheet bug is also related to rn screen I will keep investigating.
I am truly grateful for your assistance; thank you so much because I didn't want to go back to react navigation 7 and their github-action bot...

[grahammendick]

While not technically a bug I definitely don't want other users to face this when moving to the Navigation router. Would you be interested in working on a PR?

We can chat through the solution as much as you want. Anyway, your choice, let me know

[advancedtw]

Sure it's no big deal I'd be happy to do it. I'm thinking maybe a new section for tips or migrating from expo/react-navigation. I'll think about it a bit more and let you know what I come up with.

[grahammendick]

I was thinking we could rename the event to avoid the clash. It's just an internal name so we can call it whatever we want

[grahammendick]

While investigating this I noticed that it's a DirectEvent in the spec. So if it's actually already a DirectEvent we could just make it one in the objective-c and wouldn't have to even rename it. But we'd have to check whether it's bubbling or not first

[grahammendick]

On Android it's already a direct event so I'm happy if we change it to a RCTDirectEventBlock on iOS. Then it won't clash with react-native-screens

[advancedtw]

so simply changing it from RCTBubblingEventBlock to a RCTDirectEventBlock will fix potential conflicts ? I can do the pr but it looks line 1 line change I'm not sure if it's worth it. what do you think?

I still think is is also important to inform users that some expo packages such as expo-system-ui or expo-status-bar will have some weird interference. I had this bug on IOS where the navigation bar tint would not be set to my values. removed the packages and it's stable now. I'm not sure which one was the culprit but I didid't need any of them anyway.

[grahammendick]

Yea, changing it from RCTBubblingEventBlock to a RCTDirectEventBlock will fix the conflict. If we don't fix then a lot of people switching from React Navigation/Expo router to the Navigation router will get this error. They'll probably blame it on the Navigation router and give up before they've even started. I'm grateful you let me know about it 🙏

I'd really appreciate a PR. If you could retest the error scenario and check it works. You can npm run package and copy the navigation-react-native from build/npm into your node_modules. I'll take care of retesting the SearchBar component on old and new architecture.

I didn't know about the other expo conflicts you mentioned. It would be great to compile a list so if you track down what it was please let me know.

[advancedtw]

ok I still have a branch with the old deps so It should not be too hard to test it. I will also check which package was messing with the nav bar colors and let you know.

[grahammendick]

Oh, don't forget to pod install after copying over navigation-react-native into your node_modules