From ecc3034f06baf43a118899c360e779d9ea4cd15e Mon Sep 17 00:00:00 2001 From: Pranav Raj Singh Chauhan Date: Mon, 28 May 2018 14:04:29 +0530 Subject: [PATCH] - enabling to add custom icons --- Example/App.js | 4 +-- .../app/src/main/res/drawable/paste.png | Bin 0 -> 1003 bytes Example/android/build.gradle | 2 +- .../gradle/wrapper/gradle-wrapper.properties | 4 +-- Example/ios/Example.xcodeproj/project.pbxproj | 4 +++ Example/ios/Example/paste.png | Bin 0 -> 1463 bytes README.md | 26 ++++++++++++++++++ .../ui/popovermenu/RNPopoverMenuModule.java | 10 +++++++ ios/RNPopoverMenu.m | 4 +++ js/Menu.js | 2 +- js/RNPopoverMenu.js | 20 ++++++-------- package.json | 2 +- 12 files changed, 60 insertions(+), 18 deletions(-) create mode 100644 Example/android/app/src/main/res/drawable/paste.png create mode 100644 Example/ios/Example/paste.png diff --git a/Example/App.js b/Example/App.js index ad92f09..051d8e7 100644 --- a/Example/App.js +++ b/Example/App.js @@ -46,7 +46,7 @@ export default class App extends Component<{}> { }, { label: "Paste", - icon: paste + icon: 'paste.png' }, { label: "Share", @@ -68,7 +68,7 @@ export default class App extends Component<{}> { }, { label: "Paste", - icon: paste + icon: 'paste.png' } ] }, diff --git a/Example/android/app/src/main/res/drawable/paste.png b/Example/android/app/src/main/res/drawable/paste.png new file mode 100644 index 0000000000000000000000000000000000000000..14b7951d7b493be134117e6650a111641420fc24 GIT binary patch literal 1003 zcmVOvU5tKwUhzNxucBu)KFrOT2Mg+-3Tu1LJFcB*4EaG4GYBM@mMq( z{Tevt`~G;CL?V&c5{X34IOq0MNi{k-Il0`hKub%@r_Q;40Owq<@B3%d>GZa;DH4f9 zJ^>!6l*7!%v)SxNEA55^MC6C^wsY>mrKP3u6^Udr`5N$4l@vdV$N|7gIqLzZ-u$Lr z{QU58n;q8oUpxf7Q9iD!-#h1y0bc=LSPoUaoX_V6=I7_Ht$L_>;Q0Ej2zxQkEVmW* zhe=cmRh@`Nqx)uNX8u|`7HS&`FY500uDg4!@9{zVam)w$Yr)Ozcq|rsI+Mv<4;!y2 zunxWwbxNq}vWOg|j#vnMKnD+<(v*C!#Wx~sFZ^JFfU z3+fhFv*8LzjnA}-gox}6g5cqfj*gRyi;EQ{N&@9@HN9fU*_v;m4vBm|Usb|e2Zw1- zv5)L5Zs|OkZGR|z+%-*HZi%NK6^EK}?H~7KZz>!rD=X!%6crI+2 z1DF~eSa1~jF?~rzK1O5<##KX4ZG?oXj(MK(TdthCS?-@CFTfvidRT~5DEF1a>V=F>W368zxU?0ft zwRsHQ$-F*rsG2;4)Ol)jV8IH(?`B#$I?cEQa=ZjLH8T!6=;f$Ij@E)hm0iB) z==qL(uzaCZ4&}?@-cUp21xy}6*dGRuSj(fojQ0J}lmHaV;Uha8`UN7l7klk_Gr3QM zXPbpXjZbZAbYQ_Fm^bXtBAY>j)JDOf&V!~{4t-L@b^${h1+QBGAU$$nn@Mm9NMZJy zifwhcTbqG5Bv6z%y~AYF5zM{=P9RJ+18-PhCGHwIH-YH(X5j$;>d$C191v>>nuY%_ Z;%|#x&SX^%1L6Px002ovPDHLkV1lA`(&GRC literal 0 HcmV?d00001 diff --git a/Example/android/build.gradle b/Example/android/build.gradle index 304b7c7..221c97e 100644 --- a/Example/android/build.gradle +++ b/Example/android/build.gradle @@ -6,7 +6,7 @@ buildscript { google() } dependencies { - classpath 'com.android.tools.build:gradle:3.0.1' + classpath 'com.android.tools.build:gradle:3.1.2' // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files diff --git a/Example/android/gradle/wrapper/gradle-wrapper.properties b/Example/android/gradle/wrapper/gradle-wrapper.properties index 5daed74..343e5f0 100644 --- a/Example/android/gradle/wrapper/gradle-wrapper.properties +++ b/Example/android/gradle/wrapper/gradle-wrapper.properties @@ -1,6 +1,6 @@ -#Wed Jan 31 15:54:01 IST 2018 +#Sun May 27 20:51:31 IST 2018 distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists zipStoreBase=GRADLE_USER_HOME zipStorePath=wrapper/dists -distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip +distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip diff --git a/Example/ios/Example.xcodeproj/project.pbxproj b/Example/ios/Example.xcodeproj/project.pbxproj index 64edb89..00b5078 100644 --- a/Example/ios/Example.xcodeproj/project.pbxproj +++ b/Example/ios/Example.xcodeproj/project.pbxproj @@ -48,6 +48,7 @@ 94C7128F4CA7445280B5314C /* MaterialIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C831003D7E6946C09035CBCC /* MaterialIcons.ttf */; }; ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; }; B3866D926C8644C8B7BF9140 /* libRNVectorIcons.a in Frameworks */ = {isa = PBXBuildFile; fileRef = D7B7344D79414585A99B09B5 /* libRNVectorIcons.a */; }; + CEBCF54120BAFF0100E38EBD /* paste.png in Resources */ = {isa = PBXBuildFile; fileRef = CEBCF51920BAFF0100E38EBD /* paste.png */; }; E0BE039A6D494AA8B3E6A207 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 2994E3C1FB86403B8403A09D /* Zocial.ttf */; }; F705588D6AB146B0AD6A66E2 /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 534DB364FAC74C0A8E624F3B /* EvilIcons.ttf */; }; /* End PBXBuildFile section */ @@ -382,6 +383,7 @@ C67D645C7914439084DB2DBC /* FontAwesome.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = FontAwesome.ttf; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = ""; }; C831003D7E6946C09035CBCC /* MaterialIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = MaterialIcons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf"; sourceTree = ""; }; CC17475F4B294B24B996F06D /* RNVectorIcons.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNVectorIcons.xcodeproj; path = "../node_modules/react-native-vector-icons/RNVectorIcons.xcodeproj"; sourceTree = ""; }; + CEBCF51920BAFF0100E38EBD /* paste.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = paste.png; sourceTree = ""; }; D78A30C33D594BCBA8385206 /* RNPopoverMenu.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNPopoverMenu.xcodeproj; path = "../node_modules/react-native-popover-menu/ios/RNPopoverMenu.xcodeproj"; sourceTree = ""; }; D7B7344D79414585A99B09B5 /* libRNVectorIcons.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNVectorIcons.a; sourceTree = ""; }; /* End PBXFileReference section */ @@ -644,6 +646,7 @@ 8D19D63E49FE46A898CAE16D /* Resources */ = { isa = PBXGroup; children = ( + CEBCF51920BAFF0100E38EBD /* paste.png */, 6C0D00F770BD4D33AC2620E5 /* Entypo.ttf */, 534DB364FAC74C0A8E624F3B /* EvilIcons.ttf */, 49269C25FA4F4C64B8444C03 /* Feather.ttf */, @@ -1160,6 +1163,7 @@ buildActionMask = 2147483647; files = ( 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, + CEBCF54120BAFF0100E38EBD /* paste.png in Resources */, 13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */, 2C94D697F4AF44E58006F93D /* Entypo.ttf in Resources */, F705588D6AB146B0AD6A66E2 /* EvilIcons.ttf in Resources */, diff --git a/Example/ios/Example/paste.png b/Example/ios/Example/paste.png new file mode 100644 index 0000000000000000000000000000000000000000..09a89c758a766daa007e87c04635ec7435f50bcb GIT binary patch literal 1463 zcmV;o1xWgdP);x^Lu-xxqNckpN?Q?y6a-5UC4o?&AlNkBWL*>l3U-mSWYL8XQJam{DiTO& zh8O1Q&Y5jpEtFy{%H5ec@6*LH%k1viIp@sGu3q$9oj>pQzQ5;ueCM3+`+)y-eI?f$ zAV{`t-!CHVB<2WxhG&CG`9H%~Pn}&vl=0c&625?Kr zCdaec?CIi3%?#MKy@ljnW6U~LJrc%5eSQ610Mf>oMPciZ+*x{F69cwwZxNB*#d8sf z2boAD5)10;>b?#!V8^AZpJlVz!==}%Hn4Q*(g#Z6ixQEz=Xt%2jg5Z0Uva?4z!Z4$8i=hB{8NDeAfgG+^LnG0m|(!?$^Qkg6ToHz6L!MkTPKQ% zu=9xt1}4KRbXdqXi0Ojh!7AV*n+P+Xm}0;~Y#xC*008P$&}#DpPXl=E*njfm?AFCT+LPex2o6UX_$p8TKZ{0ZR(e$ZcZ1zLF3L_f;%z#gYA&|R8FGF|$kh04r1cv5w zwE1MJ^WU)GMU|gmq*7`;S_UXgt;&mPtPUYxpA4_ipK0MK2=)fS19}NG>necT3{LKA{0|at`^pQS%XimLPaCw)SkQ?OY}BK!gd+vQ*Ei z0wrw-5tua)K1#?36M~47b->1);9~(g%4e(|9*8)lY)+?$8P zGw?vQi@PEu&3C0gc}g4uSOPk8@IZ~WS;yW^-a&}GPvQ5X=GfR9YG&bq8txM}zw^b- zdCoU;M+!dyCO#YRKn=H;`nEs$cU_K4K-@lC@H3+3WV*E_d8p}nbNsK_(tipC7F0_C Rv@rkx002ovPDHLkV1hvVqZa@G literal 0 HcmV?d00001 diff --git a/README.md b/README.md index b2771ff..8b21b07 100644 --- a/README.md +++ b/README.md @@ -160,6 +160,32 @@ RNPopoverMenu.Show(this.ref, { | `rowHeight` | `number` | | Height of the menu row | + +## Icons + +- **RN Vector Icons:** It supports [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library. Please find below snippet for the usage: + +```javascript + let facebook = + + +``` + +> **Note:** +> - We have added `family` prop for `Icon` class, please make sure that you pass the props + + +- **Custom Icons** + +> **Note:** +> Since we are using native libraries, we have not found a solution in order to render RN Images in production, therefore please copy all your image assets in platform specific folders: + +- Android: Please copy your image assets in app resource drawable folder +- iOS: Please copy your image assets in app resources folder + +> Please refer example application for the image usage. + + ## Credits - Android: [zawadz88/MaterialPopupMenu](https://github.com/zawadz88/MaterialPopupMenu) diff --git a/android/src/main/java/ui/popovermenu/RNPopoverMenuModule.java b/android/src/main/java/ui/popovermenu/RNPopoverMenuModule.java index f7a49ca..e8d15bd 100644 --- a/android/src/main/java/ui/popovermenu/RNPopoverMenuModule.java +++ b/android/src/main/java/ui/popovermenu/RNPopoverMenuModule.java @@ -4,6 +4,7 @@ import android.annotation.TargetApi; import android.app.Activity; import android.content.res.ColorStateList; +import android.content.res.Resources; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; @@ -175,6 +176,7 @@ public void run() { }); } + @TargetApi(21) private Drawable generateVectorIcon(ReadableMap icon) { StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build(); StrictMode.setThreadPolicy(policy); @@ -185,6 +187,14 @@ private Drawable generateVectorIcon(ReadableMap icon) { String color = icon.getString("color"); int size = icon.getInt("size"); + if (name != null && name.length() > 0 && name.contains(".")) { + Resources resources = getReactApplicationContext().getResources(); + name = name.substring(0, name.lastIndexOf(".")); + + final int resourceId = resources.getIdentifier(name, "drawable", getReactApplicationContext().getPackageName()); + return getReactApplicationContext().getDrawable(resourceId); + } + float scale = getReactApplicationContext().getResources().getDisplayMetrics().density; String scaleSuffix = "@" + (scale == (int) scale ? Integer.toString((int) scale) : Float.toString(scale)) + "x"; int fontSize = Math.round(size * scale); diff --git a/ios/RNPopoverMenu.m b/ios/RNPopoverMenu.m index 45b5cbb..528f2af 100644 --- a/ios/RNPopoverMenu.m +++ b/ios/RNPopoverMenu.m @@ -74,6 +74,10 @@ - (UIImage *) generateVectorIcon: (NSDictionary *) icon { NSNumber *size = [icon objectForKey: @"size"]; NSString *color = [icon objectForKey: @"color"]; + if (name != nil && [name length] > 0 && [name containsString: @"."]) { + return [UIImage imageNamed: name]; + } + UIColor *uiColor = [RNPopoverMenu colorFromHexCode: color]; CGFloat screenScale = RCTScreenScale(); diff --git a/js/Menu.js b/js/Menu.js index 2df8d00..f08b537 100644 --- a/js/Menu.js +++ b/js/Menu.js @@ -12,7 +12,7 @@ Menu.propTypes = { ...ViewPropTypes, label: PropTypes.string, - icon: PropTypes.number + icon: PropTypes.oneOfType([PropTypes.number, PropTypes.string]) }; Menu.defaultProps = { diff --git a/js/RNPopoverMenu.js b/js/RNPopoverMenu.js index ed57b69..69aef3c 100644 --- a/js/RNPopoverMenu.js +++ b/js/RNPopoverMenu.js @@ -49,23 +49,21 @@ class Popover extends PureComponent { subMenu.icon = subMenu.icon.props; let glyph = RNVectorHelper.Resolve(subMenu.icon.family, subMenu.icon.name); - subMenu.icon = Object.assign( - {}, - subMenu.icon, - { - glyph: glyph - } - ); + subMenu.icon = Object.assign({}, subMenu.icon, { + glyph: glyph + }); + } else if (subMenu.icon !== undefined) { + subMenu.icon = { name: subMenu.icon, family: "", glyph: "", color: "", size: 0 }; } }); if (menu.icon && menu.icon.props) { - menu.icon = menu.icon.props + menu.icon = menu.icon.props; let glyph = RNVectorHelper.Resolve(menu.icon.family, menu.icon.name); - menu.icon = Object.assign({}, menu.icon, { - glyph: glyph - }); + menu.icon = Object.assign({}, menu.icon, { glyph: glyph }); + } else if (menu.icon !== undefined) { + menu.icon = { name: menu.icon, family: "", glyph: "", color: "", size: 0 }; } }); diff --git a/package.json b/package.json index 33692b1..e818ed7 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "react-native-popover-menu", - "version": "0.0.11", + "version": "0.0.12", "description": "React Native: Native Popover Menu", "main": "js/RNPopoverMenu.js", "scripts": {