react-native-video-processing icon indicating copy to clipboard operation
react-native-video-processing copied to clipboard

Please update the README for iOS adding following

Open amberv0 opened this issue 7 years ago • 31 comments

Please detail in the README the process of linking for iOS. Precisely, currently there is only "Import RNVideoProcessing.h into your project_name-bridging-header.h.". Which is far from obvious for those not familiar with bridging. Please indicate, first, what should be the contents of this file (this I found in other issues, but it took time). And still, I've followed every single instruction and was still getting 50+ compilation errors. Until I added the Objective-C Bridging Header in the Build Settings. AND I had to set the Swift language to 3.2, since under 4 there was a bunch of errors (I'm using the latest XCode).

To summarize, the additions I suggest: Say that quite possibly you need to create the bridge file AppName-Bridging-Header.h in the main app folder. Include in the docs the exact content of the bridge file. I guess it's something like (need to replace the AppName with the project name).

#ifndef AppName_Bridging_Header_h
#define AppName_Bridging_Header_h


#import <React/RCTRootView.h>
#import <React/RCTView.h>
#import "React/RCTBridgeModule.h"
#import "RNVideoProcessing.h"


#endif /* AppName_Bridging_Header_h */

Precise the need to set Objective-C Bridging Header in Build Settings to the name of the file created (AppName-Bridging-Header.h)

Precise the need to set Swift Language Version to Swift 3.2 (in Xcode 9).

Only after this I managed to make it all working for iOS. So I guess it will be helpful to others.

By the way, I was also having issues with the android setup, something Dex-related, but googling helped.

amberv0 avatar Dec 08 '17 13:12 amberv0

And one more thing that should be added to the text version of the manual. Otherwise having issues with running on real device, while on simulator everything is fine.

After adding frameworks to Linked Frameworks and Libraries, the next step is to add exclusively the GPUImage.framework under Embedded Binaries (shown at 2:37 of the video). Since it's only GPUImage that needs to be added, it's easy to keep this part unnoticed. Thanks @gcheong for this in his comment in #68

amberv0 avatar Dec 12 '17 13:12 amberv0

On Xcode 9, I could not see neither Objective-C Bridging Header nor Swift Language Version

image

image

Please help

vvavepacket avatar Dec 22 '17 03:12 vvavepacket

Solved the issue. I need to create an empty swift file for those options to be enabled.

vvavepacket avatar Dec 22 '17 17:12 vvavepacket

I have the same issue - to the extent that I have to find another solution. That's a shame...

masseyl avatar Jan 21 '18 08:01 masseyl

@amberv0 can you create a PR with those additions. Im sure @shahen94 would be happy to accept it.

superandrew213 avatar Feb 01 '18 06:02 superandrew213

@amberv0 can these setup steps being automated by react-native link after npm install?

doodlewind avatar Feb 09 '18 05:02 doodlewind

@doodlewind - I can't comment on whether they can be automated but what I can say is that currently using react-native link will try and link the project and end up breaking it (for me at least). I had to undo this change with react-native unlink react-native-video-processing

JoshM1994 avatar Feb 18 '18 17:02 JoshM1994

@shahen94, do you want me to make a PR with these additions to the README?

amberv0 avatar Mar 01 '18 17:03 amberv0

@amberv0 That would be great. Thanks

shahen94 avatar Mar 04 '18 11:03 shahen94

I have followed these instructions TO THE LETTER and am still getting

error opening input file '/Users/me/Repo/AppName/node_modules/react-native-video-processing/ios/RNVideoProcessing-Bridging-Header.h' (No such file or directory)

  1. Where is AppName_Bridging_Header.h supposed to be located? What's in it?
  2. What's the value of the Objective-C Bridging Header in Build Settings?
  3. Why is it trying to access a file that doesn't exist in a path we have no real access to ( /ios/RNVideoProcessing-Bridging-Header.h which I understand should be /ios/RNVideoProcessing/RNVideoProcessing-Bridging-Header.h - which is a whole other eyebrow raiser...)?

And if I move the file from "ios/RNVideoProcessing/..." to just "ios/..." I get 98 compile errors, and 247... warnings

Seriously...? What's the solve here?

vs-lance avatar Mar 07 '18 21:03 vs-lance

@vs-lance

  1. I have AppName_Bridging_Header.h inside AppRootDir/ios/HERE
  2. Can't answer that I'm afraid - not an Objective-C dev - but it seems to work
  3. Looking at the Github source code, the file appears to be in the correct directory. Same result when I npm install a fresh copy of it.

Be careful moving files - I think there is a difference between physically moving a file (with mv) and modifying where XCode is looking for it...

