react-native-ar / react-native-arkit

React Native binding for iOS ARKit
MIT License
1.72k stars 143 forks source link

Adds Multipeer Worldmap sending between peers as well as sending JSON between peers. Fixes podspec to work with autolinking. #208

Open code-matt opened 4 years ago

code-matt commented 4 years ago
        <ARKit
          ....
          onMultipeerJsonDataReceived={event => {
            Vibration.vibrate(300);
            let {data} = event.nativeEvent;
            console.log(data);
          }}
          onPeerConnected={(event) => {
            Vibration.vibrate(1000);
            console.log('peer connected!!!');
            console.log(event.nativeEvent.peer);
          }}
          onPeerDisconnected={(event) => {
            Vibration.vibrate(1000);
            console.log('peer disconnected!!!');
            console.log(event.nativeEvent.peer);
          }}
          onPeerConnecting={(event) => {
            Vibration.vibrate(1000);
            console.log('peer connecting!!!');
            console.log(event.nativeEvent.peer);
          }}
        </ARKit>
ARKit.sendWorldmapData(); // sends worldmap data to all peers

ARKit.startBrowsingForPeers('somename'); // hosting a multipeer session called some name

ARKit.advertiseReadyToJoinSession('somename'); // start looking for and automatically join a session called 'somename'

ARKit.sendDataToAllPeers({test: 'data'})
  .then(res => {
    console.log('data send success: ', res); // res is [null] for a success for now
  })
  .catch(error => {
    console.log('error');
  });

// track uuids with your own state and the multipeer connection state callbacks
ARKit.sendDataToPeers([<peerUUIDstring>, <peerUUIDstring>], {test: 'data'})
  .then(res => {
    console.log('data send success: ', res); // res is [null] for a success for now
  })
  .catch(error => {
    console.log('error');
  });

// ARKit.openMultipeerBrowser() // open the iOS multipeer browser and see who is connected and also disconnect them.. people need names eventually
kibiz0r commented 4 years ago

I was able to get this to work by adding the following to my Podfile:

  pod 'RCTARKit', :path => "../node_modules/react-native-arkit/ios/RCTARKit.podspec"
  pod 'PocketSVG'

So all together:

npx react-native init AwesomeProject
cd AwesomeProject
yarn add code-matt/react-native-arkit
cd ios
# <modify Podfile here>
pod install
# <set your code-sign and camera permissions>
npx react-native run-ios --device

Note: I don't think I ever ran the react-native link step mentioned in the README, and it does warn me (error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually) but it still works.

code-matt commented 4 years ago

Thanks for giving it a test! I just tried again and was able to get it going without modifying Podfile (except to remove the test/tvios targets)

react-native init testproject --npm
cd testproject
npm install code-matt/react-native-arkit react-native-svg --save
cd ios
pod install
<open xcworkspace file>
<set signing certs and delete tvios and test targets>
<select physical device and click play>

Installing react-native-svg and letting it autolink gets those PocketSVG dependencies in there

I ended up with this package.json

{
  "name": "testarkitfork",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-arkit": "github:code-matt/react-native-arkit",
    "react-native-svg": "^11.0.1"
  },
  "devDependencies": {
    "@babel/core": "7.8.6",
    "@babel/runtime": "7.8.4",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "6.8.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.56.4",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

I wonder if yarn has anything to do with it, if you still have issues.