React Native Components used by Eigen.
- Install Node.js and type checking tool:
$ brew install node flow
- Install file watcher used by React Native:
$ brew install pcre
$ brew link pcre
$ brew install watchman --HEAD
- Install NPM modules:
$ npm install
- Install Pods:
$ cd Example && pod install
- Configure secrets:
- Copy configuration file:
$ cd Example/Emission && cp Configuration.h.sample Configuration.h
- Edit the configuration file as per the instructions inside.
- Copy configuration file:
There is a full 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.
-
Run
$ npm run storybook
from the top directory, to get react-native-storybooks running. -
Now from Xcode you can run the app in
Example/Emission.xcworkspace
.
- 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`
-
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