Issues with platform-specific React Native files

[salockhart]

Hey!

I was running this on my React Native project, and I noticed that it wasn't able to follow an import such as ./User and resolve it to ./User.ios.tsx and ./User.android.tsx.

I realise this is an edge-case and might be difficult to solve since IIRC these special extensions are handled by Metro. Just wanted to surface this in case anyone else has the same issue. Luckily I have very few platform-specific files so this tool is still super valuable.

Thanks!

[smeijer]

Thanks for letting me know. I'm sure it's fixable.

Do you know of any open source repo that has a similar problem/file structure, so that I can test it on that?

[salockhart]

Hey @smeijer. I'm not aware of too many good open source examples, so I've created a small dummy repo to test on:

https://github.com/salockhart/RNPlatformSpecificCodeExample

It's super barebones but should suffice. Here's an example of the output:

       summary               unimported v1.0.6
────────────────────────────────────────────────────────────────────────────────────────
       entry file          : index.js

       unresolved imports  : 1
       unused dependencies : 0
       unimported files    : 3


─────┬──────────────────────────────────────────────────────────────────────────────────
     │ 1 unresolved imports
─────┼──────────────────────────────────────────────────────────────────────────────────
   1 │ ./src/Body/Body
─────┴──────────────────────────────────────────────────────────────────────────────────


─────┬──────────────────────────────────────────────────────────────────────────────────
     │ 3 unimported files
─────┼──────────────────────────────────────────────────────────────────────────────────
   1 │ src/Body/Body.android.tsx
   2 │ src/Body/Body.ios.tsx
   3 │ src/Container/Container.tsx
─────┴──────────────────────────────────────────────────────────────────────────────────

[smeijer]

Thanks for the repo. That definitely helps.

I do have a hard time understanding the dependency tree here though. Take the Body example, we can have:

Body.tsx
Body.android.tsx
Boby.ios.tsx
Body.native.tsx

When I have an import x from './Body/Body' statement, does that mean that they are all imported? Or can there still be one unused?

And do I need all of those files? Or can I have any of those at random?

[salockhart]

The import gets resolved at build time, so import x from './Body/Body' resolves to Boby.ios.tsx if you are targeting iOS, and Boby.android.tsx if you're targeting Android.

I don't think that you would have both Body.tsx and Body.android.tsx/Body.ios.tsx, and I'm not sure what the behaviour would be there.

Body.native.tsx, IIRC, is used to differentiate between native mobile projects and web projects, which might have files like Boby.web.tsx

[smeijer]

so import x from './Body/Body' resolves to Boby.ios.tsx if you are targeting iOS, and Boby.android.tsx if you're targeting Android.

But only if they exist, and if they do not exist, Body.tsx will be imported. Correct?

[salockhart]

Yes that is correct

[smeijer]

I think I have done it. I'll test it a bit more, and will release it this week.

Thanks for the info!

[geraintwhite]

This would be really handy to have for RN projects. Is there any update on the progress?

[dkarter]

@smeijer Thank you so much for looking into this! This feature would be super useful for React Native. If you need any help I'm happy to lend a second pair of eyes!

[smeijer]

Sorry, even though I had a working version, it took me a while to commit. Mostly because I didn't really like the solution.

I believe I've now found a better way to support this, and the commit has been pushed. It's way more generic, and adds support for build configs like react native, but also other projects that have multiple build targets.

I'll release this soon. All that's left is add some presets / auto detection so that you don't need to setup complicated unimportedrc config files.

[smeijer]

Wrong button 😅

[smeijer]

Released in v1.18 😎 🚀