refact: remove mixed CJS/ESM, refactorize index.native.tsx

[tboba]

Description

Users are reporting that on Vite they cannot build their project with react-native-screens because of the mixed CJS/ESM files that are being created while building a bundle (you can see here that some package managers reports errors about mixed CJS/ESM files). To reduce that behavior I've decided to remove CJS completely while bundling the project, resulting in building only ESM files. Unfortunately because of that I had to remove optional requiring process inside the index.native.tsx file, but this shouldn't have a large impact while using rn-screens.

I also decided to move some parts of the screens implementation to separate files - this should improve readability, better understanding of code for newcomers and should improve developer experience overall. Having only imports and exports in index files is also a good practice - this was my main reason why I've planned to do that.

Closes #1908 - I'll try to ensure that this will fix Vite for sure 👍

Changes

• Disable bundling CJS files from react-native-screens
• Refactorize index.native.tsx files to separate files

Test code and steps to reproduce

First, try to bundle the project - you can see that inside lib there shouldn't be common directory with the CJS files.
Then, try to run FabricTestExample with a couple of tests. Application should work properly as usual.

Developer notes

There are some points that I stumbled upon and I need to mention here.

• I've managed to move all of the native components from class to function components, except:

  • Screen: Unfortunately we need to stay with class components there, as for now we would like to keep behavior of using setNativeProps for a screen (does anybody do that? Or is react-native calling this method for a screen wherever? There's a field for a discussion).
  • SearchBar: Because of managing ref's state and dropping it down to the methods responsible for commands I was also unable to convert this to functional component.

• I tried to also refactor index.tsx file, but I see no reason to do this. For now I'm keeping it as it is (with only a slight changes to this file):

  • Because of a conflict of naming between SearchBarCommands (from types.tsx) and SearchBarCommands as a native component -> it's not that easy to fix, so I suggest fixing this in a future (might be also a good first issue).
  • I also tried to move index.native.tsx to index.tsx and to move index.tsx to index.web.tsx, but because of a conflict I described above and because I don't see the point of rendering conditionally native components depending if Platform.OS !== 'web' (and rendering a View if Platform.OS is web) I'm keeping the current naming.

• Let me know what do you think about the refactor of index.native.tsx! This change is a Proof of concept and I codenamed it as a second stage of this PR, so we might give it a try, but I'm all ears about your opinion - IMO it is worth merging .

Checklist

• Ensured that nothing changed while refactoring index.native.tsx
• Ensured that CI passes

[WoLewicki]

Looks good 🚀 I left some comments.

[WoLewicki]

I think we will remove the active prop and code related to it in v4, just a note for future.

[tboba]

Great, thanks for mentioning that. We can do that in a separate PR 👍

[kkafar]

Took a quick look now:

1. I like that each component lives in its dedicated source file now <3
2. Is there any advantage of converting every function to arrow function?
3. We need to make sure that there are no more similar issues to the one we debugged last week (component exported under different name after the refactor)

[tboba]

@kkafar

1. I'm glad you like it!
2. As I answered above, I just wanted to stick with one convention
3. Yeah, this app should be really deeply tested before merging this PR, but as I've checked already it works as usual on many cases!