React Native Support #207

tom-sherman · 2022-02-05T18:14:05Z

tom-sherman
Feb 5, 2022

Hi 👋

It would be great to start a discussion about react native and if support falls within the goals of this project.

I have a POC here: https://github.com/tom-sherman/ReactLocationNative

tom-sherman · 2022-02-05T18:19:59Z

tom-sherman
Feb 5, 2022
Author

Some weirdness I've encountered so far:

`useErrorBoundary` is required to be set to true

You need to use error boundaries right now because the dev mode error handling uses DOM elements.

This isn't a big deal to me because I would have enabled it anyway but it's a footgun when getting started and some people may want to set it to false. I'd vote for having it true by default for everyone, but that's a separate conversation 😅

Need to use import aliases to properly resolve react-location

I have no idea if this is a problem just for me but I needed to patch the metro resolver to change @tanstack/react-location to @tanstack/react-location/build/cjs, otherwise you get the following error:

error: Error: While trying to resolve module `@tanstack/react-location` from file `~/code/ReactLocationNative/src/App.tsx`, the package `~/code/ReactLocationNative/node_modules/@tanstack/react-location/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`~/code/ReactLocationNative/node_modules/@tanstack/react-location/build/umd/index.production.min.js`. Indeed, none of these files exist:

  * ~/code/ReactLocationNative/node_modules/@tanstack/react-location/build/umd/index.production.min.js(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * ~/code/ReactLocationNative/node_modules/@tanstack/react-location/build/umd/index.production.min.js/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
    at DependencyGraph.resolveDependency (~/code/ReactLocationNative/node_modules/metro/src/node-haste/DependencyGraph.js:311:17)
    at Object.resolve (~/code/ReactLocationNative/node_modules/metro/src/lib/transformHelpers.js:129:24)
    at resolve (~/code/ReactLocationNative/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
    at ~/code/ReactLocationNative/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
    at Array.reduce (<anonymous>)
    at resolveDependencies (~/code/ReactLocationNative/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
    at processModule (~/code/ReactLocationNative/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
    at async addDependency (~/code/ReactLocationNative/node_modules/metro/src/DeltaBundler/traverseDependencies.js:230:18)
    at async Promise.all (index 3)
    at async processModule (~/code/ReactLocationNative/node_modules/metro/src/DeltaBundler/traverseDependencies.js:198:5)

Here's my workaround:

https://github.com/tom-sherman/ReactLocationNative/blob/ca2bf9a261e75f16c131e17329a2e3f2d6af4703/metro.config.js#L18-L28

Cannot use `Link` component

I needed to write my own link component but it's not trivial to implement all of the features.

0 replies

tom-sherman · 2022-02-05T23:23:01Z

tom-sherman
Feb 5, 2022
Author

A separate point, it's not clear to me how I would integrate react-location into native navigation patterns with eg. https://github.com/software-mansion/react-native-screens

Any thoughts on this?

0 replies

sylfel · 2022-02-27T17:15:59Z

sylfel
Feb 27, 2022

In my opinion, It's complicated :-/ in react-navigation, it's "included" in sources with sometimes a fallback

I think you can add a screencontainer or a ScreenStack as a "root" component, and use a Screen as direct child (with and inside if necessary
But, using children with this is ... complicated, i don't know how to

1 reply

tom-sherman Jun 7, 2022
Author

What I'm realising is that react-locaton, like react-router, are not really suitable for integrating with react-native-screens.

Because they are all built around rendering to a single element at a time, whereas react-native-screens is built around mounting multiple elements controlled with the activityState (or child order in the case of stack).

I do expect react-router at least to support this pattern in the distance future though, but it will come after React releases their <Offscreen> API. For now I think the only thing we can do is fork...

SeanRoberts · 2022-11-15T20:08:07Z

SeanRoberts
Nov 15, 2022

Tanner did mention this is on the roadmap on Twitter: https://twitter.com/tannerlinsley/status/1590112579468546048

It's definitely not an easy problem space.

0 replies

Byevenes · 2023-01-25T02:18:50Z

Byevenes
Jan 25, 2023

Expo router is other option to see, include router using folder system like next 13 👀, I hope to see tan stack router in react native 🫶🏽🤍

0 replies

tannerlinsley · 2023-01-25T02:21:13Z

tannerlinsley
Jan 25, 2023
Maintainer

An adapter won’t be difficult after we rc

1 reply

tom-sherman Jan 25, 2023
Author

Did you have any thoughts on this comment? #207 (reply in thread)

avedetvedea · 2023-11-06T21:31:06Z

avedetvedea
Nov 6, 2023

Since this, expo-router is now in v3. Will we able to use TanStack router with react native (expo) apps? Can we add expo-router to the comparison page? (with possibly related native/web distinction)

0 replies

tannerlinsley · 2023-11-06T21:32:56Z

tannerlinsley
Nov 6, 2023
Maintainer

It would take some work to build the inversion of control around the actual GSX elements that are rendered for things like errors, but it would be totally possible to make this work for a react native and expo . Tanner Linsley

…

On Nov 6, 2023 at 2:31 PM -0700, avedetvedea ***@***.***>, wrote: Since this, expo-router is now in v3. Will we able to use TanStack router with react native (expo) apps? Can we add expo-router to the comparison page? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

3 replies

avedetvedea Nov 6, 2023

It has been 1.5 years since this discussion has started, looking at that is it not reasonable to wait for anything concrete?

I see that you have a lot on your plate, very interested in Bling, too; It is just these projects don't have the same priorities as you, as expo-router v3 still have not talked about fetch-as-render, which is where React has been going for a long time now.

tannerlinsley Nov 6, 2023
Maintainer

I’m not totally sure what you’re saying. Are you asking me if you should wait for this functionality vs use something else?

avedetvedea Nov 7, 2023

yes, and if not to wait, a vague timeline? expo-router uses native navigation suite underneath (react-navigation), so not sure how your router will fare against, though

JJosephttg · 2024-01-06T02:13:58Z

JJosephttg
Jan 6, 2024

I definitely think React Native needs this. Expo/react navigation is such a pain to work with. Especially when you deal with stack state, nesting navigators and nested navigation. Plus expo router moved to file based.

0 replies

tannerlinsley · 2024-01-06T03:34:52Z

tannerlinsley
Jan 6, 2024
Maintainer

I might be able to give this a good push, but I’m curious if there are any native companies that would sponsor the effort?

0 replies

dohomi · 2024-04-02T23:28:58Z

dohomi
Apr 2, 2024

I'd love to see support for Expo, that would be a real cross platform router option which is currently been missing. Expo router can do both, but devs are forced to use Metro for web.

0 replies

helmturner · 2024-04-07T04:51:47Z

helmturner
Apr 7, 2024

ngl, as much as I'm excited to use this in React Native, it might actually be worthwhile to push this until react-strict-dom matures a bit.

I've got TSR working in RN without patching—I had to implement a custom history for RN, and the default error component is required, but it's working bug free AFAIK (though there may be design flaws in my implementation, but I digress).

Basically what I'm trying to say is, once react-strict-dom is a bit more feature complete, it would trivially solve every integration issue I've witnessed thus far.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Native Support #207

{{title}}

Replies: 12 comments 5 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

React Native Support #207

Replies: 12 comments · 5 replies

tom-sherman Feb 5, 2022 Author

useErrorBoundary is required to be set to true

Need to use import aliases to properly resolve react-location

Cannot use Link component

tom-sherman Feb 5, 2022 Author

tom-sherman Jun 7, 2022 Author

tannerlinsley Jan 25, 2023 Maintainer

tom-sherman Jan 25, 2023 Author

tannerlinsley Nov 6, 2023 Maintainer

tannerlinsley Nov 6, 2023 Maintainer

tannerlinsley Jan 6, 2024 Maintainer

Replies: 12 comments 5 replies

tom-sherman
Feb 5, 2022
Author

`useErrorBoundary` is required to be set to true

Cannot use `Link` component

tom-sherman
Feb 5, 2022
Author

tom-sherman Jun 7, 2022
Author

tannerlinsley
Jan 25, 2023
Maintainer

tom-sherman Jan 25, 2023
Author

tannerlinsley
Nov 6, 2023
Maintainer

tannerlinsley Nov 6, 2023
Maintainer

tannerlinsley
Jan 6, 2024
Maintainer