Emission is a collection of React Native Components which are consumed by Eigen. A writeup on how & why we made a lot of the repo decisions is on our blog here.
Inside here you will find:
- An example app for building and running Emission's components with an Eigen-like API.
- An NPM module that relies on React Native and manages the components.
- A Podspec that wraps it all together for easy external usage in Eigen.
- State: production
- Point People: @sarahscott, @alloy
This is a core Artsy Mobile OSS project, along with Energy, Eidolon, Eigen and Emergence.
Don't know what Artsy is? Check out this overview and more, or read our objc.io on team culture.
Want to know more about Emission? Read the mobile blog posts, or Emission's / React Native's specifically.
- Install Node.js, and Yarn:
$ brew install node yarn
- Install file watcher used by React Native:
$ brew install pcre
$ brew link pcre
$ brew install watchman --HEAD
- Install NPM modules:
$ yarn install
- Install CocoaPods:
$ gem install cocoapods
- Install Pods:
$ cd Example && ARTSY_STAFF_MEMBER=true pod install
Why Yarn? See our JS glossary for Yarn,
There is a comprehensive document covering our setup here.
-
Run
$ npm start
from the top directory, which will:- Clean the example app’s Xcode build dir.
- Start the example app’s React Native packager.
- Start the React Storybooks environment.
-
Now from Xcode you can run the app in
Example/Emission.xcworkspace
.
You can use React Native debugger which is a standalone app to inspect views as well as the standard chrome debugging tools.
- Install RN debugger:
$ brew update && brew cask install react-native-debugger
. - You can now use
$ npm run rndebugger
instead of$ npm start
to configure the React Native packager to use RNdebugger.
- We vendor some data from other repositories that you will sometimes need to update. You can either update all of them
with
$ npm run sync-externals
or individually:- The GraphQL schema of metaphysics that Relay uses to generate queries from:
$ npm run sync-schema
- The colors defined in Artsy’s style-guide:
$ npm run sync-colors
- The GraphQL schema of metaphysics that Relay uses to generate queries from:
Some helpful Relay documentation is listed below, but the general workflow is:
- Build a fragment for each child component that specifies only the attributes used by the component itself (no extraneous information).
- Ensure the parent component calls
getFragment
for each child component that uses Relay. - Make sure to supply every child component’s
props
upon instantiation in the parent.
Another gotcha is around fragments that use variables. For this it is important to understand that whenever a Relay backed hierarchy is used, 2 trees will be rendered.
- A tree of all Relay query fragments is rendered into a single query.
- Once the query has been performed, the view component tree is rendered.
What this means in practice, is that you will need to pass variables down both those trees.
- Once from the Relay route down through all
getFragment(name, variables)
calls. - Second down through the props of all components.
See:
- https://github.com/artsy/emission/commit/e84940b8360b8c5b838045a619be5b8558d5fad7
- facebook/relay#309 (comment)
Try quitting and restarting your node instance if you change something Relay-related and you run into this error:
Unhandled JS Exception: RelayQL: Unexpected invocation at runtime. Either the Babel transform was not set up, or it
failed to identify this call site. Make sure it is being used verbatim as `Relay.QL`
Currently deploying the emission example app to Testflight is done manually.
On the other hand, our JS is deployed from master to our dev build on Testflight via AppHub.
-
React Native:
-
Relay:
-
Testing:
-
Flow:
- http://flowtype.org/docs/type-annotations.html
- http://flowtype.org/docs/react.html
- http://flowtype.org/docs/quick-reference.html (and the rest of the language reference)
-
Flexbox:
-
React Native Storybooks:
-
React Native Debugger: