Android: Orientation becomes locked on mount of signature component

[zacharyweidenbach]

In android only, orientation becomes locked to the viewMode that is passed in to the SignatureCapture component. Ie. if I pass in 'portrait', the entire app then becomes locked in portrait mode.

Example:

import React, { Component } from 'react';
import {
  View,
  Dimensions,
  Platform,
  Modal,
  Button,
  Text
} from 'react-native';
import SignatureCapture from 'react-native-signature-capture';

const dimensions = Dimensions.get('window');
const orientation = dimensions.height > dimensions.width ? 'portrait' : 'landscape';
let height;
let width;

if (Platform.OS === 'android') {
  if (orientation === 'portrait') {
    height = dimensions.width;
    width = dimensions.height;
  } else {
    height = dimensions.height;
    width = dimensions.width;
  }
} else {
  if (orientation === 'portrait') {
    height = dimensions.height;
    width = dimensions.width;
  } else {
    height = dimensions.width;
    width = dimensions.height;
  }
}

const uploadSignature = (path) => {
  // do fetch stuff
};

class SignatureModal extends Component {
  state = {
    touched: false,
  };

  saveSign() {
    this.refs["sign"].saveImage();
  }

  resetSign() {
    this.refs["sign"].resetImage();
    this.setState(() => ({ touched: false }));
  }

  onSaveEvent = (result) => {
    const { onSubmit } = this.props;
    return uploadSignature(result.pathName)
      .then(onSubmit);
  }

  render() {
    const { visible, onRequestClose } = this.props;
    const { touched } = this.state;

    return (
      <Modal
        visible={visible}
        onRequestClose={onRequestClose}
      >
        <View>
          <SignatureCapture
            ref="sign"
            style={{width, height}}
            showBorder={false}
            onSaveEvent={this.onSaveEvent}
            onDragEvent={() => this.setState(() => ({touched: true}))}
            saveImageFileInExtStorage={true}
            showNativeButtons={false}
            showTitleLabel={false}
            viewMode={'portrait'}
            rotateClockwise={true}
          />
        </View>
        <Button onPress={() => this.resetSign()}>
          <Text>Clear</Text>
        </Button>
        <Button
          onPress={() => this.saveSign()}
          disabled={!touched}
        >
          Add Staff Name
        </Button>
      </Modal>
    );
  }
}

export default SignatureModal;

Functionality is fine on iOS.

Related Issue: https://github.com/RepairShopr/react-native-signature-capture/issues/31

But the issue above makes it seem like this is only a problem in 'landscape' mode. Rather, this is a problem regardless of orientation.

[ChaossAdept7]

Have the same issue

[famjiangyuan727]

For landscape mode in Android, you can modify the native package file "RSSignatureCaptureMainView", replace SCREEN_ORIENTATION_LANDSCAPE to SCREEN_ORIENTATION_SENSOR_LANDSCAPE, and it should works fine.

[davidfritch]

For landscape mode in Android, you can modify the native package file "RSSignatureCaptureMainView", replace SCREEN_ORIENTATION_LANDSCAPE to SCREEN_ORIENTATION_SENSOR_LANDSCAPE, and it should works fine.

I've tried updating it here in RSSignatureCaptureMainView.java but it seems to still get locked. I've tried rebuilding the project with Android Studio. Anything else I could be missing?

public void setViewMode(String viewMode) {
  this.viewMode = viewMode;

  if (viewMode.equalsIgnoreCase("portrait")) {
    mActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_PORTRAIT);
  } else if (viewMode.equalsIgnoreCase("landscape")) {
    mActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE);
  }
}

However, If I just update the code to do this, close the Metro Bundler and allow the launch script to reopen it

public void setViewMode(String viewMode) {
  this.viewMode = viewMode;

  // This seems to lock my screen....
  //    if (viewMode.equalsIgnoreCase("portrait")) {
  //      mActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_PORTRAIT);
  //    } else if (viewMode.equalsIgnoreCase("landscape")) {
  //    mActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE);
  //    }

  mActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);
}

Now I lose the ability to say I prefer it in Landscape or Portrait, but at least it isn't locking my screen.

[famjiangyuan727]

@davidfritch Hmm, weird..., we have exactly same code lol. Btw, did you tried to log the viewMode, just to make sure your function did received the param. Here's my working code.

landscape is my requirement, so i just hardcoded it, usually shouldn't.

// RSSignatureCaptureMainView.java
public void setViewMode(String viewMode) {
   this.viewMode = viewMode;
   Log.d("viewMode:", "" + viewMode);
   if (viewMode.equalsIgnoreCase("portrait")) {
     mActivity.setRequestedOrientation(ActivityInfo. SCREEN_ORIENTATION_SENSOR_PORTRAIT);
   } else if (viewMode.equalsIgnoreCase("landscape")) {
     mActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE);
   }
 }

// signature.js
<Signature
 style={ styles.signature }
 ref={sign => this.sign = sign}
 onSaveEvent={this.onSaveEvent.bind(this)}
 onDragEvent={this.onDragEvent.bind(this)}
 showNativeButtons={false}
 viewMode={ this.getOrientation }
/>

getOrientation() {
 var orientation = 'portrait'
 if (condition) {
  orientation = 'landscape'
 }
 return orientation
}

[mromarreyes]

We're having the same issue on Android only.

[LuongTruong]

HI guys, I have the same issue. My issue goes away when I remove the viewMode={"portrait"}. Now I am able to rotate screen but don't know if it will affect the lib's functions

[Akash-T2S]

Having the same issue in Android, has anyone resolved this?

[axdemelas]

same here...