Styling Issues on Android

[aliwaqar981]

import React, {FunctionComponent, useRef} from 'react';
import {Text, View, ViewStyle} from 'react-native';
import Signature from 'react-native-signature-canvas';

import ApiClient from '../../Services/ApiClient';
import {Colors, Style} from '../../Services/ThemeProvider';

export type SignatureInputProps = {
  label: string;
  value?: string;
  errorMessage?: string;
  onChangeValue: (id: number) => void;
  containerStyles?: ViewStyle;
  onBegin?: () => void;
  onEnd?: () => void;
};

const SignatureInput: FunctionComponent<SignatureInputProps> = ({
  containerStyles,
  errorMessage,
  label,
  onChangeValue,
  value,
  onBegin,
  onEnd,
}) => {
  const signatureRef = useRef<any>();

  // Callback to get signature image data
  const uploadImage = (imageUri) => {

    ApiClient.i()
      .uploadMedia({file: imageUri})
      .then((response) => {
        console.log('See response:', response);
        onChangeValue(response.id);
        // setUploading(false);
      })
      .catch((error) => {
        console.log('Unknown Error while uploading image:', error);
        // setUploading(false);
      });
  };

  const style = `body {background: "none"}.m-signature-pad {width:50, height: 50}`;

  return (
    <View style={containerStyles}>
      <Text
        style={[
          Style.label,
          {
            marginBottom: 16,
          },
        ]}>
        {label}
      </Text>
      {errorMessage && (
        <Text
          style={{
            marginTop: 12,
            color: Colors.danger,
            textAlign: 'left',
          }}>
          {errorMessage}
        </Text>
      )}

      <Signature
        ref={signatureRef}
        // handle when you click save button
        onOK={(img) => uploadImage(img)}
        onEmpty={() => console.log('empty')}
        // description text for signature
        descriptionText="Sign"
        // clear button text
        clearText="Clears"
        // save button text
        confirmText="Save"
        autoClear={false}
        imageType="image/jpeg"
        onBegin={onBegin}
        onEnd={onEnd}
        webStyle={style}
      />
    </View>
  );
};

export default SignatureInput;

Versions:

"react": "16.13.1" "react-native": "0.63.3" "react-native-signature-canvas": "^3.4.0" "react-native-webview": "^11.2.3"

• Screenshot IOS (iPhone 11):

• Screenshot Android (Vivo S1):

Required: Same like IOS Current: Only half of the view is appearing (View is getting cut from bottom)

[aliwaqar981]

I don't know if I'm passing styles properly

[YanYuanFE]

v3.6.0

[aliwaqar981]

v3.6.0

@YanYuanFE by upgrading to v3.6.0: Android: Same Reponse IOS: Button got disappeared (same like android)

[YanYuanFE]

you can run this example: https://github.com/YanYuanFE/react-native-signature-canvas/tree/master/example/expo-app,

ios snapshot

[sanyuelanv]

maybe you can choose to use this to meet your needs https://github.com/amazingCoding/react-native-signature-board this to

[aliwaqar981]

Found a fix using below styles: .m-signature-pad--footer { position: absolute; }

[YanYuanFE]

@sanyuelanv 很不错，看了下，是原生写的，我做这个的目的是为了在expo项目里面使用

[aliwaqar981]

maybe you can choose to use this to meet your needs https://github.com/amazingCoding/react-native-signature-board this to

Sure thanks, I will try out this too