Allow auto-deployment with react-native-pod #117

rhdeck · 2017-11-28T22:03:41Z

By deploying PocketSVG as a CocoaPod via react-native-pod peer dependency (which also takes care of creating the Podfile, you can allow automatic installation. No more opening Xcode!

The project.pbxproj change tells the static library to use the parent app's Pod.

macrozone · 2017-11-28T22:06:48Z

yeah, cool! I heard that in react-native 0.50 there is built-in support for podfiles. Do you use that?

macrozone · 2017-11-28T22:13:37Z

i will check it tomorrow and release it if it works properly

rhdeck · 2017-11-28T22:17:12Z

As I understand it, the support extension is really for podspec files, which are mutually exclusive (in RN link) with static libraries. The react-native-pod add-in lets libraries like yours add pod dependencies via package.json, and auto-installs them.

…

On Tue, Nov 28, 2017 at 5:13 PM Marco Wettstein ***@***.***> wrote: i will check it tomorrow and release it if it works properly — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#117 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ALov_7DaPeWgs2CwjSf24B6g3arkITVKks5s7IWSgaJpZM4Qt-3P> .

macrozone · 2017-12-05T10:11:45Z

Hi @rhdeck this issue here rhdeck/react-native-pod#1 is blocking us from merging this pr.

rhdeck · 2017-12-06T21:59:40Z

I published a fix to react-native-pod, but I'm not sure how you came across it. Can you share the workflow? you can give it another go, but I want the module to be useful, so understanding your situation would be worth a lot.

rhdeck · 2017-12-06T22:16:34Z

FWIW, here is my workflow for a one-line command to build and run your sample app using my fork. Obv it assumes the demo App.js code is in cwd.

react-native init testapp ; \
cd testapp ; \
cp ../App.js . ; \
yarn add \
  rhdeck/react-native-arkit \
  react-native-pod \
  react-native-fix-ios-version \
  react-native-camera-ios-enable \
  react-native-bundlebase \
  react-native-runios-withdevteam ; \
react-native link ; \
react-native runios --device --development-team

macrozone · 2017-12-21T12:04:17Z

appsample/App.js

+      </View>
+    );
+  }
+}


can you remove that?

Yes, will remove all the appsample stuff. I learned how to do a react-native template, and it is a better approach.

macrozone · 2017-12-21T12:14:38Z

@rhdeck could you provide migration information? What needs to be changed in the xcode project? at the moment you need to add pocketsvg to libraries and to Embedded Binaries. Can this be removed?

rhdeck · 2017-12-21T12:54:48Z

I’ll rebase and update my pr later today and send you an explanation. Basically I am changing the way dependencies get installed so you never have to open Xcode.

…

On Thu, Dec 21, 2017 at 7:14 AM Marco Wettstein ***@***.***> wrote: @rhdeck <https://github.com/rhdeck> could you provide migration information? What needs to be changed in the xcode project? at the moment you need to add pocketsvg to libraries or to Embedded Binaries ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#117 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ALov__6IlDBWYddoUHz7LnG3m9FsdBlvks5tCkuvgaJpZM4Qt-3P> .

rhdeck · 2017-12-21T23:18:33Z

I'm not going to get that rebase done today - aiming for tomorrow.

