[Bug]: Something wrong in the rendering behavior.

[kickbelldev]

Package Scope

@use-funnel/react-navigation-native

Bug description

I've tried using that package and found a few things that don't work properly.

1. __useFunnelState in the query string is being stored as "[Object Object]".

2. funnel.history.push method just replaces the view instead of stacking it. (code)

2-1. (low priority) In React Native Web with React Navigation, navigation.navigate can't handle browser history. (doc)

Expected behavior

1. Must be serialized/deserialized correctly.
2. I think we should integrate Stack Navigator into funnel.Render, and use router.push instead of router.navigate. code

To Reproduce

Please run my example project.

repository link

Possible Solution

1. Apply JSON parse/stringify wherever __useFunnelState is used. This is just a workaround.
2. I'm not sure how to resolve this issue..

etc.

No response

[kickbelldev]

Hi,

After digging deeper, I realized that the current structure of use-funnel is not compatible with React Navigation's Navigator.

The issue is that use-funnel handles the rendering of the funnel internally through the FunnelRender component.
So, this approach doesn't work as a native stack structure in a real application.

Although it passes the test, the test code in the @use-funnel/react-navigation-native package also had the entire funnel component matched to a single Screen component.

I've tried things like representing each funnel step on a separate Stack.Screen or wrapping the Funnel component in a Stack.Navigator.

Then I found something.

React Navigation's Stack Navigator only accepts Stack.Screen, Stack.Group, and React.Fragment as children of the Stack.Navigator component.

I've explored various workarounds, but there's no way around this with the current structure.

I'm getting a little frustrated...🥲

[minuukang]

Sorry for the late reply!

1. did you check with react-native-web? I'll check if this is compatible, and I'll also check if the JSON serialization/deserialization you suggested will work.
2. I'll check the example myself to see if it works!