{"id":4411,"url":"https://github.com/sibelius/ExNavRelay","last_synced_at":"2025-07-31T13:30:48.132Z","repository":{"id":71333512,"uuid":"73849449","full_name":"sibelius/ExNavRelay","owner":"sibelius","description":"Example of integrating ex-navigation with Relay","archived":false,"fork":false,"pushed_at":"2016-11-15T19:55:04.000Z","size":460,"stargazers_count":25,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-27T07:24:44.766Z","etag":null,"topics":["boilerplate","ex-navigation","navigation","react-native","relay"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sibelius.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-11-15T19:47:51.000Z","updated_at":"2021-07-06T17:28:35.000Z","dependencies_parsed_at":"2023-07-26T04:07:43.699Z","dependency_job_id":null,"html_url":"https://github.com/sibelius/ExNavRelay","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sibelius%2FExNavRelay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sibelius%2FExNavRelay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sibelius%2FExNavRelay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sibelius%2FExNavRelay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sibelius","download_url":"https://codeload.github.com/sibelius/ExNavRelay/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228248558,"owners_count":17891447,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","ex-navigation","navigation","react-native","relay"],"created_at":"2024-01-05T20:17:11.071Z","updated_at":"2024-12-05T06:31:39.640Z","avatar_url":"https://github.com/sibelius.png","language":"JavaScript","readme":"# React Native + ExNavigation + Relay\n\nThis is a sample repository that shows how to integrate React Native with [ExNavigation](https://github.com/exponentjs/ex-navigation) and Relay\n\nIt is connecting to this boilerplate code [graphql-dataloader-boilerplate](https://github.com/sibelius/graphql-dataloader-boilerplate)\n\n![alt tag](https://github.com/sibelius/ExNavRelay/blob/master/demo/demo.gif)\n\n## Description\n- 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.\n- plugins folder has babelRelayPlugin configuration, that tells to Relay with schema.json it should use to compile Relay.QL queries\n\n.babelrc for Relay\n```json\n{\n    \"presets\": [\n        \"react-native\",\n        \"react-native-stage-0/decorator-support\"\n    ],\n    \"plugins\": [\n        \"./plugins/babelRelayPlugin\"\n    ],\n}\n```\nObs.: react-native-stage-0/decorator-support is to enable `@withNavigation` needed by ex-navigation\n\n### RelayStore.js\nIt is a custom Relay.Store that enables you to change your Network Layer. For instance, when you want to set the user token.\n\n- Usage:\n```js\nRelayStore.reset(\n  new Relay.DefaultNetworkLayer('http://localhost:5000/graphql')\n);\n```\n\n### RelayUtils.js\nBased on https://gist.github.com/janicduplessis/f513032eb37cdde5d050d9ce8cf0b92a by @janicduplessis\nProvides a very handy function to create a Relay.Renderer container to fetch data from Relay\n\n- Usage:\n```jsx\nimport { createRenderer } from './RelayUtils'\nexport default createRenderer(RelayApp, {\n  queries: ViewerQuery,\n  fragments: {\n    viewer: () =\u003e Relay.QL`\n      fragment on Viewer {\n        users(first: 10) {\n          edges {\n            node {\n              name\n            }\n          }\n        }\n      }\n    `,\n  },\n});\n```\n\n### Ex-Navigation + Relay\n1. You should use `createRenderer` helper in any component that will be `pushed` into a `StackNavigation`\n   - For instance, check [UserList.js](https://github.com/sibelius/ExNavRelay/blob/master/src/UserList.js)\n\n- Pushing a route that uses Relay and depends on a parameter (https://github.com/sibelius/ExNavRelay/blob/master/src/UserList.js#L85)\n\n- Define that your route will need a parameter from ex-navigation like these (https://github.com/sibelius/ExNavRelay/blob/master/src/UserDetail.js#L34)\n- You also need to define it inside `initialVariables` (https://github.com/sibelius/ExNavRelay/blob/master/src/UserDetail.js#L37)\n\n\n","funding_links":[],"categories":["Components","Index"],"sub_categories":["Navigation","Relay"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsibelius%2FExNavRelay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsibelius%2FExNavRelay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsibelius%2FExNavRelay/lists"}