Yes, the plan is to remove the manual steps related to pocketsvg entirely. Instead, we use a couple of peer dependencies so that you can just build on top of the RN "hello world" project (created by react-native init:

react-native-fix-ios-version to set the target version of the app to iOS 11 (necessary for ARKit)
react-native-pod to manage the installation of the pods.

Both will execute the necessary changes on the underlying project as of react-native link.

A few others will help too:

react-native-camera-ios-enable will add the privacy text,
react-native-runios-withdevteam will allow launching the app to device without ever opening xcode to manage the signing - it takes care of it on the command line.
react-native-bundlebase is going to be necessary for a lot of people who chose generic names for their projects, since by default the rn project names the bundle something like "org.react.example.[projectname]" and iTunes Connect requires that the full bundle identifier be owned by you.

These too do their work as of react-native link

That's why I recommended that "magic spell" extended command line approach a couple weeks ago - it just works - and you never touch xcode!

Those are just notes tho. Code changes to follow. I love your project - I want to help make it more deployable!

…equires IOS 11

macrozone · 2018-02-07T13:01:59Z

hi @rhdeck

I tried to use it, but it does not work on a existing project. I typed react-native link in the project directory, but I receive this error on build:

Showing All Messages
/path/to/react-native-arkit/ios/RCTConvert+ARKit.m:10:9: 'SVGBezierPath.h' file not found

I tried to debug that, with no luck.

I already have a podfile in the project. So i deleted that, but no podfile is created on react-native link react-native-arkit

EDIT: I had to remove it first with react-native unlink react-native-arkit and then calling react-native link. unlinking and then calling react-native link react-native-arkit does not work

Edit2: After going deep in the rabbit hole, i still get the same error as above:

/path/to/react-native-arkit/ios/RCTConvert+ARKit.m:10:9: 'SVGBezierPath.h' file not found

Maybe some information:

i am using a linked version of react-native-arkit (yarn link react-native-arkit), so that i can develop on it. Maybe this messes with the path resolution of xcode and that's why header files are not found. beeing able to link the library is a must though.

macrozone · 2018-02-07T16:21:13Z

npm stopped to allow unexisting dependencies in the package.json, so I thought this here would be a good solution.

unfortunatly I could not manage to get it run. I tried 4 hours, but xcode and cocoapods is a big riddle for me.

I now found a workaround by using a git-submodule for PocketSVG. This needs a small adjustment on existing projects (see release notes for 0.8.x beta).

I would love to get this to work with cocoapods, but it's hard without a clear migration path.

rhdeck · 2018-02-07T18:14:31Z

Sounds like there are a couple moving parts here

1. yarn link

Yes, the yarn link creates problems in react-native! The trick here is that symlinks are one-way. Your app knows about the module at /node_modules/react-native-arkit/ios but the module doesn't know about the Pods directory at ../../../ios/Pods - because it's not there in a linked situation. So a relative path symlink that works for deployment does not work for development.

When I am dev-ing using the link where I have a dependency on Pods I create an additional header path for my static library under "Build Settings" of
($SRCROOT)/../../[appname]/ios/Pods (recursive) to the module I am working with for it to work properly. (I keep the module in a peer directory with my app, so I have Documents/react-native-arkit and Documents/[appname], where because of the link there is a symlink at Documents/[appname]/node_modules/react-native-arkit. Not the only solution, but the one I like best and would recommend.

Consumers of the module will not have to do the above. It just works! (See "magic spell" below)

2. react-native-pod

react-native-pod hooks the prelink and postlink events of react-native link (no arguments) so that whenever you run it, it will update your podfile based on the currently installed dependencies and their pods entry in package.json. So I think your issue was probably that you kept adding an argument to your link command.

Deployment Example

Here is a GUI-free "magic spell" that I tested on my macbook with XCode 9.2:

react-native init testapp
cd testapp
yarn add rhdeck/react-native-arkit react-native-pod react-native-bundlebase react-native-fix-ios-version react-native-camera-ios-enable react-native-setdevteam react-native-xcode
react-native setdevteam
react-native link
react-native xcode

(react-native xcode takes care of determining whether to open the xcodeproj or xcworkspace)

Then select your device and press play!

If you wanted to just run from the command line and deploy to your default device, you could:

react-native run-ios --device

Then add your code from the README to App.js - and away you go. (A little processcolor error will occur due to the green and white lights. Remove or wrap the strings with {processColor("[color]")} to get rid of your red screen! )

I have been doing quite a bit of deeply native development with iOS RN (e.g. I made most of those components I referenced in December, as well as modules like react-native-coreml) so feel free to chat me if I can help on that front.

I think your project is really cool and I hope with this PR that I could help make it easier for others to deploy!

rhdeck · 2018-02-14T18:38:41Z

Made a thing that could help with your development: react-native-fix-pod-links

The key is that it makes that bridging reference work.

Assuming you have an app you are developing from, you don't need this part, and can skip to the next one.

react-native init testapp 
cd testapp
yarn link react-native-arkit (Assuming your package is yarn linked)
yarn add react-native-arkit

Great! Let's add the necessary tools to your app, from the cwd of your project root.

yarn add react-native-fix-pod-links  react-native-pod react-native-bundlebase react-native-fix-ios-version react-native-camera-ios-enable react-native-setdevteam react-native-xcode
react-native setdevteam
react-native addpodlinks <-- This is the new command
react-native link
react-native xcode

So what does this do? It will make sure that your library - whereever it is - maintains the link to your pods via an absolute path added to header search paths.

You can remove that absolute path:

react-native removepodlinks

Its brand new, but I thought it might help bridge the gap between making this easy to distribute and easy to develop. Hope it helps you!

bnjm · 2018-04-09T22:31:58Z

Any more luck with this? There's another dependency that might be added to the project (https://github.com/magicien/GLTFSceneKit) and an auto install would simplify things a lot.

rhdeck · 2018-04-10T14:20:37Z

I'll clone down the master branch and test/update.

rhdeck · 2018-04-12T14:08:46Z

I updated my repo and the following works for live development in XCode and VS Code (fixing pod header search paths using react-native-fix-pod-links plugin command react-native addpodlinks):

git clone https://github.com/rhdeck/react-native-arkit ; \
cd react-native-arkit ; \
yarn install ; \
cd .. ; \
react-native init arkittest4 ; \
cd arkittest4 ; \
yarn add \
  link:../react-native-arkit \
  react-native-pod \
  react-native-fix-pod-links \
  react-native-xcode \
  react-native-setdevteam \
  react-native-fix-ios-version \
  react-native-camera-ios-enable ; \
react-native link ; \
react-native setdevteam; \
react-native addpodlinks; \
cp ../App.js . ; \
react-native xcode ; \
code .

The following works for a deployment situation:

react-native init arkittest3 ; \
cd arkittest3 ; \
yarn add \
  rhdeck/react-native-arkit \
  react-native-pod \
  react-native-setdevteam \
  react-native-fix-ios-version \
  react-native-camera-ios-enable ; \
react-native link ; \
react-native setdevteam; \
cp ../App.js . ; \
react-native run-ios --device

bnjm · 2018-04-15T19:42:25Z

Thanks!! I just tried this out both for local development and regular consumption. With the one-liners above I ran into a problem as I have two version xcode installed (xcode-beta is or was required for ARKit 1.5 features).

Otherwise it worked great, all I had to do was open workspace the file. For as long as this project is iOS only I don't see that as a huge problem. It's such a nice improvement over manually linking everything.

@macrozone What do you think?

rhdeck · 2018-04-19T12:51:07Z

Side note on react-native xcode not working for you: in my experience the key to that and other command-line Xcode commands is in Xcode -> Preferences -> Locations -> Command Line Tools. Will launch with whatever you have set. Like you, I use Xcode 9.4 beta and find the plugin useful for quick-opening my workspace or project.

bnjm · 2018-04-19T19:52:41Z

Thanks for the tip! How does it look to add another pod into react-native-arkit itself? I've been trying with react-native addpod '....' from within the react-native-arkit project but it fails, I believe because it is not recognised as a react-native project (react-native link also does not work).

rhdeck · 2018-04-19T20:28:23Z

Ah - you want to add the pod to the info in react-native-arkit, like gitf? Since you don't want the dependency in your package.json, I recommend global install and running from there:

yarn global add react-native-pod
cd ~/Documents/GitHub/react-native-arkit
react-native-pod --help # (to get list of commands)
react-native-pod addpod --help # (to get info on how to add a pod)
react-native-pod addpod PocketSVG #if you wanted to reinstall pocketsvg without regard to version
react-native-pod addpod PocketSVG --podversion 2.0.0 #if you wanted to reinstall pocketsvg specifically at 2.0.0

NB all this does is modify the "pods" entry in your package.json file. You can always edit this directly if you like. The following steps work either way.

Assuming that this local repo is still linked to your wrapper testing app, you do this to update the app:

cd ~/Documents/testingapp
react-native link # watch your podfile update and the new dependency get installed
react-native xcode # happy coding

Since this adds the pod to you package.json in the react-native-arkit module, any future apps will get that benefit as soon as they link. (Assuming they have the react-native-pod peerDependency added to their app)

That help?

(I would have shown how to add gITF, but the cocoapods search engine is down right now)

bnjm · 2018-04-19T22:24:18Z

Thanks! I followed all the steps using the global react-native-pod and it seemed to work correctly to install the GLTFSceneKit pod...the GLTFSceneKit.framework gets built and placed in the Pods/Products.

However @importing GLTFSceneKit back in react-native-arkit results in "Module not found". I thought it would be a Framework Search Paths issue but that seems to be all correct. It might also be a module specific issue separate from react-native-pod.

rhdeck · 2018-04-19T22:26:21Z

Now that you've given me the name of the pod, I'll try it on my end too.

rhdeck · 2018-04-19T22:45:12Z

I took this for a spin and got a few data points:

GLTFSceneKit is in Swift! Good choice.
The command @import GLTFSceneKit generates a red ! "Module not found" in AppDelegate.m (which means it is not about the relationship with the react-native-arkit static library, which in turn means that there is no react-native-pod or react-native-fix-pod-links play here)
The documentation says to use that @import command.

I kind of suspect that this is a Swift-OC interop issue. Getting Swift code to work in Objective-C usually takes explicit @objc attributes on classes/functions and at a gloss I don't see that in the Pod. But I don't see an immediate solution - will let you know if I come across one.

bnjm · 2018-04-20T12:20:19Z

That makes sense about objc and Swift interop and shouldn't block this PR.

I tried again with an objc specific pod (GLTFSCN from https://github.com/warrenm/GLTFKit) and got a little further, #import <GLTF/GLTF.h> works correctly, however the path links inside the project are broken

Am I missing a step with react-native-fix-pod-links?

rhdeck · 2018-04-20T13:48:51Z

I managed to replicate your experience. And this time it was specific to using the import statement from the static library - from AppDelegate.m it works fine.

I notice that PocketSVG (which continues to work fine) links internally using "myheader.h" internally while GLTF uses <GLTF/GLTFHeader.h>. This is the difference between global headers and local user headers, and is exactly the kind of detail that I got into Swift to get away from!

But essentially the issue is going to be something about how the static library relates to the global search paths as used in the Pod. This is something that maybe could be fixed through editing the pbxproj file, but I don't have an immediate answer, and our use case (referencing a cocoapod from a static library) is odd enough that Google isn't delivering for me.

All that said, I don't think this is driven by react-native-pod or react-native-fix-pod-links. It's just that these packages (at least at present!) don't solve this particular issue.

I'm running a couple tests in the background and will post a comment if they give more insight.

hehex9 · 2018-06-09T06:57:24Z

Any luck ?

rhdeck · 2018-06-10T20:30:12Z

The point of discussion six weeks ago was getting the SLs to talk with CocoaPods more broadly. This was not really a specific problem with the PR as I understood it, which has been tested to work properly with the PocketSVG pod dependency that react-native-arkit uses today.

My tests that ran in April didn't really tell me anything more, except that the question of managing the dependency graph with SLs is a mess in XCode. This is an open area of development- really, learning - to make react-native-pod more useful.

I'm open to having been wrong about @bnjm's take on this - don't mean to speak out of turn!

rhdeck added 2 commits November 28, 2017 16:34

Changing dependency to use the PocketSVG pod

6d22bde

Adding react-native-pod peer dependency

908925e

rhdeck added 6 commits December 6, 2017 17:30

Adding sample app code

699e26a

Adding sample app for make-demo

582a9a4

Fixing sample package.json to remove reference to the make-demo-app

fd87a53

Removing sample app files - adding sample app pointer

fafdbd2

Fixing package.json typo

70f9338

Merge branch 'master' into master

b6c8c6f

macrozone reviewed Dec 21, 2017

View reviewed changes

rhdeck added 2 commits January 31, 2018 18:50

Merge https://github.com/HippoAR/react-native-arkit

e694cf4

Adding peer dependency of react-native-fix-ios-version because this r…

66a6eea

…equires IOS 11

Merge remote-tracking branch 'upstream/master'

62c9821

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow auto-deployment with react-native-pod #117

Allow auto-deployment with react-native-pod #117

rhdeck commented Nov 28, 2017

macrozone commented Nov 28, 2017

macrozone commented Nov 28, 2017

rhdeck commented Nov 28, 2017 via email

macrozone commented Dec 5, 2017

rhdeck commented Dec 6, 2017

rhdeck commented Dec 6, 2017

macrozone Dec 21, 2017

rhdeck Dec 21, 2017

macrozone commented Dec 21, 2017 •

edited

Loading

rhdeck commented Dec 21, 2017 via email

rhdeck commented Dec 21, 2017

macrozone commented Feb 7, 2018 •

edited

Loading

macrozone commented Feb 7, 2018

rhdeck commented Feb 7, 2018 •

edited

Loading

rhdeck commented Feb 14, 2018

bnjm commented Apr 9, 2018

rhdeck commented Apr 10, 2018

rhdeck commented Apr 12, 2018

bnjm commented Apr 15, 2018 •

edited

Loading

rhdeck commented Apr 19, 2018

bnjm commented Apr 19, 2018

rhdeck commented Apr 19, 2018 •

edited

Loading

bnjm commented Apr 19, 2018 •

edited

Loading

rhdeck commented Apr 19, 2018

rhdeck commented Apr 19, 2018

bnjm commented Apr 20, 2018

rhdeck commented Apr 20, 2018

hehex9 commented Jun 9, 2018

rhdeck commented Jun 10, 2018

Allow auto-deployment with react-native-pod #117

Are you sure you want to change the base?

Allow auto-deployment with react-native-pod #117

Conversation

rhdeck commented Nov 28, 2017

macrozone commented Nov 28, 2017

macrozone commented Nov 28, 2017

rhdeck commented Nov 28, 2017 via email

macrozone commented Dec 5, 2017

rhdeck commented Dec 6, 2017

rhdeck commented Dec 6, 2017

macrozone Dec 21, 2017

Choose a reason for hiding this comment

rhdeck Dec 21, 2017

Choose a reason for hiding this comment

macrozone commented Dec 21, 2017 • edited Loading

rhdeck commented Dec 21, 2017 via email

rhdeck commented Dec 21, 2017

macrozone commented Feb 7, 2018 • edited Loading

macrozone commented Feb 7, 2018

rhdeck commented Feb 7, 2018 • edited Loading

1. yarn link

2. react-native-pod

Deployment Example

rhdeck commented Feb 14, 2018

bnjm commented Apr 9, 2018

rhdeck commented Apr 10, 2018

rhdeck commented Apr 12, 2018

bnjm commented Apr 15, 2018 • edited Loading

rhdeck commented Apr 19, 2018

bnjm commented Apr 19, 2018

rhdeck commented Apr 19, 2018 • edited Loading

bnjm commented Apr 19, 2018 • edited Loading

rhdeck commented Apr 19, 2018

rhdeck commented Apr 19, 2018

bnjm commented Apr 20, 2018

rhdeck commented Apr 20, 2018

hehex9 commented Jun 9, 2018

rhdeck commented Jun 10, 2018

macrozone commented Dec 21, 2017 •

edited

Loading

macrozone commented Feb 7, 2018 •

edited

Loading

rhdeck commented Feb 7, 2018 •

edited

Loading

bnjm commented Apr 15, 2018 •

edited

Loading

rhdeck commented Apr 19, 2018 •

edited

Loading

bnjm commented Apr 19, 2018 •

edited

Loading