Camera request: still/freeze frame during takePhotoAsync

As requested by the react-native-camera team, I’m opening a duplicate issue here. Full description copied below of https://github.com/react-native-community/react-native-camera/issues/1438.

---

I’d like to be able to capture a photo and have the experience be similar to the built in camera. Currently, the video preview continues beyond pressing the shutter & then a preview will show a prior frame from the video. This feels very odd when using the camera vs. the native experience.

Steps to reproduce

1. With a mounted RNCamera component, call takePhotoAsync
2. Replace component w/ <Image source={ ... } /> with the uri from the capture

Does it work with Expo Camera?

It probably works the same way. I’ll open an issue there as well.

Expected behaviour

The (video) preview should be able to be frozen during the capture of the still image to mimic what happens when using the built in camera. (At least on iOS, that’s how it works. I presume Android is the same, but don’t have a device.)

Actual behaviour

The component continues to show the video preview beyond what will be the actual captured image leading to an inconsistent user experience vs. the built in camera.

Environment

• Node.js version: 9.5.0
• React Native version: 0.54.2
• React Native platform + platform version: iOS 11.2.5

react-native-camera

Version: 1.0.2

[wbyoung]

@aalices, okay that sounds great. I missed this comment earlier and started taking a stab at it (at least on iOS). A PR is open on react-native-camera at https://github.com/react-native-community/react-native-camera/pull/1442. Maybe it’ll provide you with a place to start, but what I did is all pretty straight forward & really just a quick hack to get thing working. Your solution sounds better thought out and more elegant.

One thing I didn’t note over there that I did find, though, was a recommendation to simply disable the underlying connection rather than stopping the preview entirely on iOS. Basically:

[self.previewLayer connection].enabled = FALSE;

// instead of

[self.session stopRunning];

Both appeared to work, but I went with the latter since it was already done in a prior PR for react-native-camera.

[Okipa]

This work well on iOS but prevent Android to do something in onPictureSaved.