Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extract Module to Library #4274

Merged
merged 10 commits into from
Oct 18, 2024
Merged

Extract Module to Library #4274

merged 10 commits into from
Oct 18, 2024

Conversation

cipolleschi
Copy link
Contributor

@cipolleschi cipolleschi commented Oct 11, 2024

This PR shows how to extract a module in a library using create-react-native-library

@cipolleschi cipolleschi changed the title [WIP] Begin work on the extracting a module to a library Extract Module to Library Oct 11, 2024
@cipolleschi cipolleschi marked this pull request as draft October 11, 2024 16:30
@cipolleschi cipolleschi marked this pull request as ready for review October 15, 2024 12:46
3. For iOS only, you need to install CocoaPods: `cd ios && pod install`.
4. Build and run Android with `yarn android` from the `example` folder.
5. Build and run iOS with `yarn ios` from the `example` folder.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wanted to add a paragraph on the Local Module setup, but it is currently broken. Metro can't follow the symlinks that yarn generates and it can't pick up the JS files from the other folder.

Probably there is a way to make it work by tinkering with the metro.config.js, but I don't think we should go to that level of details in these guides, so I decided to leave that setup out for simplicity. There is a way to test the library anyway.

cc. @huntie if you know how to handle this case in a simple way.

Copy link
Contributor

@cortinico cortinico left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already have this page:

https://reactnative.dev/docs/next/legacy/native-modules-setup

Which can instead be revived and used for both arch no?

docs/the-new-architecture/create-module-library.md Outdated Show resolved Hide resolved

## Extract the Module into a Library

The React Native community produced an amazing tool to scaffold a new library: the [`create-react-native-library`](https://callstack.github.io/react-native-builder-bob/create) tool. This tool sets up a new library with all the boilerplate code that is needed: all the configuration files and all files required by the various platforms. It also comes with a nice interactive menu to guide you through the creation of the library.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
The React Native community produced an amazing tool to scaffold a new library: the [`create-react-native-library`](https://callstack.github.io/react-native-builder-bob/create) tool. This tool sets up a new library with all the boilerplate code that is needed: all the configuration files and all files required by the various platforms. It also comes with a nice interactive menu to guide you through the creation of the library.
You can use the [`create-react-native-library`](https://callstack.github.io/react-native-builder-bob/create) tool to create a new library. This tool sets up a new library with all the boilerplate code that is needed: all the configuration files and all files required by the various platforms. It also comes with a nice interactive menu to guide you through the creation of the library.

Base automatically changed from cipolleschi/custom-cxx-types to main October 15, 2024 14:42
@cipolleschi
Copy link
Contributor Author

We already have this page:
reactnative.dev/docs/next/legacy/native-modules-setup
Which can instead be revived and used for both arch no?

Yeah, that's what I did.
The old page was very minimal with basically no explanation.
It was also in a weird spot, logically-speaking: in the sidebar, it was coming after the guide, but it ends with "When all steps above are done, you will be able to continue with Android Native Modules or iOS Native Modules guides to add in some code." so it looked more like a requirement.

This guide is a revamp of that one, and it is in the right spot:

  • first we teach people how to write a module/component
  • then we explain them how to extract them in a separate library.

The instructions works in the same way for both architectures. I can generalize it further to make it read better also for the old architecture.

Copy link

netlify bot commented Oct 15, 2024

Deploy Preview for react-native ready!

Name Link
🔨 Latest commit bb71acb
🔍 Latest deploy log https://app.netlify.com/sites/react-native/deploys/670fd5b1c5ca4b0008b4380b
😎 Deploy Preview https://deploy-preview-4274--react-native.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@cipolleschi cipolleschi force-pushed the cipolleschi/create-module-library branch from ec6c0cd to 0b33306 Compare October 16, 2024 12:26
@cipolleschi cipolleschi merged commit 891fdbc into main Oct 18, 2024
4 checks passed
@cipolleschi cipolleschi deleted the cipolleschi/create-module-library branch October 18, 2024 09:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants