CODEWITHSUNDEEP
react-nativerelay
Raheel G
Raheel G

Reputation: 301

React Native & Relay, compatibility. Official way to get them to work together?

Preface: I am new to Javascript, Babel and React-Native.

I have been developing my app using the TodoMVC example from the relay source. I was wondering if it's possible to get React-Native + Relay to work together easily?

I setup my babelRelayPlugin and added it to my .babelrc. I installed the npm packages for "react-relay":"^0.7.3" and "babel-relay-plugin": "^0.7.3" but after running "npm install" and "react-native start" I either get an error saying "Unrecognized module 'react-relay'" OR "Relay is not defined".

From reading this thread and looking at the last comment ( https://github.com/facebook/relay/issues/26#issuecomment-194570137 ) it looks like at the moment I should just use TodoMVC as my base for new React-Native + Relay projects.

Is this correct?

Here is my .babelrc

{
  "env": {
    "development": {
      "passPerPreset": true,
      "presets": [
        {
          "plugins": [
            "./plugins/babelRelayPlugin"
          ]
        },
        "react-native"
      ]
    },
    "server": {
      "plugins": [
        "./plugins/babelRelayPlugin"
      ],
      "presets": [
        "es2015",
        "stage-0"
      ]
    }
  }
}

Here is my package.json

{
  "name": "testApp",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "clean:babelrc": "find ./node_modules -name react-packager -prune -o -name '.babelrc' -print | xargs rm -f",
    "postinstall": "npm run clean:babelrc",
    "start": "BABEL_ENV=server babel-node ./server.js",
    "update-schema": "babel-node ./scripts/updateSchema.js"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react-native": "^1.5.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-relay-plugin": "^0.7.3",
    "express": "4.13.4",
    "express-graphql": "0.4.9",
    "graphql": "0.4.17",
    "graphql-relay": "0.3.6",
    "moment": "^2.12.0",
    "node-fetch": "^1.4.1",
    "react": "^0.14.5",
    "react-native": "^0.22.2",
    "react-native-animatable": "^0.5.2",
    "react-native-aws3": "0.0.1",
    "react-native-camera": "git+https://github.com/lwansbrough/react-native-camera.git",
    "react-native-console-panel": "0.0.7",
    "react-native-contacts": "^0.2.3",
    "react-native-keyboard-aware-scroll-view": "0.0.6",
    "react-relay": "^0.7.3",
    "sync-request": "^3.0.0",
    "uuid-v4": "^0.1.0"
  },
  "devDependencies": {
    "babel-cli": "^6.6.4",
    "flow-bin": "^0.22.1"
  },
  "engines": {
    "npm": ">=3"
  }
}

Upvotes: 2

Views: 386

Answers (1)

Raheel G
Raheel G

Reputation: 301

I managed to fix the issue. I added "babel-core": "^6.7.6" as a dev dependency. Removed all the scripts and cloned the project from git to a new folder. Everything runs perfectly now!

Upvotes: 1

Related Questions