/emission

React Native Components

Primary LanguageTypeScriptMIT LicenseMIT

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

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.

Installation

Automated install: git clone https://github.com/artsy/emission.git; cd emission; make oss.

Manual install

  1. Make sure to check out submodules with git submodule update --init
  2. Install Node.js, and Yarn: $ brew install node yarn
  3. Install file watcher used by React Native:
    • $ brew install pcre
    • $ brew link pcre
    • $ brew install watchman --HEAD
  4. Install NPM modules: $ yarn install
  5. Install Pods: $ cd Example && bundle && bundle exec pod install

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.

Daily Development

If you like git hooks, you could setup the following:

  • Lint and auto-fix new changes on commit: $ echo -e "#!/bin/sh\nyarn run lint-staged\n" > .git/hooks/pre-commit; chmod +x .git/hooks/pre-commit
  • Run type-checker before push: $ echo -e "#!/bin/sh\nyarn run type-check\n" > .git/hooks/pre-push; chmod +x .git/hooks/pre-push

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

  1. We vendor some data from other repositories that you will sometimes need to update. You can either update all of them with $ yarn run sync-externals or individually:
    • The GraphQL schema of metaphysics that Relay uses to generate queries from: $ yarn run sync-schema
    • The colors defined in Artsy’s style-guide: $ yarn run sync-colors

Understanding Relay

We have some debugging tip when using Relay.

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`

Deployment

  1. Ensure that the React version required by Emission has been published to our spec-repo.
  2. Update the CHANGELOG file to reflect the version that will be released and commit it.
  3. Release the version with either npm version patch, npm version minor, or npm version major.

Resources