zag/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! Many features used in this demo are in early, experimental stage and they're not ready for production. Use on your own risk.

• Runs on Expo SDK 43, 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 and yarn postinstall script.
• 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 "Sweet" API.
• JSI real-time Audio streaming, taken from this PR, thank you Marc!
• 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. yarn install
3. yarn prebuild
4. 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 recently-released Expo SDK 43.

• 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.onAudioSampleReceived 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 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
  • Waiting for Expo Modules architecture to support Kotlin DSL.
  • The MusicPicker module isn't implemented yet for that platform for the above reason (instead there's a copy-pasted expo-haptics code ¯_(ツ)_/¯)
  • No JSI-related expo-av changes applied.

Applied patches

See the postinstall.js script and the plugins section of app.json to see how the patches are applied

• patch-package for react-native-ble-plx and Podfile config plugin, because of this issue.
• 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.
• 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.
• 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
• The custom_native_modules directory needs to be added to autolinking paths in Podfile. A config plugin takes care of that.