jbowa / emission

React Native Components

Reactions ⇒ Emissions

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 Emission 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.

Meta

• State: production
• Point People: @alloy, @ashfurrow
• CI:
  • React Native components:
  • Native unit tests:
• Troubleshooting

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. Also check out the map to Emission to oriented yourself to the codebase.

Prerequisites

• Xcode

Installation

Automated install:

• OSS: git clone https://github.com/artsy/emission.git && cd emission && make setup && make oss
• Artsy: git clone https://github.com/artsy/emission.git && cd emission && make setup && make artsy. Then look in 1password for the Eigen keys.

Manual install

1. Install Node.js, and Yarn: $ brew install node yarn
2. Install file watcher used by React Native:
   • $ brew install watchman
3. Install NPM modules: $ yarn install
4. Install Pods: $ cd Example && bundle && bundle exec pod install

Ran into issues? Try troubleshoot.

Running the project:

1. Run $ yarn 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.

2. Now from Xcode you can run the app in Example/Emission.xcworkspace.

• If you already have the app installed, you can run open -a Simulator to open the last sim, and then xcrun simctl launch booted net.artsy.Emission to open the app.
• If you run into any issues with the above commands oftentimes a full clean can help. Run rm -rf node_modules; rm -rf Example/Pods; yarn install; cd Example; bundle exec pod install and then repeat the steps above.

Daily Development

To use Storybooks, select "Open Storybook" from the "Developer" section of the root view in the app. You can also use the VSCode Storybooks plugin.

To create your React components and Relay containers, use the omakase generator. E.g.

$ yarn om g src/lib/Scenes/Artwork/ArtworkMetadata -f Artwork

$ yarn om g src/lib/Scenes/Artwork/ArtworkMetadata -r Artwork

$ yarn om g src/lib/Scenes/Artwork/ArtworkMetadata -p Artwork.artists

For full details see the CLI README.

---

Using VS Code as an IDE

There is a comprehensive document covering our setup here.

Debugging

There is a comprehensive document covering the various options.

Updating Dependencies

We vendor some data from other repositories that you will sometimes need to update. Notably the GraphQL schema of metaphysics that Relay uses to generate queries from: $ yarn sync-schema

Deploying Emission

Note: Deploys are mostly automated using yarn release patch|minor|major; the following instructions should be valid but take a look at this issue if things break.

Note 2: If you're updating React Native, you're going to have to do a lot of this stuff manually. See the makefile, ashfurrow or alloy for more info.

1. Don't change the package.json version.
2. For non-pre-releases, use either yarn release patch, yarn release minor, or yarn release major. For pre-releases, use yarn release prerelease. Pre-releases are usually reserved for testing major releases before deployment.
3. After the release has finished compiling, a PR will be automatically created in Metaphysics with an updated complete.queryMap.json, which can be self assigned and merged.
4. If integrating in Eigen consult the docs on updating Emission

Automated Emission App Deploys

The Emission app (in Example/) is deployed automatically to TestFlight once a week through emission-nebula. See that repo for more details.

Resources

• React Native:

  • http://makeitopen.com
  • https://github.com/fbsamples/f8app/
  • http://facebook.github.io/react-native/docs/getting-started.html
  • http://beginning-mobile-app-development-with-react-native.com/book-preview.html

• Relay:

  • https://facebook.github.io/relay/docs/getting-started.html
  • https://github.com/facebook/relay/tree/master/examples
  • https://github.com/fbsamples/f8app/

• TypeScript:

  • https://www.typescriptlang.org
  • https://github.com/basarat/typescript-book

• Testing:

  • https://facebook.github.io/jest/
  • https://facebook.github.io/jest/docs/api.html#content
  • https://facebook.github.io/jest/blog/2016/07/27/jest-14.html

• Flexbox:

  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • http://blog.krawaller.se/posts/a-react-app-demonstrating-css3-flexbox/
  • https://egghead.io/courses/flexbox-fundamentals

• React Native Storybooks:

  • https://github.com/storybooks/storybook/
  • https://github.com/storybooks/storybook/tree/master/app/react-native

• React Native Debugger:

  • https://github.com/jhen0409/react-native-debugger

License