Android support

[ardalann]

Hey guys, fantastic job! Thank you!

I was just wondering whether you have plans to add Android support as well.

[mattiamanzati]

+1

[albertwchang]

+1,001

[lwansbrough]

Hey guys, I'm working with a few folks from @exponentjs on the next iteration of rem which will support Android builds. Currently I'm not using rem but I think it is a good thing for the community going forward, so I'm investing some time in helping with that effort. FB currently doesn't have a recommended approach to Android module development - we're trying to solve that. Ideally this will allow you to install your modules like npm install react-native-camera and they will automatically be added to your XCode projects and Android dependencies and built with your app. Until then I can try to get a PoC for the Android camera but it'll take some time to get feature parity with the iOS version.

[albertwchang]

@lwansbrough: do you accept donations? Glad you're championing the "camera space" of React Native

[lwansbrough]

@Achang28 Thanks for considering donating! However I'm not doing this for the money, I've gone a personal interest in keeping the development of this up to date. Always looking for contributors though -- I think more of the community modules could use a larger backing of contributors to keep them fresh.

[lwansbrough]

Small update: moved the iOS files around in preparation for Android dev. 👍

[ardalann]

Thank you very much @lwansbrough ! 👍

[mattiamanzati]

Thanks a lor! I Will wait For Android Version!

[jiamo]

https://www.npmjs.com/search?q=react-native-camera version is 0.3.3 . How can I use the lastest version in my project?

[lwansbrough]

😬 Oops forgot to publish! Try now.

[timmh]

I gave it a shot and got the camera view working on android: https://github.com/timmh/react-native-camera
It is very primitive and simple but it took some time to figure out how to include the native component into the app, so someone may find it useful.

[lwansbrough]

@timmh Nice work, this is definitely something we can build on. I will mention that if it's anything like Obj-C, you will need to inherit React's view class so that you get all their view stuff like flexbox, etc.

[timmh]

I think the whole style & layout works via super.updateView(view, props); in the ViewManager.
Just tried different layouts including flexbox and the sizing worked as it should.

[tlightsky]

hi, @timmh how can i use your android version?

[timmh]

@tlightsky there is an README.md in the android directory that has instructions how to use it.
@lwansbrough I am currently implementing barcode scanning using the zxing library, would you be interested in merging this in?

[mattiamanzati]

@timmh I am also interested in it! Hoping that you Will merge!

[lwansbrough]

We need a way of depending on 3rd party libs first. Currently we have to include the binary that we're targeting which sucks.

[lwansbrough]

With that said, since I don't think Android has bar code scanning by default (correct my if I'm wrong) then yes I'd be interested in using zxing. Historically it has been the position of this library to not depend on third party libraries but that may need to be the case for Android feature parity.

What I really want is a build script that links to a Maven repo though. But we need to standardize something like that across React Native before doing it here.

[timmh]

You are right, unfortunately android does not have barcode scanning included.
A possible solution would be to create two different gradle configurations which compile the library with and without 3rd party barcode scanning libraries so the user could choose whether he needs this feature or not. But it seems you are working on something that makes this kind of thing easier, so I understand that you want to wait until that is ready. Already curious about that!

[JorisM]

@timmh thanks for your work! i pulled and tried to get it to work, but I ran into issues here:
first there is a typo in the readme in the android directory, I think it should look like this:

project(':com.lwansbrough.ReactCamera').projectDir = new File(settingsDir, '../node_modules/react-native-camera/android')

(maybe it would also be worth mentioning that the lines for build.gradle are meant to be added in the android/app/build.gradle, not android/build.gradle, I got confused with that until I figured it out.)

second, after I got everything to compile, and I start the app, it instantely crashes with this error:

E/AndroidRuntime(21835): java.lang.AssertionError: Module RCTNetworking was already registered!
E/AndroidRuntime(21835):    at com.facebook.infer.annotation.Assertions.assertCondition(Assertions.java:65)
E/AndroidRuntime(21835):    at com.facebook.react.bridge.NativeModuleRegistry$Builder.add(NativeModuleRegistry.java:162)
E/AndroidRuntime(21835):    at com.facebook.react.ReactInstanceManager.processPackage(ReactInstanceManager.java:447)
E/AndroidRuntime(21835):    at com.facebook.react.ReactInstanceManager.createReactContext(ReactInstanceManager.java:416)
E/AndroidRuntime(21835):    at com.facebook.react.ReactInstanceManager.recreateReactContext(ReactInstanceManager.java:345)
E/AndroidRuntime(21835):    at com.facebook.react.ReactInstanceManager.onJSBundleLoadedFromServer(ReactInstanceManager.java:310)
E/AndroidRuntime(21835):    at com.facebook.react.ReactInstanceManager.access$100(ReactInstanceManager.java:70)
E/AndroidRuntime(21835):    at com.facebook.react.ReactInstanceManager$1.onJSBundleLoadedFromServer(ReactInstanceManager.java:97)
E/AndroidRuntime(21835):    at com.facebook.react.devsupport.DevSupportManager$13$1.run(DevSupportManager.java:530)
E/AndroidRuntime(21835):    at android.os.Handler.handleCallback(Handler.java:739)
E/AndroidRuntime(21835):    at android.os.Handler.dispatchMessage(Handler.java:95)
E/AndroidRuntime(21835):    at android.os.Looper.loop(Looper.java:135)
E/AndroidRuntime(21835):    at android.app.ActivityThread.main(ActivityThread.java:5274)
E/AndroidRuntime(21835):    at java.lang.reflect.Method.invoke(Native Method)
E/AndroidRuntime(21835):    at java.lang.reflect.Method.invoke(Method.java:372)
E/AndroidRuntime(21835):    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:909)
E/AndroidRuntime(21835):    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:704)

