Navigation problems : linkTo() function not working on ios devices.
fallabdoulaye93 opened this issue · comments
This is the output in my terminal :
TypeError: Cannot read property 'bind' of undefined
This error is located at:
in Card (created by CardContainer)
in CardContainer (created by CardStack)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Screen)
in MaybeFreeze (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by CardStack)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by CardStack)
in RCTView (created by View)
in View (created by Background)
in Background (created by CardStack)
in CardStack (created by HeaderShownContext)
in RCTView (created by View)
in View (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by StackView)
in RCTView (created by View)
in View (created by GestureHandlerRootView)
in GestureHandlerRootView (created by StackView)
in StackView (created by StackNavigator)
in Unknown (created by StackNavigator)
in StackNavigator (created by SignedOutStack)
in SignedOutStack (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in AlertsProvider (created by App)
in ThemeProvider (created by Provider)
in RCTView (created by View)
in View (created by Portal.Host)
in Portal.Host (created by Provider)
in Provider (created by App)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by App)
in RCTView (created by View)
in View (created by ModalPanel)
in ModalPanel (created by ApplicationProvider)
in ThemeProvider (created by StyleProvider)
in MappingProvider (created by StyleProvider)
in StyleProvider (created by ApplicationProvider)
in ApplicationProvider (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
That's quite odd, I literally just checked that on an iOS simulator yesterday, and it worked. Can you post a short video plus some line numbers or something more to go on? Because I'm certain there are still 100 small problems with the template, but I saw this working yesterday web + ios + android, so I need a lot more to go on
Simulator.Screen.Recording.-.iPhone.13.-.2022-01-08.at.10.11.35.mp4
This error occurs when for example i click on the "Create an account" or "Forgot password" button.
Thanks for the extra info - I think I may have actually stumbled on the same, fixed it locally, but perhaps not pushed the change yet. The linking stuff (where I converted it to deep links inside react-navigation so that the URL bar would work correctly on web) was one of the last things I added and it still has a few corner cases not working, plus apparently this major case! It is close though
Yes, great. I specify that the error appears just on IOS, it works fine on the android and web version. I used this example to start an application and I can say that this is exactly what I was looking for. Right now I'm stuck here. I may have to find a solution to this problem until it resolves. Thanks again.
I just found the solution.
- I added the line ["@babel/plugin-transform-flow-strip-types"] in babel.config.js
- Clear npm cache
SOLVED !
I'm really happy you found that! Are you using flow in your project?
@mikehardy @fallabdoulaye93
This doesn't seem to work for me. Here is my current babel config
module.exports = {
presets: [['module:metro-react-native-babel-preset', {useTransformReactJSXExperimental: true}]],
plugins: [
[
'@babel/plugin-transform-react-jsx',
{
runtime: 'automatic'
}
],
["@babel/plugin-proposal-private-methods", { "loose": true }],
["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
["@babel/plugin-transform-flow-strip-types"]
]
};
Unfortunately I must admit I'm still experiencing this problem but have not investigated it further yet myself. The projects where I'm using this have shipped for web but not iOS yet so it's on my list but just hasn't been a priority yet. Hopefully soon, in the meantime the difference between the reported success from @fallabdoulaye93 and yourself is definitely worth examining. You might try npx react-native-clean-project to make sure things are really clean and the plugin-transform-flow-strip-types is taking effect
@JoeToeniskoetter i think you can try to clean project. it didn't work first but after i cleaned the project the error was gone.
@fallabdoulaye93 Unfortunately, that didn't seem to work either. Thank you for you help either way!
So I finally came back from web-land and checked out ios again, I reproduce this on a clean install (and after answering Y to all questions on npx react-native-clean-project) with ["@babel/plugin-transform-flow-strip-types"] in my babel.config.js file, if I click 'Forgot Password'. So, totally reproducible.
What's the problem? Still unsure, but in my experience clean reproducible examples of a bug are half the battle so the reproduction is a form of progress.
Okay, putting that plugin first (based on a hint here) in babel.config.js worked for me on ios
module.exports = {
presets: [['module:metro-react-native-babel-preset', {useTransformReactJSXExperimental: true}]],
plugins: [
["@babel/plugin-transform-flow-strip-types"],
[
'@babel/plugin-transform-react-jsx',
{
runtime: 'automatic'
}
],
["@babel/plugin-proposal-private-methods", { "loose": true }],
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
]
};The call chain is in through @react-navigation/stack's file Card.tsx making a new Animated event inside react-native - quite odd it only fails on iOS and the exact setup that causes it seems pretty particular and not applicable in "normal" projects, but whatever we are doing here definitely tickles it.
I'll make a PR containing this fix shortly so it doesn't affect people building fresh off the template
confirming this now works correctly on ios in the two work projects I have based on this template