https://github.com/react-brasil/reactconfbr-app

React Conf BR App built with create-react-native-app
https://github.com/react-brasil/reactconfbr-app

create-react-native-app expo react react-native reactconf reactconfbr

Last synced: 3 days ago
JSON representation

React Conf BR App built with create-react-native-app

• Host: GitHub
• URL: https://github.com/react-brasil/reactconfbr-app
• Owner: react-brasil
• Created: 2017-03-27T18:50:58.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-02-14T16:42:13.000Z (over 5 years ago)
• Last Synced: 2024-05-28T15:49:02.771Z (6 months ago)
• Topics: create-react-native-app, expo, react, react-native, reactconf, reactconfbr
• Language: JavaScript
• Size: 1.49 MB
• Stars: 81
• Watchers: 21
• Forks: 14
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Native + React-Navigation + Relay Modern

This is a sample repository that shows how to integrate React Native with [ReactNavigation](https://github.com/react-community/react-navigation) and [Relay Modern](https://facebook.github.io/relay/).

For the Relay-Classic Version see this [branch](https://github.com/sibelius/ReactNavigationRelayModern/tree/relay-classic) 

It is connecting to this boilerplate code [graphql-dataloader-boilerplate](https://github.com/entria/graphql-dataloader-boilerplate)

![alt tag](./demo/demo.gif)

## Description

- `data/` contains schema(.json/.graphql) of your GraphQL server. It will be used by Relay to compile your *graphql* queries to code

- `yarn relay` or `yarn relay:watch` are used to convert *graphql* literals into generated files. The second command watch changes when `data/` files are udpated

[`.babelrc`](.babelrc) for Relay Modern

```json

{

  "plugins": [

    ["relay", {"schema": "data/schema.json"}]

  ],

}

```

### Relay Environment

The file [src/createRelayEnvironment.js](src/createRelayEnvironment.js) creates a Relay Environment and a Network instance that configures Relay with a function to fetch queries from the remote server

### ReactNavigation + Relay Modern

1. You should use a Relay Container such as *[FragmentContainer](https://facebook.github.io/relay/docs/fragment-container.html)*, *[PaginationContainer](https://facebook.github.io/relay/docs/pagination-container.html)* or others in any component that will be `pushed` into a `StackNavigation`

   - For instance, check [UserList#createPaginationContainer](./src/UserList.js#L111)

- Pushing a route that uses Relay and depends on a parameter [UserList#navigate](./src/UserList.js#L88)

- Define that your route will need a parameter from react-navigation like these [UserDetail#query](./src/UserDetail.js#L57)

- You also need to define it inside `variables` [UserDetail#variables](./src/UserDetail.js#L63)