SignaturePadModal.tsx

export function SignaturePadModal({
    order,
    vendorPackageIds,
    closeRef,
    onSubmit,
    onClose,
}: SignaturePadModalProps): React.ReactElement {
    const onError = useOnError()
    const dispatch = useDispatch()

    const [visible, setVisible] = useState(true)
    useEffect(() => {
        if (!closeRef) return
        closeRef.current = () => setVisible(false)
    })

    const submittedRef = useRef(false)
    const signatureRef = useRef<SignatureViewRef>(null)

    function handleOK(signature: string): void {
        saveImageAsync(signature)
            .then((fileUri) => {
                dispatch(
                    orderActions.signForAsync.request(
                        {
                            orderId: order.id,
                            vendorPackageIds,
                            fileUri,
                            needsRotationBy: 180,
                            resizeWidth: 600,
                        },
                        getOrderActionMeta(order)
                    )
                )

                submittedRef.current = true
                onSubmit()
                return undefined
            })
            .catch(onError)
    }

    return (
        <Modal
            isVisible={visible}
            onBackdropPress={() => setVisible(false)}
            onBackButtonPress={() => setVisible(false)}
            onModalHide={() => onClose(submittedRef.current)}
            propagateSwipe
            style={{
                margin: 0,
            }}
        >
            <View
                style={[
                    baseStyles.fullScreenModal,
                    baseStyles.fullScreenModalContentContainer,
                    styles.content,
                ]}
            >
                <View pointerEvents="box-none" style={styles.overlay}>
                    <View pointerEvents="box-none" style={styles.overlayCol}>
                        <Button
                            small
                            style={styles.clear}
                            onPress={() => signatureRef.current?.clearSignature()}
                        >
                            <Text>Clear</Text>
                        </Button>
                        <Text style={styles.signBelow}>Please sign below</Text>
                        <Text />
                    </View>
                </View>
                <SignatureScreen
                    ref={signatureRef}
                    onOK={handleOK}
                    rotated
                    descriptionText="Please sign above"
                    confirmText="Confirm"
                    clearText="Clear"
                    webStyle={`
                    .m-signature-pad--footer {display: none; margin: 0px;}
                    `}
                />
                <View style={styles.buttonRow}>
                    <Button
                        dark
                        bordered
                        style={styles.button}
                        onPress={() => setVisible(false)}
                    >
                        <Text>Cancel</Text>
                    </Button>
                    <Button
                        primary
                        style={styles.button}
                        onPress={() => signatureRef.current?.readSignature()}
                    >
                        <Text>Confirm</Text>
                    </Button>
                </View>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    content: {
        flex: 1,
    },
    overlay: {
        position: 'absolute',
        height: '100%',
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'flex-start',
        zIndex: 1000,
    },
    overlayCol: {
        justifyContent: 'space-between',
    },
    // Rotating an element screws up its placement. Translate it to the position we want
    //
    // translateX controls the element's HORIZONTAL positioning.
    // More negative = farther left
    //
    // translateY controls the element's VERTICAL positioning.
    // More negative = lower
    signBelow: {
        color: colors.textLight,
        transform: [{ rotate: '270deg' }, { translateX: -3 }, { translateY: -50 }],
    },
    clear: {
        backgroundColor: colors.buttonBlue,
        transform: [
            { rotate: '270deg' },
            {
                translateX: -42,
            },
            {
                translateY: Platform.OS === 'ios' ? -14 : -12,
            },
        ],
    },
    buttonRow: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingTop: 8,
        paddingBottom: 4,
    },
    button: {
        flex: 1,
        flexBasis: 0,
        justifyContent: 'center',
        marginHorizontal: 4,
    },
})