A couple of things to check:

  1. Do you ensure you clean the entire project after performing the above steps?
  2. Have you ever run react-native link - undo this (react-native unlink react-native-video-processing) if you have (and in future only link the specific module)

JoshM1994 avatar Mar 08 '18 09:03 JoshM1994

Thanks!

I did cleaning as well as undoing react-native link. I'm starting with a clean project this morning, because I think the issue is related to another package which uses CocoaPods to install its dependencies. And I think they might be clashing somehow. If I learn anything useful I'll be sure to let everyone know!

On Thu, Mar 8, 2018 at 1:19 AM, Josh Mustill [email protected] wrote:

@vs-lance https://github.com/vs-lance

  1. I have AppName_Bridging_Header.h inside AppRootDir/ios/HERE
  2. Can't answer that I'm afraid - not an Objective-C dev - but it seems to work
  3. Looking at the Github source code, the file appears to be in the correct directory https://github.com/shahen94/react-native-video-processing/blob/master/ios/RNVideoProcessing/RNVideoProcessing.h. Same result when I npm install a fresh copy of it.

Be careful moving files - I think there is a difference between physically moving a file (with mv) and modifying where XCode is looking for it...

A couple of things to check:

  1. Do you ensure you clean the entire project after performing the above steps?
  2. Have you ever run react-native link - undo this (react-native unlink react-native-video-processing) if you have (and in future only link the specific module)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/shahen94/react-native-video-processing/issues/144#issuecomment-371428606, or mute the thread https://github.com/notifications/unsubscribe-auth/AivNiTEAyuQ6sUwCar6Rjt3K3R4Vs9cTks5tcPe0gaJpZM4Q7E_E .

vs-lance avatar Mar 08 '18 17:03 vs-lance

It seems there is a conflict with react-native-image-crop-picker (ICP) which strongly encourages using cocoapods for its installation. I was starting from a fresh react-native init which installed RN 0.54, but ICP's cocoapods scripts insisted on RN 0.52 - and somewhere in this process a conflict arose with RNVideoProcessing.

Creating a brand new RN app and only installing RNVideoProcessing (again, following the above instructions) is currently working. I have not tried re-installing ICP.

So my recommendation is: if you're going to use RNVideoProcessing, install it early on in your project, run copious backups, and add other libraries very carefully (if at all...).

vs-lance avatar Mar 12 '18 00:03 vs-lance

@vs-lance , I successfully installed both, though I have RN 0.52. I used pods for react-native-image-crop-picker and manual installation for RNVideoProcessing

amberv0 avatar Mar 12 '18 09:03 amberv0

Interesting. I actually installed both successfully about 2 - 3 months ago with RN 52.. Maybe the issue is with RN 54, or maybe it's the order I did things this time(I installed rn-image-crop-picker first), or maybe there's gremlins...

vs-lance avatar Mar 12 '18 16:03 vs-lance

@vs-lance Did you found any solution to make this package work on RN 54? I keep getting problems with the RNVideoProcessing.h file. First it couldn't find the file, after some changes it started yelling about compile errors in the GPUImage framework...

jeffreyhaen avatar Mar 15 '18 12:03 jeffreyhaen

Two ways worked for me. One was to start with a totally clean app and install RNVideoProcessing first. Then never ever use cocoa pods or 'react native link' without a package name.

The other was to start with RN52 follow the above process, then 'react-native-git-upgrade'

RN 54 has lots of potential, but it definitely doesn't feel ready for prime time...

On Thu, Mar 15, 2018 at 5:23 AM jeffreyhaen [email protected] wrote:

@vs-lance https://github.com/vs-lance Did you found any solution to make this package work on RN 54? I keep getting problems with the RNVideoProcessing.h file. First it couldn't find the file, after some changes it started yelling about compile errors in the GPUImage framework...

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/shahen94/react-native-video-processing/issues/144#issuecomment-373358193, or mute the thread https://github.com/notifications/unsubscribe-auth/AivNiaGxIimtpncbhdZKCVky9H3KIUtVks5tel1agaJpZM4Q7E_E .

vs-lance avatar Mar 15 '18 15:03 vs-lance

@vs-lance No luck so far. I've tried to make it work with a fresh RN52 and RN54 project. Followed every step in the manual and i tried multiple workarounds by including the RNVideoProcessing project. It keeps having some path issues. :(

jeffreyhaen avatar Mar 19 '18 12:03 jeffreyhaen

Are there any updates? I haven't been able to get this to work :(

AaronVasquez avatar Apr 17 '18 04:04 AaronVasquez

I had to abandon ship. Sorry...

On Mon, Apr 16, 2018 at 9:03 PM, Aaron Vasquez [email protected] wrote:

