From 961009d74fedc7a7cdedadca08cb0d87f7ad2984 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Mon, 17 Sep 2018 17:30:53 +0200 Subject: [PATCH] Install rn-svg again and draw columns --- android/app/build.gradle | 1 + .../main/java/com/drip/MainApplication.java | 2 + android/settings.gradle | 2 + components/chart/day-column.js | 43 +++++++++++++------ components/chart/styles.js | 7 ++- ios/drip.xcodeproj/project.pbxproj | 16 +++++++ package-lock.json | 43 +++++++++++++++++++ package.json | 1 + 8 files changed, 100 insertions(+), 15 deletions(-) diff --git a/android/app/build.gradle b/android/app/build.gradle index 9c525a6..d82743d 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -151,6 +151,7 @@ android { dependencies { compile project(':nodejs-mobile-react-native') compile project(':react-native-restart') + compile project(':react-native-svg') compile project(':react-native-push-notification') compile project(':react-native-vector-icons') compile project(':react-native-fs') diff --git a/android/app/src/main/java/com/drip/MainApplication.java b/android/app/src/main/java/com/drip/MainApplication.java index dc83fe7..bbf0a07 100644 --- a/android/app/src/main/java/com/drip/MainApplication.java +++ b/android/app/src/main/java/com/drip/MainApplication.java @@ -5,6 +5,7 @@ import android.app.Application; import com.facebook.react.ReactApplication; import com.janeasystems.rn_nodejs_mobile.RNNodeJsMobilePackage; import com.avishayil.rnrestart.ReactNativeRestartPackage; +import com.horcrux.svg.SvgPackage; import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage; import com.oblador.vectoricons.VectorIconsPackage; import com.rnfs.RNFSPackage; @@ -34,6 +35,7 @@ public class MainApplication extends Application implements ReactApplication, Sh new MainReactPackage(), new RNNodeJsMobilePackage(), new ReactNativeRestartPackage(), + new SvgPackage(), new ReactNativePushNotificationPackage(), new VectorIconsPackage(), new RNFSPackage(), diff --git a/android/settings.gradle b/android/settings.gradle index 327fbe1..05a2c69 100644 --- a/android/settings.gradle +++ b/android/settings.gradle @@ -3,6 +3,8 @@ include ':nodejs-mobile-react-native' project(':nodejs-mobile-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/nodejs-mobile-react-native/android') include ':react-native-restart' project(':react-native-restart').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-restart/android') +include ':react-native-svg' +project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android') include ':react-native-push-notification' project(':react-native-push-notification').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-push-notification/android') include ':react-native-vector-icons' diff --git a/components/chart/day-column.js b/components/chart/day-column.js index e541ab0..4a638be 100644 --- a/components/chart/day-column.js +++ b/components/chart/day-column.js @@ -1,7 +1,11 @@ import React, { Component } from 'react' import { - Text, View, TouchableOpacity + Text, View } from 'react-native' +import Svg,{ + G, + Rect +} from 'react-native-svg' import Icon from 'react-native-vector-icons/Entypo' import styles from './styles' import config from '../../config' @@ -94,17 +98,27 @@ export default class DayColumn extends Component { potentialCustomStyle.borderLeftColor = styles.nfpLine.borderColor potentialCustomStyle.borderLeftWidth = 3 } - const column = React.createElement( - TouchableOpacity, - { - style: [styles.column.rect, potentialCustomStyle], - key: this.props.index.toString(), - onPress: () => { - this.passDateToDayView(dateString) - }, - activeOpacity: 1 - }, - columnElements + // const column = React.createElement( + // TouchableOpacity, + // { + // style: [styles.column.rect, potentialCustomStyle], + // key: this.props.index.toString(), + // onPress: () => { + // this.passDateToDayView(dateString) + // }, + // activeOpacity: 1 + // }, + // columnElements + // ) + + const column = ( + this.passDateToDayView(dateString)}> + + { columnElements } + ) return ( @@ -176,7 +190,10 @@ export default class DayColumn extends Component { } - {column} + + + {column} + {cycleDayLabel} diff --git a/components/chart/styles.js b/components/chart/styles.js index 56cede6..4e96684 100644 --- a/components/chart/styles.js +++ b/components/chart/styles.js @@ -44,9 +44,12 @@ const styles = { } }, rect: { + x:'0', + y:'0', width: config.columnWidth, - borderStyle: 'solid', - borderLeftWidth: 0.5, + stroke: "red", + strokeWidth: 0.25, + fill: 'transparent' } }, bleedingIcon: { diff --git a/ios/drip.xcodeproj/project.pbxproj b/ios/drip.xcodeproj/project.pbxproj index 34660c7..c6a9665 100644 --- a/ios/drip.xcodeproj/project.pbxproj +++ b/ios/drip.xcodeproj/project.pbxproj @@ -64,6 +64,8 @@ 8EA186B6112C41D1B206762D /* NodeMobile.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = C225FC4966694B9FBD32E946 /* NodeMobile.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, ); }; }; E4584E55EEC24302A3E84A23 /* nodejs-project in Resources */ = {isa = PBXBuildFile; fileRef = 6466AE2461BE4FA88B8372F0 /* nodejs-project */; }; A16B351C3F3644CF95F104D2 /* builtin_modules in Resources */ = {isa = PBXBuildFile; fileRef = 36F1B55D0DEE47AA9AF4BBDD /* builtin_modules */; }; + 45794BEC42E34672A759220F /* libRNSVG.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 93C745A8EE95400C96FD5CF7 /* libRNSVG.a */; }; + 3E63FB3C405F4AF39969C7E3 /* libRNSVG-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = AD4FC2FD95A84EFCBB59195F /* libRNSVG-tvOS.a */; }; /* End PBXBuildFile section */ /* Begin PBXContainerItemProxy section */ @@ -402,6 +404,9 @@ C225FC4966694B9FBD32E946 /* NodeMobile.framework */ = {isa = PBXFileReference; name = "NodeMobile.framework"; path = "../node_modules/nodejs-mobile-react-native/ios/NodeMobile.framework"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = wrapper.framework; explicitFileType = undefined; includeInIndex = 0; }; 6466AE2461BE4FA88B8372F0 /* nodejs-project */ = {isa = PBXFileReference; name = "nodejs-project"; path = "../nodejs-assets/nodejs-project"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; 36F1B55D0DEE47AA9AF4BBDD /* builtin_modules */ = {isa = PBXFileReference; name = "builtin_modules"; path = "../node_modules/nodejs-mobile-react-native/install/resources/nodejs-modules/builtin_modules"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + DEB488BF9A9642508320FB42 /* RNSVG.xcodeproj */ = {isa = PBXFileReference; name = "RNSVG.xcodeproj"; path = "../node_modules/react-native-svg/ios/RNSVG.xcodeproj"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; }; + 93C745A8EE95400C96FD5CF7 /* libRNSVG.a */ = {isa = PBXFileReference; name = "libRNSVG.a"; path = "libRNSVG.a"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; }; + AD4FC2FD95A84EFCBB59195F /* libRNSVG-tvOS.a */ = {isa = PBXFileReference; name = "libRNSVG-tvOS.a"; path = "libRNSVG-tvOS.a"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -440,6 +445,7 @@ 72DA6B4241504DB096AFAD40 /* libRCTRestart.a in Frameworks */, E09F3B05A4F84E9883101CC7 /* libRNNodeJsMobile.a in Frameworks */, E43EF009AC8C4698AB322190 /* NodeMobile.framework in Frameworks */, + 45794BEC42E34672A759220F /* libRNSVG.a in Frameworks */, ); runOnlyForDeploymentPostprocessing = 0; }; @@ -456,6 +462,7 @@ 2D02E4C71E0B4AEC006451C7 /* libRCTText-tvOS.a in Frameworks */, 2D02E4C81E0B4AEC006451C7 /* libRCTWebSocket-tvOS.a in Frameworks */, 934282049FA3497D9062CEC1 /* libRNSVG-tvOS.a in Frameworks */, + 3E63FB3C405F4AF39969C7E3 /* libRNSVG-tvOS.a in Frameworks */, ); runOnlyForDeploymentPostprocessing = 0; }; @@ -637,6 +644,7 @@ 49089E09BFCF4F3DB209B6E9 /* RNFS.xcodeproj */, 50DBC4BCDDF74A10AEDC99D5 /* RCTRestart.xcodeproj */, 65F706FAFA1444AE9937D472 /* RNNodeJsMobile.xcodeproj */, + DEB488BF9A9642508320FB42 /* RNSVG.xcodeproj */, ); name = Libraries; sourceTree = ""; @@ -1482,6 +1490,7 @@ fi "$(inherited)", "\"../node_modules/nodejs-mobile-react-native/ios\"", "\"../node_modules/nodejs-mobile-react-native/ios\"", + "$(SRCROOT)/../node_modules/react-native-svg/ios/**", ); ENABLE_BITCODE = NO; }; @@ -1523,6 +1532,7 @@ fi "$(inherited)", "\"../node_modules/nodejs-mobile-react-native/ios\"", "\"../node_modules/nodejs-mobile-react-native/ios\"", + "$(SRCROOT)/../node_modules/react-native-svg/ios/**", ); ENABLE_BITCODE = NO; }; @@ -1552,6 +1562,7 @@ fi "$(SRCROOT)/../node_modules/react-native-fs/**", "$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**", "$(SRCROOT)/../node_modules/nodejs-mobile-react-native/ios/**", + "$(SRCROOT)/../node_modules/react-native-svg/ios/**", ); FRAMEWORK_SEARCH_PATHS = ( "$(inherited)", @@ -1584,6 +1595,7 @@ fi "$(SRCROOT)/../node_modules/react-native-fs/**", "$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**", "$(SRCROOT)/../node_modules/nodejs-mobile-react-native/ios/**", + "$(SRCROOT)/../node_modules/react-native-svg/ios/**", ); FRAMEWORK_SEARCH_PATHS = ( "$(inherited)", @@ -1638,6 +1650,7 @@ fi "$(inherited)", "\"../node_modules/nodejs-mobile-react-native/ios\"", "\"../node_modules/nodejs-mobile-react-native/ios\"", + "$(SRCROOT)/../node_modules/react-native-svg/ios/**", ); ENABLE_BITCODE = NO; }; @@ -1688,6 +1701,7 @@ fi "$(inherited)", "\"../node_modules/nodejs-mobile-react-native/ios\"", "\"../node_modules/nodejs-mobile-react-native/ios\"", + "$(SRCROOT)/../node_modules/react-native-svg/ios/**", ); ENABLE_BITCODE = NO; }; @@ -1732,6 +1746,7 @@ fi "$(SRCROOT)/../node_modules/react-native-fs/**", "$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**", "$(SRCROOT)/../node_modules/nodejs-mobile-react-native/ios/**", + "$(SRCROOT)/../node_modules/react-native-svg/ios/**", ); FRAMEWORK_SEARCH_PATHS = ( "$(inherited)", @@ -1781,6 +1796,7 @@ fi "$(SRCROOT)/../node_modules/react-native-fs/**", "$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**", "$(SRCROOT)/../node_modules/nodejs-mobile-react-native/ios/**", + "$(SRCROOT)/../node_modules/react-native-svg/ios/**", ); FRAMEWORK_SEARCH_PATHS = ( "$(inherited)", diff --git a/package-lock.json b/package-lock.json index 26216ec..fa9d4d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2566,6 +2566,15 @@ "object-visit": "^1.0.0" } }, + "color": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color/-/color-2.0.1.tgz", + "integrity": "sha512-ubUCVVKfT7r2w2D3qtHakj8mbmKms+tThR8gI8zEYCbUBl8/voqFGt3kgBqGwXAopgXybnkuOq+qMYCRrp4cXw==", + "requires": { + "color-convert": "^1.9.1", + "color-string": "^1.5.2" + } + }, "color-convert": { "version": "1.9.2", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.2.tgz", @@ -2579,6 +2588,15 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.1.tgz", "integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok=" }, + "color-string": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz", + "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==", + "requires": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, "color-support": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz", @@ -6650,6 +6668,16 @@ "resolved": "https://registry.npmjs.org/react-native-share/-/react-native-share-1.1.0.tgz", "integrity": "sha512-uQXo+HzZGUo9VlfgfWwGa9vLrY9OBQOFAsxhH/e3GWAlCxrGGjXNu/La+aJzMJdhoHzzn1+NRWDp1LWvlxJHew==" }, + "react-native-svg": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-7.0.2.tgz", + "integrity": "sha512-vDHePF9sSPp3s+AmAkk4HBvgWHdlaH5ns1mCAcrPqTiyF1QsApAtp3/3AHh8G8o57F2eJjEQ7LrRFNYyQPUBEw==", + "requires": { + "color": "^2.0.1", + "lodash": "^4.16.6", + "pegjs": "^0.10.0" + } + }, "react-native-vector-icons": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-5.0.0.tgz", @@ -7577,6 +7605,21 @@ } } }, + "simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=", + "requires": { + "is-arrayish": "^0.3.1" + }, + "dependencies": { + "is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" + } + } + }, "slash": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz", diff --git a/package.json b/package.json index 035ca51..0fff50d 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "react-native-push-notification": "^3.1.1", "react-native-restart": "0.0.7", "react-native-share": "^1.1.0", + "react-native-svg": "^7.0.2", "react-native-vector-icons": "^5.0.0", "realm": "^2.7.1" },