everest-native-shell

Everest Native - UI Shell

This is a POC to display the UI shell for Everest Native

This application is purely for demonstration and educational purposes. Its setup and configuration resemble typical client-side mobile applications, but it's not a full-fledge production system. Use this app to learn, experiment, tinker, and practice building with BlockParty-Native components.

To view published Expo build, QR Code can be scanned here

---

Native Template Shells

---

Getting Started

1. Clone repo
2. Install dependencies - yarn
3. Run simulator: yarn ios or yarn android

Scripts

yarn ios

Starts iOS simulator

yarn publish

Publishes build to Expo Go app in Expo's servers.

Gotchas

Publishing

In order to publish our native code to Expo-hosted servers, requirements are as follows:

1. Expo app must be pre-configured as a Managed Workflow
2. In package.json, make sure to remove private property and add a name property

Debugging

Network requests are broken when using apollo-client. We will continue monitoring for resolutions.

We use react-native-debugger when debugging in development, which comes with useful features like network request and component inspection. To get started, follow this steps:

1. Install debugger with homebrew - brew update && brew install --cask react-native-debugger
2. Before starting up your local server, run - open -g 'rndebugger://set-debugger-loc?port=19000'
3. In a separate terminal window, start your local server - yarn ios or yarn android
4. In your simulator, select Debug remote JS from the Developer Menu
5. If you want to inspect network requests, right click anywhere in the debugger and select Enable Network Inspect

Implementation Details

Transaction Details query

In everest-client, there is a single transaction details data query at the top of the route that supports all of its sub-pages: To-Do's, Activity, Documents, and Contacts page. Unfortunately, React Navigation does not support this top-level query behavior and throws a performance warning when this happens. After scanning the sub-pages, To-Do's sub-page solely uses the transaction details API, so we've consolidated the query to only that specific page.

In addition, the fetchPolicy option for most useQuery hooks is temporarily disabled as it causes a layout-shift issue when refreshing data. This will need to be revisited.

ProgressCarousel + PinnedItems

There seems to be an issue accessing data through any context provider in ProgressCarouselItem, which is heavily used acrossed PinnedItems, i.e. useTransactionDetailsContext hook. We believe react-native-snap-carousel creates a separate instance/portal from the React tree that loses reference to the context provider. To solve for this, we replaced every instance of useTransactionDetailsContext by prop-drilling the required data down to each component. Unfortunately, this bloated the code base, but solved the issue.

Dependencies

• BlockParty-Native - React-Native design system
• React Navigation v5 - Routing and navigation library for React Native apps
• MirageJS - Client-side API mocking library. We are returning RESTful data since setting up GraphQL takes a little more effort than needed. However, this is enough to demonstrate working with production code.
  • Used with faker to simulate the data structure that is returned from Platform and legacy API.
• SWR - React Hook for data fetching.
  • Currently used in Everest Client, so we're not introducing anything new here.
• formik/yup - Form state management and form validation
  • Used in Profile Settings
• react-native-bottom-sheet - A performant interactive bottom sheet with fully configurable options 🚀. We currently use v2 since Reanimated v2 is not yet compatible with Expo.
  • Used when pressing "Open Order" on bottom nav bar
  • Used when pressing "What's New" in Profile Settings
  • Used in PinnedItems when pressing "View" in ProgressCarousel
• react-native-snap-carousel - A performant (swipe) carousel for React Native
  • Used in Transaction Details when viewing progress (ProgressCarousel component)
• rn-pdf-reader-js - A PDF viewer
  • Used when previewing Documents. It uses expo-file-system and expo-constants.
  • Attempted to use react-native-picker, but does not work in Expo. They also use rn-fetch-blob which is no longer maintained.
• react-native-picker-select - Used as a native Select component
  • There are some unknown crashing errors in older Android versions. In addition, this package seems lightly maintained, so we should take this library with a grain of salt.
• currency-formatter
  • Android does not support the Intl API, which we use to format currency. This is added for Android support.