React Native Investigations for ODD Mobile

[jeffg]

A quick and non-definitive list of capabilities we need to research in React Native ( RN )

Initial technical requirements

• use on-device passkey support and biometrics to authenticate users
  • There seem to be some RN libraries that help with passkeys.
  • Local user accounts is fine for now, eg sign in with google / apple support.
  • FOLLOWUP is to create fission users with a WNFS etc
• securely create a recovery kit and store it off-device in a place the user can recover it from in case of device loss, see Rainbow Wallet for inspiration.
• deploy to the Apple App Store and Google Play Store
• store user data in a WNFS Volume
  • store encrypted files in the Private FS
  • publish public data directly from the app!

Followups

• design for how private data sharing could work

Sharing to our app

A core user interaction will be to share something from other apps on their phone to our app. We should show up in the native iOS and Android share sheets.

• SO article with pointers
• Android
• iOS
• React Native Share Extension apparently makes this easier / is an abstraction. Warning this extension is old and has not been updated to work with the current Xcode tooling chain.
• relatively recent blog post about a possible approach to this.

General guides

• React Native guide for doing “native” builds
• Exposing swift / compiled code to RN

Interesting codebases

1. Sealvault is an open source codebase that uses a Rust core and Swift UI
2. Rainbow Wallet Is a React Native ( GPL v3 ) codebase that implements use of iCloud to store a recovery kit.
3. looks like most are pretty basic but the mattermost codebase features native share integration
4. Expo Examples Github
5. Curated list of open source react native apps
6. Passkeys support? Beyond Identity

Tooling

• Expo is the most convenient way to rapidly build UI for react native apps. What it is not good for is building native extensions.
• React Native tooling and scaffolding is the best way to integrate directly with xcode
• Hermes "is an open-source JavaScript engine optimized for React Native. "
• Nativewind - tailwind for React Native

It looks like the best developer experience is likely the latter option. React Native’s existing tools support typescript as an option and as well support easy preview of the application in the iPhone simulator.

What is somewhat arduous / an opportunity for bringing in React Native experience ( contractor? ) is the tedious integration of key platform capabilities into the app, for example the “native share” extension.

Xcode shenanigans

iOS development requires a bunch of ruby nonsense which is an extra pain to get right on M1 laptops currently. Here’s some additional stuff to help maybe:

• CocoaPods on M1 (Apple Silicon) fails with ffi wrong architecture - Stack Overflow

Course

• Frontend Masters

[jeffg]

Interesting idea: going to try to get the mattermost codebase building and see if it can be stripped down and used as a starting point?

[jeffg]

Mattermost

Mattermost feels pretty promising:

• open source codebase, Apache 2.0 license!
• codebase includes ios and Android support
• key features like being a share target ( share extensions on iOS are finicky )

I think a reasonable approach might looks like:

0. review and see if the repo is currently buildable on iOS.
1. fork the repo and strip out most of the guts of the mattermost code
2. investigate how to enable the nice react-native or expo tooling to build and preview UI
3. investigate approaches to integrating rust code into the codebase a la the seal vault codebase.

Dev setup documentation:

Developer setup

Quick video demo of the share target functionality:

1. select image
2. add text
3. select channel to share to
4. ???
5. PROFIT!!

[jeffg]

Trying to get a build env working today, this is pretty gnarly:

M1 Mac building for iOS Simulator, but linking in dylib built for iOS, file '/Users/xxx/Desktop/Mattermost-mobile/node_modules/react-native-webrtc/ios/WebRTC.framework/WebRTC' for architecture arm64