YanYuanFE / react-native-signature-canvas

:black_nib: React Native Signature Component based WebView Canvas for Android && IOS && expo
MIT License
417 stars 149 forks source link

Full screen support #345

Closed icaru88 closed 6 months ago

icaru88 commented 9 months ago

Hi, thanks for this wonderful library. It worked well on both iOS and android. However I could not make it work to display on full screen. Need little help here. Thanks in advance. Cheers

YanYuanFE commented 9 months ago

can you provider your code example?

icaru88 commented 8 months ago
export const SignatureModal: React.FC<Props> = ({
  description,
  onConfirm,
  onCancel,
  isVisible
}) => {
  const ref = useRef<SignatureViewRef>(null);
  const insets = useSafeAreaInsets();
  const statusBarHeight = insets.top;

  const onSignatureConfirm = (signature: string) => {
    onConfirm(signature);
  };

  const onSignatureClear = () => {
    ref.current?.erase();
  };

  return (
    <Modal
      style={[styles.container]}
      visible={isVisible}
      onRequestClose={onCancel}
    >
      <SafeAreaView
        style={{
          flex: 1,
          marginTop: statusBarHeight
        }}
      >
        <TouchableHighlight style={styles.cancelButton} onPress={onCancel}>
          <Text style={{ color: Theme.colors.white }}>Cancel</Text>
        </TouchableHighlight>
        <SignatureScreen
          ref={ref}
          onOK={onSignatureConfirm}
          onErase={onSignatureClear}
          descriptionText={description}
          backgroundColor={Theme.colors.lightGray}
        />
      </SafeAreaView>
    </Modal>
  );
};

 <SignatureModal
        isVisible={isSignatureModalVisible}
        description={'Please sign in the space above'}
        onConfirm={onSignatureConfirm}
        onCancel={() => setIsSignatureModalVisible(false)}
      />

Simulator Screen Recording - iPhone 15 Pro Max - 2023-11-28 at 20 24 40

YanYuanFE commented 7 months ago
webStyle={`
                .m-signature-pad canvas {
                  background-image: url('${bg}');
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                }
                .m-signature-pad {
                  flex: 1;
                  box-shadow: none;
                  border-radius: 10px;
                  height: 600px;
                }
                `}

try set .m-signature-pad height

icaru88 commented 6 months ago

hi thank you so much. It works.