@nativescript-community/expo-nativescript

About

This is a monorepo of various libraries from the Expo ecosystem, which is primarily a React Native ecosystem, adapted for use with NativeScript. The endgame is for the Expo ecosystem (or at least Expo Unimodules, which are a large part of it) to be fully supported on NativeScript as it is on React Native. But this is a long way off for now!

Getting involved

For more information on this project (and particularly if you'd like to help – especially so if it's for getting the Android side working), you can contact Jamie Birch on Twitter via @LinguaBrowse, or on the NativeScript Slack in the #react channel, or on the NativeScript Discord, again in the #react channel.

⚠️ Before you start ⚠️

Be warned: It's in proof-of-concept stage right now. Expo Contacts (and Expo Permissions, which it depends upon) is working fully on iOS. Android support is blocked, however – see details in the expo-nativescript-adapter project.

Please don't look too closely at apps/demo and apps/demo-angular, as I have only been developing with demo-react. They're there only as templates to be filled in properly later.

I hope at some point to simplify this monorepo by removing the packages expo-permissions and expo-nativescript-react-native-shim, which only exist to support Android. But for now, we have to put up with them.

And as Android support still isn't working even with best-effort hacks, I'll only be publishing expo-nativescript-adapter, expo-permissions-nativescript-plugin, and expo-contacts-nativescript-plugin to npm for now.

Monorepo setup

Run these commands:

# Installs all dependencies (will likely take several minutes):
npm run setup

# Builds the packages that the demo apps will use:
npm start
# Select: @nativescript-community.build-all

# Runs the React demo on an iOS simulator (or device, if connected):
npm start
# Select: apps.demo-react.ios

What are these packages?

As this project grows, we aim to implement, for each Expo Unimodule such as expo-contacts, a corresponding @nativescript-community/expo-contacts-nativescript-plugin NativeScript plugin.

expo-contacts-nativescript-plugin	The Expo SDK's Contacts API, implemented for NativeScript, using the exact same expo-contacts native code and largely a copy-paste of the TypeScript code. Developed with reference to the now-removed expo-contacts-flutter-plugin.
expo-nativescript-adapter	An implementation of all the Expo APIs (e.g. module registration and function-calling) for NativeScript. Essentially a port of @unimodules/react-native-adapter to Nativescript (with reference to the now-removed expo-flutter-adapter).
expo-nativescript-react-native-shim	A shim for any interfaces from the React Native ecosystem that Expo plugins rely upon. Currently only relevant to the Android implementation of expo-permissions, implementing the PermissionAwareActivity and PermissionListener interfaces.
expo-permissions	A fork of expo-permissions (distinguished by namespacing it under the @nativescript-community organisation), differing only by changing the Android code to make it easier for NativeScript to build. No success yet.
expo-permissions-nativescript-plugin	The Expo SDK's Permissions API, implemented for NativeScript, using the exact same expo-permissions native code and largely a copy-paste of the TypeScript code. Developed with reference to the now-removed expo-permissions-flutter-plugin.

How to operate this monorepo?

This workspace manages the suite of plugins listed above.

In general, when in doubt with what to do, just npm start.

How to add a new package to workspace?

npm run add

At the prompt, enter the name of the new package.

• This adds a plugin harness in packages with the necessary boilerplate to just start developing
• Updates all demo app flavors to support demoing the new package
• Adds shared code in tools/demo where you can write demo code once and share across all demo flavors
• Updates build tooling to support the new package
• Updates the npm start interactive display
• Updates the README here to list the new package

How to add Angular compatibility to a package

npm run add-angular

At the prompt, enter the name of the package to add an angular folder to it with the necessary boilerplate to provide Angular support to the package.

How to focus on just 1 package to develop in isolation

npm start

• Choose the focus commands for the package you wish to focus on and hit enter.
• All the demo app's will be updated to isolate that 1 package and for supported IDE's (currently VS Code), the source code will also become isolated in the workspace.

Note: good to always clean the demo you plan to run after focusing. (You can clean any demo from npm start as well)

How to publish packages?

npm run publish-packages

• You will be prompted for the package names to publish. Leaving blank and hitting enter will publish them all.
• You will then be prompted for the version to use. Leaving blank will auto bump the patch version (it also handles prerelease types like alpha, beta, rc, etc. - It even auto tags the corresponding prelease type on npm).
• You will then be given a brief sanity check 🧠😊

Made with ❤️

Why don't we hoist @nativescript/android and @nativescript/ios in this monorepo?

See NativeScript/nativescript-cli#5444