any idea why this might happen/how to fix it?

again, thanks for your work!

[JorisM]

ah btw, the crash happens after adding this line:

.addPackage(myReactPackage)

to the MainActivity.java

[timmh]

Hey @JorisM, thanks for your feedback!
I am sorry that the instructions in the readme are not working for you.
Did you replace the existing .addPackage(whateverPackage) with .addPackage(myReactPackage)?
If not, that might be the issue.
I will look into this with more detail later today and update the instructions.
However, I would ask you and anyone else having an issue with my fork to create an issue over there because we should not bloat this issue with problems not directly associated with it.

[JorisM]

ah yes, that was it! thanks a bunch for reporting back so quickly!

yup I agree about not spamming this thread, but I couldn't create an issue on your fork since issues don't seem to be enabled.

[ortutay]

in @timmh's version, I get the following error when I do this.refs.cam.capture:

Error: this.refs.cam.capture is not a function

When I investigate the Camera component in the debugger, the capture method is indeed not there. Any ideas what's going on?

[timmh]

@JorisM You are right, I did not notice that issues were disabled. Happy that you now seem to have it working.
@ortutay my version is just a concept / placeholder until the stable and feature-complete version is released in this repo. As the readme states, my version is just an experiment and is neither stable nor feature-complete (e.g. it hast no capture-method as you already noticed).

Issues are now enabled for my fork so if anyone has questions / issues regarding that, please fill an issue there.

[tlightsky]

I can run the camera on Andorid with @timmh 's version.
I notice the component is quite different from iOS version.
Will they be kind the same at the end?

[joshhornby]

@lwansbrough Is there an ETA on this?

[jhogendorn]

I assume you've all spotted this? https://github.com/NorthFoxz/react-native-camera-android

Any thoughts?

[lwansbrough]

I just opened an issue to ask if @northfoxz wants to merge the modules. Hopefully he's interested! :) Nice find @jhogendorn

[rt2zz]

@lwansbrough @northfoxz @jhogendorn @timmh

It looks like there are a few threads going on independently right now. Here is my current understanding of the situation:

react-native-camera-android has barcode support & disk support
timmh react-native-camera-android has memory & disk support (EDIT: I was wrong callbacks are good here)

I do not care which base implementation we go with, but I would like to standardize functionality and get this merged back asap. For now I will file some PR's against timmh's fork. Reconciling should be simple with all necessary code pretty much going in the onPictureTaken handler:
https://github.com/timmh/react-native-camera/blob/master/android/src/main/java/com/lwansbrough/ReactCamera/ReactCameraModule.java#L77
https://github.com/NorthFoxz/react-native-camera-android/blob/4014ab270a334787e58edfbd4eb381a47847f0f6/android/src/main/java/com/ReactCamera/RNCameraInstanceView.java#L202

Thoughts?

[lwansbrough]

@rt2zz Of course, I forgot about @timmh's fork! Ideally we go with the more stable solution. I don't have any preference over what get's implemented. Standardization is a must. If certain branches are handling things better than others, lets take the best of each where possible. APIs need to be consistent with iOS. If this is an impossibility lets talk about what needs to be changed so we can standardize them.

Is anyone willing to oversee this merging process? I'm happy to help whenever possible, but we kind of need an owner for the Android side of it.

[rt2zz]

ideally someone with more android experience than myself, but I am happy to reconcile as needed.

[lwansbrough]

@rt2zz As am I when I have the time. Looking for input from @timmh and @northfoxz regarding how they think it should be done.

I suppose we need to start by looking at which implementation is further along or more stable. Closer feature parity is probably more important than stability at this point, as long as the approach is correct. We should also discuss any necessary/ideal API changes that should happen when we merge this. Do we want to keep callbacks, for example, or do we want to switch to events?

[northfoxz]

There are several issues left in my implementation now:

1. Orientation of the camera is only for portrait now
2. Component views of object
3. Autofocus of the view
4. Audio and video capture

