Adding support for on press camera

Author: aprimadi

index.js

@@ -100,6 +100,7 @@ export default class Camera extends Component {
  barcodeScannerEnabled: PropTypes.bool,
  onFocusChanged: PropTypes.func,
  onZoomChanged: PropTypes.func,
+ onPressCamera: PropTypes.func,
  mirrorImage: PropTypes.bool,
  fixOrientation: PropTypes.bool,
  barCodeTypes: PropTypes.array,
@@ -155,6 +156,7 @@ export default class Camera extends Component {
 
  async componentWillMount() {
  this._addOnBarCodeReadListener()
+ this._addOnPressCameraListener()
 
  let { captureMode } = convertNativeProps({ captureMode: this.props.captureMode })
  let hasVideoAndAudio = this.props.captureAudio && captureMode === Camera.constants.CaptureMode.video
@@ -167,6 +169,7 @@ export default class Camera extends Component {
  }
 
  componentWillUnmount() {
+ this._removeOnPressCameraListener()
  this._removeOnBarCodeReadListener()
 
  if (this.state.isRecording) {
@@ -175,10 +178,13 @@ export default class Camera extends Component {
  }
 
  componentWillReceiveProps(newProps) {
- const { onBarCodeRead } = this.props
+ const { onBarCodeRead, onPressCamera } = this.props
  if (onBarCodeRead !== newProps.onBarCodeRead) {
  this._addOnBarCodeReadListener(newProps)
  }
+ if (onPressCamera !== newProps.onPressCamera) {
+ this._addOnPressCameraListener(newProps)
+ }
  }
 
  _addOnBarCodeReadListener(props) {
@@ -198,6 +204,22 @@ export default class Camera extends Component {
  }
  }
 
+ _addOnPressCameraListener(props) {
+ const { onPressCamera } = props || this.props
+ this._removeOnPressCameraListener()
+ if (onPressCamera) {
+ this.onPressCameraListener = Platform.select({
+ ios: NativeAppEventEmitter.addListener('onPressCamera', this._onPressCamera.bind(this)),
+ })
+ }
+ }
+ _removeOnPressCameraListener() {
+ const listener = this.onPressCameraListener
+ if (listener) {
+ listener.remove()
+ }
+ }
+
  render() {
  const style = [styles.base, this.props.style];
  const nativeProps = convertNativeProps(this.props);
@@ -211,6 +233,12 @@ export default class Camera extends Component {
  }
  };
 
+ _onPressCamera(event) {
+ if (this.props.onPressCamera) {
+ this.props.onPressCamera(event)
+ }
+ }
+
  capture(options) {
  const props = convertNativeProps(this.props);
  options = {
@@ -269,7 +297,7 @@ const RCTCamera = requireNativeComponent('RCTCamera', Camera, {nativeOnly: {
  importantForAccessibility: true,
  accessibilityLiveRegion: true,
  accessibilityComponentType: true,
- onLayout: true
+ onLayout: true,
 }});
 
 const styles = StyleSheet.create({

ios/RCTCamera.m

@@ -90,7 +90,6 @@ - (void)layoutSubviews
  self.manager.previewLayer.frame = self.bounds;
  }
  [self setBackgroundColor:[UIColor blackColor]];
- NSLog(@"sublayers count: %d", [self.layer.sublayers count]);
  if ([self.layer.sublayers count] == 0) {
  [self.layer insertSublayer:self.manager.previewLayer atIndex:0];
  }
@@ -123,59 +122,58 @@ - (void)orientationChanged:(NSNotification *)notification{
 }
 
 
-- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
+- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
 {
- // Update the touch state.
- if ([[event touchesForView:self] count] > 1) {
- _multipleTouches = YES;
- }
-
+ // Update the touch state.
+ if ([[event touchesForView:self] count] > 1) {
+ _multipleTouches = YES;
+ }
 }
 
 - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
 {
- if (!_onFocusChanged) return;
-
- BOOL allTouchesEnded = ([touches count] == [[event touchesForView:self] count]);
-
- // Do not conflict with zooming and etc.
- if (allTouchesEnded && !_multipleTouches) {
- UITouch *touch = [[event allTouches] anyObject];
- CGPoint touchPoint = [touch locationInView:touch.view];
- // Focus camera on this point
- [self.manager focusAtThePoint:touchPoint];
-
- if (self.camFocus)
- {
- [self.camFocus removeFromSuperview];
- }
- NSDictionary *event = @{
- @"target": self.reactTag,
- @"touchPoint": @{
- @"x": [NSNumber numberWithDouble:touchPoint.x],
- @"y": [NSNumber numberWithDouble:touchPoint.y]
- }
- };
- [self.bridge.eventDispatcher sendInputEventWithName:@"focusChanged" body:event];
-
- // Show animated rectangle on the touched area
- if (_defaultOnFocusComponent) {
- self.camFocus = [[RCTCameraFocusSquare alloc]initWithFrame:CGRectMake(touchPoint.x-40, touchPoint.y-40, 80, 80)];
- [self.camFocus setBackgroundColor:[UIColor clearColor]];
- [self addSubview:self.camFocus];
- [self.camFocus setNeedsDisplay];
-
- [UIView beginAnimations:nil context:NULL];
- [UIView setAnimationDuration:1.0];
- [self.camFocus setAlpha:0.0];
- [UIView commitAnimations];
- }
- }
+ if (!_onFocusChanged && false) return;
+
+ BOOL allTouchesEnded = ([touches count] == [[event touchesForView:self] count]);
 
- if (allTouchesEnded) {
- _multipleTouches = NO;
+ // Do not conflict with zooming and etc.
+ if (allTouchesEnded && !_multipleTouches) {
+ UITouch *touch = [[event allTouches] anyObject];
+ CGPoint touchPoint = [touch locationInView:touch.view];
+ // Focus camera on this point
+ [self.manager focusAtThePoint:touchPoint];
+
+ if (self.camFocus)
+ {
+ [self.camFocus removeFromSuperview];
+ }
+ NSDictionary *event = @{
+ @"target": self.reactTag,
+ @"touchPoint": @{
+ @"x": [NSNumber numberWithDouble:touchPoint.x],
+ @"y": [NSNumber numberWithDouble:touchPoint.y]
+ }
+ };
+ [self.bridge.eventDispatcher sendAppEventWithName:@"onPressCamera" body:event];
+ [self.bridge.eventDispatcher sendInputEventWithName:@"focusChanged" body:event];
+
+ // Show animated rectangle on the touched area
+ if (_defaultOnFocusComponent) {
+ self.camFocus = [[RCTCameraFocusSquare alloc] initWithFrame:CGRectMake(touchPoint.x-40, touchPoint.y-40, 80, 80)];
+ [self.camFocus setBackgroundColor:[UIColor clearColor]];
+ [self addSubview:self.camFocus];
+ [self.camFocus setNeedsDisplay];
+
+ [UIView beginAnimations:nil context:NULL];
+ [UIView setAnimationDuration:1.0];
+ [self.camFocus setAlpha:0.0];
+ [UIView commitAnimations];
  }
+ }
 
+ if (allTouchesEnded) {
+ _multipleTouches = NO;
+ }
 }