Example of integrating ex-navigation with Relay
JavaScript Objective-C Python Java
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
__tests__ UserList and UserDetail using Relay with ex-navigation Nov 15, 2016
android UserList and UserDetail using Relay with ex-navigation Nov 15, 2016
data UserList and UserDetail using Relay with ex-navigation Nov 15, 2016
demo UserList and UserDetail using Relay with ex-navigation Nov 15, 2016
ios UserList and UserDetail using Relay with ex-navigation Nov 15, 2016
plugins
src UserList and UserDetail using Relay with ex-navigation Nov 15, 2016
.babelrc UserList and UserDetail using Relay with ex-navigation Nov 15, 2016
.buckconfig UserList and UserDetail using Relay with ex-navigation Nov 15, 2016
.eslintrc UserList and UserDetail using Relay with ex-navigation Nov 15, 2016
.flowconfig UserList and UserDetail using Relay with ex-navigation Nov 15, 2016
.gitignore UserList and UserDetail using Relay with ex-navigation Nov 15, 2016
.watchmanconfig UserList and UserDetail using Relay with ex-navigation Nov 15, 2016
README.md add demo gif Nov 15, 2016
index.android.js
index.ios.js
package.json UserList and UserDetail using Relay with ex-navigation Nov 15, 2016
yarn.lock UserList and UserDetail using Relay with ex-navigation Nov 15, 2016

README.md

React Native + ExNavigation + Relay

This is a sample repository that shows how to integrate React Native with ExNavigation and Relay

It is connecting to this boilerplate code graphql-dataloader-boilerplate

alt tag

Description

  • data folder contains schema(.json/.graphql) of your backend graphql server, it will be used by Relay to compile your Relay.QL queries to code.
  • plugins folder has babelRelayPlugin configuration, that tells to Relay with schema.json it should use to compile Relay.QL queries

.babelrc for Relay

{
    "presets": [
        "react-native",
        "react-native-stage-0/decorator-support"
    ],
    "plugins": [
        "./plugins/babelRelayPlugin"
    ],
}

Obs.: react-native-stage-0/decorator-support is to enable @withNavigation needed by ex-navigation

RelayStore.js

It is a custom Relay.Store that enables you to change your Network Layer. For instance, when you want to set the user token.

  • Usage:
RelayStore.reset(
  new Relay.DefaultNetworkLayer('http://localhost:5000/graphql')
);

RelayUtils.js

Based on https://gist.github.com/janicduplessis/f513032eb37cdde5d050d9ce8cf0b92a by @janicduplessis Provides a very handy function to create a Relay.Renderer container to fetch data from Relay

  • Usage:
import { createRenderer } from './RelayUtils'
export default createRenderer(RelayApp, {
  queries: ViewerQuery,
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        users(first: 10) {
          edges {
            node {
              name
            }
          }
        }
      }
    `,
  },
});

Ex-Navigation + Relay

  1. You should use createRenderer helper in any component that will be pushed into a StackNavigation