I have to fix these issues before merging to iOS support.

[rt2zz]

Sounds good. I like callbacks.

I forgot about video. Reaching feature parity may take a while but afaik everything is possible (namely passive barcode scan and touch to focus)

[rt2zz]

@northfoxz fyi we are getting decent progress over at timmh#19

Your project has barcode which is a huge +, it might be good to coordinate efforts moving forward. What do you think?

[northfoxz]

@rt2zz sure i would love to help!
a bit busy lately with my daytime work,
i will update my module and apis this weekend and see if you guys think its ok to merge here

[lwansbrough]

@northfoxz Sounds good - you should send those PRs to @timmh's fork so we don't have to coordinate the merge of Android stuff here. Hopefully that will make bringing Android over as a whole easier.

[graywolf336]

Looking forward to android support being merged!

[dangnelson]

Same here, can't wait! Thanks for all the great work on this everybody.

[farmisen]

I pushed a PR (#157) from my fork a couple of days ago and forgot to mention it here. I haven't touched java for years and I am definitively not an Android expert so at the very least I expect my code to not be very idiomatic and I might have done some mistakes that should be pretty obvious to spot for a more seasoned Android developer.

So far only capturing stills has been implemented, adding video should not be too difficult but I hadn't time yet to look into it. I haven't yet looked much into bar code scanning but that might help http://android-developers.blogspot.com/2015/08/barcode-detection-in-google-play.html. A few other smaller things are in my todo list such as taking in account the orientation props and fixing the improper saved image orientation when using the front camera.

It has only been tested on a nexus 5 and with the genymotion emulator because of its easy camera support and I am looking forward to see how it will behave on other devices.

[farmisen]

I also realize I might have duplicated effort. I have been working on it over the last couple of weeks and didn't realize some were doing the same. Well, I guess there are now 3 different implementation to consider/cherry pick.

[rt2zz]

haha @farmisen yeah no worries. I think you might actually have the highest api coverage of any of the forks. I think whoever implements video first will take the cake though.

[northfoxz]

@farmisen nice job!

i think i wont have the time necessary to finish the api merge,

please continue your work and i will help if theres time

[dangnelson]

Could Android support be without Video until it's ready? Or would that cause too many issues?

[farmisen]

no hard promise but looking to the android dev doc it does not look like too difficult to implement so I am going to give it a shot today.

[lwansbrough]

#157 has been merged. All efforts for Android should be directed towards the merged implementation. For those of you with forks, please take a look at what missing and help implement those features if you already have them developed. Thanks so much guys. Tons of great work here.

[rohitgoyal]

@lwansbrough Is the barcode issue is also sorted out?

[rt2zz]

@rohitgoyal no. There are two possibilities: either using zxing barcode scanner or using android native barcode scanner. The downside of the latter is that it lacks support for older versions of android.

If you have some time, there is a working android barcode implementation at https://github.com/NorthFoxz/react-native-camera-android that can be used as a reference for implementing here. PR appreciated!

[cubbuk]

Thanks for the great work =) Currently android version does not support video recording, is there any plan for implementing video feature for android too @lwansbrough @farmisen?

[vespakoen]

My initial stab at video for android can be found here:

vespakoen@3d0ee94

I feel I have tried anything, but cannot get a playable video file (there is data in there for sure, it just doesn't play, not on android, not in VLC)

This might be due to my device(s), the Samsung Galaxy S4 Mini, and a Nexus 7.

I commented a lot of the code to hopefully get other people going on trying it out / play with it / report back with findings / results.

To try out my branch, run:

npm install --save git+https://github.com/vespakoen/react-native-camera.git#master

Helpful links:

http://developer.android.com/guide/topics/media/camera.html#capture-video
http://developer.android.com/reference/android/media/MediaRecorder.html
http://developer.android.com/reference/android/media/CamcorderProfile.html
https://android.googlesource.com/platform/development/+/4b737b6/samples/browseable/MediaRecorder/src/com.example.android.mediarecorder/MainActivity.java

[marcejohnson]

Some more testing options... here is my pull request for code I've been working on for awhile to support recording video on Android:
#262

• Supports same parameters and values as IOS, including captureMode, captureTarget, captureQuality, etc.
• Updated Readme.md
• Example code

Goal is "drop in" for compatibility with IOS... to make Android and IOS equivalent. I will continue to enhance this as bugs or additional changes are needed since I need this for my own project. Please send me you feedback, thanks.

To install latest version, run:

npm install --save git+https://github.com/marcejohnson/react-native-camera.git#master

[wakeless]

As for installation (I might not have understood some of what was going on above) it's worth mentioning the rnpm https://github.com/rnpm/rnpm project. I've recently used it as an installer for a library and it worked perfectly.

[marcejohnson]

The feature is officially merged and now part of the repo:
#262

You can close this.