barthap/expo-mega-demo

Experimenting with awesome React Native + Expo features.

Expo Mega Demo

Experimenting with new awesome React Native + Expo features.

Work in progress. More info soon.

A preview video (click the image):

Core features:

⚠️ Caution! Some features used in this demo are in early, experimental stage and they're not ready for production. Use at your own risk.

• Runs on Expo SDK 45, takes advantage of the new Expo Modules architecture.

• Uses Expo custom managed workflow - a prebuilding is used to generate native directories. All native changes (even these unusual) and patches are covered with config plugins.

• Uses Expo Dev Client, react-navigation, ui-kitten

• Bluetooth communication using react-native-ble-plx with config plugin

• Color picker using Expo GL, made from this tutorial from William Candillon, but rewritten to Reanimated v2

• Music Picker is an expo-module written using Swift/Kotlin "Sweet" API.

  🎉 It is now available as a separate library: expo-music-picker!

• JSI real-time Audio streaming, inspired by this PR, thank you Marc!

  Now it is included in upstream expo-av@11.2.3 (Expo SDK 45) so a custom native module is no longer needed!

• Player controls stolen from NCL (internal Expo rn-tester equivalent).

• FFT is calculated in the JS thread. The spectrum bin heights are written to SharedValues and animated with Reanimated 2.

  There is plan to use react-native-multithreading and calculate it in a separate thread. But even without that, the JS keeps around 57-59 fps.

• Hardware: Arduino Uno and the HM-10 BLE 4.0 module. Read more in the Hardware README.

How to run

First time:

1. Make sure you have Expo and all the stuff installed and configured (including Xcode)
2. Clone the repo and update submodules: git submodule update.
3. yarn install
4. yarn prebuild
5. yarn run:ios

Just to start the bundler (without rebuilding client): run yarn start.

Known issues

Most of them are caused by limited time of mine, and also by some libraries, which depend on Expo, but have not yet been updated to support latest Expo features.

• iOS JSI Audio is not working on Hermes yet. I'm working on it. Should be working now, lmk if it's not.
• Frequency bin labels are wrong 🤷. Eventually I needed to display them in log scale and I am too lazy to think about how to recalculate everything properly.
• Modifying the sound.setOnAudioSampleReceived callback and the Reanimated 2 stuff requires at least picking the song again to reload properly, sometimes whole app restart is needed.
• May not work on iOS emulator. The JSI Audio should work, but as far as I remember, the music picker does not open. And, of course, Bluetooth cannot work on simulator.
• Not yet works for Android There's basic experimental Android support, but with issues:
  • GL View sometimes crashes
  • JSI Audio might crash after a few seconds
  • ...

Applied patches

See the the plugins section of app.json to see how the patches are applied: xw

• patch-package for webgltexture-loader-expo@1.0.0, a dependency of gl-react-expo - it has not yet been updated to use expo-modules-core in favor of @unimodules/core.

• expo-cli built-in plugins sets the Push Notifications capability even when expo-notifications are not installed and I see no way to disable it. Another plugin was written to delete that entitlement.

• MusicPicker module: iOS requires another Info.plist value about Media Library usage permission - a config plugin takes care of that

No-longer-needed patches and workarounds 🎉

I started this project when Expo SDK 42 came out. So much changed since then and with each release less and less patches and workarounds were needed:

• Linking custom native modules:

  • The custom_native_modules directory needs to be added to autolinking paths in Podfile. A config plugin takes care of that.

    It appears that it can be configured in package.json as expo.autolinking.searchPaths. It's not needed anyway, look at the next point:

  • new expo-modules-autolinking requires modules to be specified in package.json dependencies. I don't want to copy my custom native modules to node_modules they are deleted after being copied there by yarn.
  • Patched expo-modules-autolinking@0.5.1 to apply changes from this PR until it's published. Now custom native modules dir can be specified in package.json. Finally, this PR is published in upstream expo-modules-autolinking.

• Replaced expo-av with my custom expo-av-jsi native module to support JSI Audio

  The JSI Audio streaming is now included in upstream expo-av@10.2.0 but yet for iOS only. It'a super-secret hidden feature of SDK 44.

  In SDK 45 both platforms are now supported by Expo AV. 🎉

• patch-package for expo-gl and related libraries - needed, because of migration from @unimodules/core to expo-modules-core

• by default, expo modules are built with xcframework if available, but that does not work for patched expo-gl, so its xcframework is deleted force build from source.

• expo-gl installs wrong expo-modules-core dependency in its own node_modules - it is deleted, the global node_modules one is correct.

• The AppDelegate.m is being broken by expo-dev-client config plugin, wrote another config plugin to copy the patched file.

• patch-package for react-native-ble-plx and Podfile config plugin, because of this issue.

• There was a postinstall.js script to perform some of the patches above (like file copy/delete). Fortunately it is no longer needed. Yay! 🎉