@cbawa/react-native-signature-view v1.0.0

@cbawa/react-native-signature-view

React Native Sign View module is developed for both Android and iOS. This package offers two signing options: Draw and Type. It does not require any dependencies, like react-native-webview.

• Supports Android and iOS
• Tested with RN 0.72
• Draw your Signature
• Type your Signature and plugin will draw it for you
• Change font size of typed signature via slider.
• No dependencies required, like react-native-webview

Installation(for React Native v0.60.0 or greater)

yarn add @cbawa/react-native-signature-view

or

npm install --save @cbawa/react-native-signature-view

- For Android - Autolinking will do it's magic.

- For iOS

$ npx pod-install

If you want to use the same font in iOS as we have in Android. You can download the font form here and follow the steps below:

• Create new group Assets inside root folder of your project
• Create new group Fonts inside Assets folder.
• Drap and Drop the downloaded font inside Fonts folder.
• Check copy items if needed
• Select create groups
• Inside Add to targets, select project name as target
• Open info.plist form your project
• Add a new row inside info.plist and type Fonts provided by application
• Expand Fonts provided by application and add font name (eg: Signature.ttf) as the value of item 0

Usage

import * as React from 'react';
import { StyleSheet } from 'react-native';
import RNSignatureView from '@cbawa/react-native-signature-view';

const App = () => {
  return (
    <RNSignatureView
      style={styles.signatureView}
      onGetSign={(event) => {
        console.log(event.nativeEvent.sign);
      }}
    />
  );
};

const styles = StyleSheet.create({
  signatureView: {
    width: '100%',
    height: 200,
    borderWidth: 1,
  },
});

export default App;

Properties

Example

import * as React from 'react';
import { Image, Platform, StyleSheet, View } from 'react-native';
import RNSignatureView from '@cbawa/react-native-signature-view';

const App = () => {
  const [sign, setSign] = React.useState('');
  return (
    <View style={styles.container}>
      <RNSignatureView
        style={styles.signatureView}
        selectedTabColor="#080"
        selectedTabTextColor="#fff"
        unselectedTabColor="#ddd"
        unselectedTabTextColor="#333"
        seekBarColor="#080"
        clearText="Wipe"
        getSignText="Capture"
        capsTabText
        capsButtonText
        clearButtonBgColor="#ddd"
        clearTextColor="#333"
        getSignButtonBgColor="#080"
        getSignTextColor="#fff"
        strokeColor="#080"
        drawStrokeWidth={14}
        onGetSign={(event) => {
          setSign(event.nativeEvent.sign);
        }}
        onClear={() => setSign('')}
      />
      {sign && (
        <View style={styles.view}>
          <Image
            source={{ uri: `data:image/png;base64,${sign}` }}
            alt="sign"
            style={styles.signImage}
          />
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  signatureView: {
    width: '100%',
    height: 200,
    borderWidth: 1,
  },
  view: {
    width: '100%',
    height: 100,
    padding: 5,
    borderWidth: 1,
    borderColor: 'black',
    marginTop: 10,
  },
  signImage: {
    width: '100%',
    height: '100%',
    objectFit: 'contain',
    backgroundColor: 'white',
  },
});

export default App;

Example inside ScrollView

If you are going to use RNSignatureView inside a ScrollView, you must use onDrawBegin and onDrawEnd functions to enable/disable the scroll event of the Scrollview. Otherwise, Scrollview would highjack the touch and move event form RNSignatureView's canvas, while drawing a signature. Here's an example:

import * as React from 'react';
import { Image, ScrollView, StyleSheet, View, Text } from 'react-native';
import RNSignatureView from '@cbawa/react-native-signature-view';

const App = () => {
  const [scrollEnabled, setScrollEnabled] = React.useState(true);
  const [sign, setSign] = React.useState('');
  return (
    <ScrollView scrollEnabled={scrollEnabled}>
      <View style={styles.container}>
        <View style={styles.view}>
          <Text style={styles.text}>One View</Text>
        </View>
        <RNSignatureView
          style={styles.signatureView}
          onGetSign={(event) => {
            setSign(event.nativeEvent.sign);
          }}
          onDrawBegin={() => setScrollEnabled(false)}
          onDrawEnd={() => setScrollEnabled(true)}
          onClear={() => setSign('')}
        />
        {sign && (
          <View style={styles.view}>
            <Image
              source={{ uri: `data:image/png;base64,${sign}` }}
              alt="sign"
              style={styles.signImage}
            />
          </View>
        )}
        <View style={styles.view}>
          <Text style={styles.text}>Another View</Text>
        </View>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  signatureView: {
    width: '100%',
    height: 180,
    marginTop: 10,
  },
  view: {
    width: '100%',
    height: 140,
    padding: 5,
    borderWidth: 1,
    borderColor: 'black',
    marginTop: 10,
  },
  signImage: {
    width: '100%',
    height: '100%',
    objectFit: 'contain',
    backgroundColor: 'white',
  },
  text: {
    color: '#333',
    textAlign: 'center',
    fontWeight: '600',
  },
});

export default App;

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library