chore: add Example to repo

This PR adds Example app, code of which is taken from snack linked in README to the repo in order to be able to test changes in code quickly.

Example/.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

Example/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native-community',
+};

Example/.flowconfig

@@ -0,0 +1,65 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore polyfills
+node_modules/react-native/Libraries/polyfills/.*
+
+; Flow doesn't support platforms
+.*/Libraries/Utilities/LoadingView.js
+
+[untyped]
+.*/node_modules/@react-native-community/cli/.*/.*
+
+[include]
+
+[libs]
+node_modules/react-native/interface.js
+node_modules/react-native/flow/
+
+[options]
+emoji=true
+
+exact_by_default=true
+
+format.bracket_spacing=false
+
+module.file_ext=.js
+module.file_ext=.json
+module.file_ext=.ios.js
+
+munge_underscores=true
+
+module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
+module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FlowFixMeProps
+suppress_type=$FlowFixMeState
+
+[lints]
+sketchy-null-number=warn
+sketchy-null-mixed=warn
+sketchy-number=warn
+untyped-type-import=warn
+nonstrict-import=warn
+deprecated-type=warn
+unsafe-getters-setters=warn
+unnecessary-invariant=warn
+signature-verification-failure=warn
+
+[strict]
+deprecated-type
+nonstrict-import
+sketchy-null
+unclear-type
+unsafe-getters-setters
+untyped-import
+untyped-type-import
+
+[version]
+^0.170.0

Example/.gitignore

@@ -0,0 +1,61 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+!debug.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifact
+*.jsbundle
+
+# Ruby / CocoaPods
+/ios/Pods/
+/vendor/bundle/

Example/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: false,
+  singleQuote: true,
+  trailingComma: 'all',
+};

Example/.watchmanconfig

@@ -0,0 +1 @@
+{}

Example/App.js

@@ -0,0 +1,237 @@
+/**
+ * Sample React Native App for react-native-svg library
+ * https://github.com/magicismight/react-native-svg/tree/master/Example
+ */
+'use strict';
+
+import React, { Component } from 'react';
+import {
+  Dimensions,
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  ScrollView,
+  TouchableHighlight,
+  TouchableOpacity,
+  Animated,
+  Easing,
+} from 'react-native';
+import Modal from './Modal';
+import {
+  Svg,
+  Circle,
+  Ellipse,
+  G,
+  TSpan,
+  TextPath,
+  Path,
+  Polygon,
+  Polyline,
+  Line,
+  Rect,
+  Use,
+  Image,
+  Symbol,
+  Defs,
+  LinearGradient,
+  RadialGradient,
+  Stop,
+  ClipPath,
+  Pattern,
+  Mask,
+  Marker,
+} from './Svg';
+
+import * as examples from './examples';
+
+const hairline = StyleSheet.hairlineWidth;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 20,
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  contentContainer: {
+    alignSelf: 'stretch',
+    borderTopWidth: hairline,
+    borderTopColor: '#ccc',
+    borderBottomWidth: hairline,
+    borderBottomColor: '#ccc',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    marginHorizontal: 10,
+  },
+  welcome: {
+    padding: 10,
+    color: '#f60',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  link: {
+    height: 40,
+    alignSelf: 'stretch',
+    width: Dimensions.get('window').width / 2 - 10,
+  },
+  title: {
+    marginLeft: 10,
+  },
+  cell: {
+    height: 40,
+    paddingHorizontal: 10,
+    alignSelf: 'stretch',
+    alignItems: 'center',
+    flexDirection: 'row',
+    borderTopWidth: hairline,
+    borderTopColor: '#ccc',
+    marginTop: -hairline,
+    backgroundColor: 'transparent',
+  },
+  close: {
+    position: 'absolute',
+    right: 20,
+    top: 40,
+  },
+  scroll: {
+    position: 'absolute',
+    top: 30,
+    right: 10,
+    bottom: 20,
+    left: 10,
+    backgroundColor: '#fff',
+  },
+  scrollContent: {
+    borderTopWidth: hairline,
+    borderTopColor: '#ccc',
+  },
+  example: {
+    paddingVertical: 25,
+    alignSelf: 'stretch',
+    alignItems: 'center',
+    borderBottomWidth: hairline,
+    borderBottomColor: '#ccc',
+  },
+  sampleTitle: {
+    marginHorizontal: 15,
+    fontSize: 16,
+    color: '#666',
+  },
+});
+
+const names = [
+  'Svg',
+  'Stroking',
+  'Path',
+  'Line',
+  'Rect',
+  'Polygon',
+  'Polyline',
+  'Circle',
+  'Ellipse',
+  'G',
+  'Text',
+  'Gradients',
+  'Clipping',
+  'Image',
+  'TouchEvents',
+  'PanResponder',
+  'Reusable',
+];
+
+const initialState = {
+  modal: false,
+  content: null,
+};
+
+export default class SvgExample extends Component {
+  state = initialState;
+
+  show = name => {
+    if (this.state.modal) {
+      return;
+    }
+    let example = examples[name];
+    if (example) {
+      let samples = example.samples;
+      this.setState({
+        modal: true,
+        content: (
+          <View>
+            {samples.map((Sample, i) => (
+              <View style={styles.example} key={`sample-${i}`}>
+                <Text style={styles.sampleTitle}>{Sample.title}</Text>
+                <Sample />
+              </View>
+            ))}
+          </View>
+        ),
+        scroll: example.scroll !== false,
+      });
+    }
+  };
+
+  hide = () => {
+    this.setState(initialState);
+  };
+
+  getExamples = () => {
+    return names.map(name => {
+      var icon;
+      let example = examples[name];
+      if (example) {
+        icon = example.icon;
+      }
+      return (
+        <TouchableHighlight
+          style={styles.link}
+          underlayColor="#ccc"
+          key={`example-${name}`}
+          onPress={() => this.show(name)}>
+          <View style={styles.cell}>
+            {icon}
+            <Text style={styles.title}>{name}</Text>
+          </View>
+        </TouchableHighlight>
+      );
+    });
+  };
+
+  modalContent = () => (
+    <>
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={styles.scrollContent}
+        scrollEnabled={this.state.scroll}>
+        {this.state.content}
+      </ScrollView>
+      <View style={styles.close}>
+        <TouchableOpacity activeOpacity={0.7} onPress={this.hide}>
+          <Svg height="20" width="20">
+            <Circle cx="10" cy="10" r="10" fill="red" />
+            <Line x1="4" y1="4" x2="16" y2="16" stroke="#fff" strokeWidth="2" />
+            <Line x1="4" y1="16" x2="16" y2="4" stroke="#fff" strokeWidth="2" />
+          </Svg>
+        </TouchableOpacity>
+      </View>
+    </>
+  );
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.welcome}>SVG library for React Apps</Text>
+        <View style={styles.contentContainer}>{this.getExamples()}</View>
+        <Modal
+          ariaHideApp={false}
+          transparent={false}
+          animationType="fade"
+          visible={this.state.modal}
+          onRequestClose={this.hide}>
+          {this.modalContent()}
+        </Modal>
+      </View>
+    );
+  }
+}

Example/Gemfile

@@ -0,0 +1,6 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby '2.7.4'
+
+gem 'cocoapods', '~> 1.11', '>= 1.11.2'