@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

---

Prop	Type	Description
style	object	styles the RNSignatureView container
onGetSign	(event) => { console.log(event.nativeEvent.sign) }	gives you base64 string for your signature
selectedTabColor	string	changes selected tab color. Default color is "#333"
selectedTabTextColor	string	changes selected tab text color. Default color is "#fff"
unselectedTabColor	string	changes unselected tab color. Default color is "#ddd"
unselectedTabTextColor	string	changes unselected tab text color. Default color is "#333"
seekBarColor	string	changes slider color inside Type option. Default color is "#333"
clearText	string	changes Clear button text. Default text is "Clear"
getSignText	string	changes Get Sign button text. Default text is "Get Sign"
capsTabText	boolean	shows tabs text in capital letters. Default is false
capsButtonText	boolean	shows buttons text in capital letters. Default is false
clearButtonBgColor	string	changes Clear button background color. Default color is "#ddd"
clearTextColor	string	changes Clear button text color. Default color is "#333"
getSignButtonBgColor	string	changes Get Sign button background color. Default color is "#333"
getSignTextColor	string	changes Get Sign button text color. Default color is "#fff"
strokeColor	string	changes stroke color in both Draw and Type options. Default color is "#000"
drawStrokeWidth	number	changes stroke width in Draw option. Default value is 10
onDrawBegin	() => void	is called when a stroke is started in Draw option
onDrawEnd	() => void	is called when a stroke is ended in Draw option
onClear	() => void	is called when Clear button is pressed.

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