Add example sources of 'react-native-signature-capture'.

Codelabsys · Aug 28, 2016 · 5e6109e · 5e6109e
1 parent 2330555
commit 5e6109e
Show file tree

Hide file tree

Showing 4 changed files with 151 additions and 96 deletions.
diff --git a/Example/index.android.js b/Example/index.android.js
@@ -1,53 +1,7 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
-
-import React, { Component } from 'react';
 import {
   AppRegistry,
-  StyleSheet,
-  Text,
-  View
 } from 'react-native';
 
-class SignatureCaptureExample extends Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.android.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+D or shake for dev menu
-        </Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
+import ExampleApp from './src/ExampleApp';
 
-AppRegistry.registerComponent('SignatureCaptureExample', () => SignatureCaptureExample);
+AppRegistry.registerComponent('SignatureCaptureExample', () => ExampleApp);
diff --git a/Example/index.ios.js b/Example/index.ios.js
@@ -1,53 +1,7 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
-
-import React, { Component } from 'react';
 import {
   AppRegistry,
-  StyleSheet,
-  Text,
-  View
 } from 'react-native';
 
-class SignatureCaptureExample extends Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.ios.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+D or shake for dev menu
-        </Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
+import ExampleApp from './src/ExampleApp';
 
-AppRegistry.registerComponent('SignatureCaptureExample', () => SignatureCaptureExample);
+AppRegistry.registerComponent('SignatureCaptureExample', () => ExampleApp);
diff --git a/Example/src/ExampleApp.js b/Example/src/ExampleApp.js
@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+
+import {
+  View, StyleSheet, Text, Image, TouchableOpacity
+} from 'react-native';
+
+import SignatureView from './SignatureView';
+
+const flexCenter = {
+  flex: 1,
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+
+class ExampleApp extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      data: null
+    };
+  }
+
+  render() {
+    const {data} = this.state;
+    return (
+      <View style={flexCenter}>
+        <TouchableOpacity onPress={this._showSignatureView.bind(this)}>
+          <View style={[flexCenter, {padding: 10}]}>
+            <Text style={{fontSize: 18, fontWeight: 'bold'}}>
+              {data ? 'This is a your signature.' : 'Click here.'}
+            </Text>
+            <View style={{paddingBottom: 10}} />
+            {data &&
+              <View style={{backgroundColor: 'white'}}>
+                <Image
+                  resizeMode={'contain'}
+                  style={{width: 300, height: 300}}
+                  source={{uri: data}}
+                />
+              </View>
+            }
+          </View>
+        </TouchableOpacity>
+        <SignatureView
+          ref={r => this._signatureView = r}
+          rotateClockwise={!!true}
+          onSave={this._onSave.bind(this)}
+        />
+      </View>
+    );
+  }
+
+  _showSignatureView() {
+    this._signatureView.show(true);
+  }
+
+  _onSave(result) {
+    const base64String = `data:image/png;base64,${result.encoded}`;
+    this.setState({data: base64String});
+
+    this._signatureView.show(false);
+  }
+}
+
+export default ExampleApp;
diff --git a/Example/src/SignatureView.js b/Example/src/SignatureView.js
@@ -0,0 +1,80 @@
+import React, {
+  Component, PropTypes
+} from 'react';
+
+import ReactNative, {
+  View, Text, Modal, Platform, Alert
+} from 'react-native';
+
+import SignatureCapture from 'react-native-signature-capture';
+
+const toolbarHeight = Platform.select({
+  android: 0,
+  ios: 22
+});
+
+const modalViewStyle = {
+  paddingTop: toolbarHeight,
+  flex: 1
+};
+
+class SignatureView extends Component {
+
+  static propTypes = {
+    onSave: PropTypes.func
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      visible: false
+    };
+  }
+
+  show(display) {
+    this.setState({visible: display});
+  }
+
+  render() {
+    const {visible} = this.state;
+
+    return (
+      <Modal transparent={false} visible={visible} onRequestClose={this._onRequreClose.bind(this)}>
+        <View style={modalViewStyle}>
+          <View style={{padding: 10, flexDirection: 'row'}}>
+            <Text onPress={this._onPressClose.bind(this)}>{' x '}</Text>
+            <View style={{flex: 1, alignItems: 'center'}}>
+              <Text style={{fontSize: 14}}>Please write your signature.</Text>
+            </View>
+          </View>
+          <SignatureCapture
+            onDragEvent={this._onDragEvent.bind(this)}
+            onSaveEvent={this._onSaveEvent.bind(this)}
+          />
+        </View>
+      </Modal>
+    );
+  }
+
+  _onPressClose() {
+    this.show(false);
+  }
+
+  _onRequreClose() {
+    this.show(false);
+  }
+
+  _onDragEvent() {
+    // This callback will be called when the user enters signature
+   console.log("dragged");
+  }
+
+  _onSaveEvent(result) {
+    //result.encoded - for the base64 encoded png
+    //result.pathName - for the file path name
+    this.props.onSave && this.props.onSave(result);
+  }
+}
+
+export default SignatureView;