Are there any updates? I haven't been able to get this to work :(

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/shahen94/react-native-video-processing/issues/144#issuecomment-381830951, or mute the thread https://github.com/notifications/unsubscribe-auth/AivNiTIMdwrfYpqs4UOIw5CTgAhzHHIIks5tpWl-gaJpZM4Q7E_E .

vs-lance avatar Apr 17 '18 15:04 vs-lance

@AaronVasquez @vs-lance I got it working. The key to success was to import the folder RNVideoProcessing and the file GPUImage.xcodeproj not as a reference. After that i was able to compile the project. I also had to add the GPUImage library as a Embedded Binary under the general projectsettings to make it work runtime (as shown in the video).

jeffreyhaen avatar Apr 18 '18 12:04 jeffreyhaen

+1!

On Wed, Apr 18, 2018 at 5:48 AM, jeffreyhaen [email protected] wrote:

@AaronVasquez https://github.com/AaronVasquez @vs-lance https://github.com/vs-lance I got it working. The key to success was to import the folder RNVideoProcessing and the file GPUImage.xcodeproj not as a reference. After that i was able to compile the project. I also had to add the GPUImage library as a Embedded Binary under the general projectsettings to make it work runtime (as shown in the video).

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/shahen94/react-native-video-processing/issues/144#issuecomment-382374553, or mute the thread https://github.com/notifications/unsubscribe-auth/AivNiX5FXvzkeiBqu3rMvsKUsswYzSp4ks5tpzYggaJpZM4Q7E_E .

vs-lance avatar Apr 18 '18 16:04 vs-lance

Hmmm I ran into this problem today, the same node_modules/ios/RNVideoProcessing-Bridging-Header.h not found issue (not the AppName-Bridging-Header.h file). I tried importing the folder not as a reference (although Idk how to do that with the GPUImage.xcodeproj file since dragging it into XCode doesn't prompt anything).

<unknown>:0: error: error opening input file '/Users/omar/code/raha/mobile/node_modules/react-native-video-processing/ios/RNVideoProcessing-Bridging-Header.h' (No such file or directory)

I'm not sure what even requires that, but if you wanna look at my code it's here. Not sure how to continue :P

osdiab avatar Jul 24 '18 07:07 osdiab

@osdiab Instead of dragging the folder/files into your project you should try right clicking your project and choose "Add files to 'MyProjectName'...". Then click "Options" for extra settings like picking targets and if you would like to create a reference or not. That should work. :)

jeffreyhaen avatar Jul 25 '18 11:07 jeffreyhaen

Word, tried adding them that way and still getting the same issue though. really frustrating that there isn't a clear consensus for how to deal with this issue. but maybe the presence of cocoapods in our project is a problem, guess i can try incrementally reinstalling everything with this library first (quite the pain, given that we have a lot of other dependencies with custom install instructions themselves...)

osdiab avatar Jul 27 '18 08:07 osdiab

Would appreciate a comment from @shahen94 or someone knowledgable of this issue if you have any insights, my inexperience with both react-native and the ios build system is making this pretty hard to debug independently.

osdiab avatar Jul 27 '18 08:07 osdiab

error opening input file '/Users/mac/Desktop/React-Native-Sny/RNCameraSample/node_modules/react-native-video-processing/ios/RNVideoProcessing-Bridging-Header.h' (No such file or directory) :0: error: cannot open file '/Users/mac/Library/Developer/Xcode/DerivedData/RNCameraSample-anhvcmcichlckkguollygfuyrqdz/Build/Intermediates.noindex/PrecompiledHeaders/RNVideoProcessing-Bridging-Header-2UG995S7IVGTH.dia' for diagnostics emission (No such file or directory) Command PrecompileSwiftBridgingHeader failed with a nonzero exit code

I have the same problem. I tried all the possibilities describe above. I Shows the wrong directory path.

SunnySny avatar Jan 23 '19 10:01 SunnySny

@doodlewind - I can't comment on whether they can be automated but what I can say is that currently using react-native link will try and link the project and end up breaking it (for me at least). I had to undo this change with react-native unlink react-native-video-processing

Thank you @JoshM1994 , I highly recommend for anyone that's having the issue with error opening input file '/Users/../node_modules/react-native-video-processing/ios/RNVideoProcessing-Bridging-Header.h' (No such file or directory) to just try react-native unlink react-native-video-processing, since that's exactly what fixes this particular issue.

bartekus avatar Jul 14 '19 02:07 bartekus

Anyone got it working? My project builds, but i get this error at runtime: "Cannot read property 'Constants' of undefined".

OmarBasem avatar Jul 16 '19 08:07 OmarBasem

for dex issue defaultConfig { multiDexEnabled true }

abinayakumaran avatar Oct 10 '19 17:10 abinayakumaran