everest-native-shell v1.0.9
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
Getting Started
- Clone repo
- Install dependencies -
yarn
- Run simulator:
yarn ios
oryarn 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:
- Expo app must be pre-configured as a Managed Workflow
- In
package.json
, make sure to removeprivate
property and add aname
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:
- Install debugger with homebrew -
brew update && brew install --cask react-native-debugger
- Before starting up your local server, run -
open -g 'rndebugger://set-debugger-loc?port=19000'
- In a separate terminal window, start your local server -
yarn ios
oryarn android
- In your simulator, select
Debug remote JS
from the Developer Menu - 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
andexpo-constants
. - Attempted to use
react-native-picker
, but does not work in Expo. They also usern-fetch-blob
which is no longer maintained.
- Used when previewing Documents. It uses
- 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.
- Android does not support the