diff --git a/Example/android/app/build.gradle b/Example/android/app/build.gradle index b5ee9b1..c0c9652 100644 --- a/Example/android/app/build.gradle +++ b/Example/android/app/build.gradle @@ -65,7 +65,7 @@ import com.android.build.OutputFile * ] */ -apply from: "../../node_modules/react-native/react.gradle" +apply from: "../../../node_modules/react-native/react.gradle" /** * Set this to true to create two separate APKs instead of one: diff --git a/Example/android/build.gradle b/Example/android/build.gradle index fcba4c5..ac092ad 100644 --- a/Example/android/build.gradle +++ b/Example/android/build.gradle @@ -18,7 +18,7 @@ allprojects { jcenter() maven { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm - url "$rootDir/../node_modules/react-native/android" + url "$rootDir/../../node_modules/react-native/android" } } } diff --git a/Example/ios/Example.xcodeproj/project.pbxproj b/Example/ios/Example.xcodeproj/project.pbxproj index c3db164..8b906fd 100644 --- a/Example/ios/Example.xcodeproj/project.pbxproj +++ b/Example/ios/Example.xcodeproj/project.pbxproj @@ -106,17 +106,17 @@ /* End PBXContainerItemProxy section */ /* Begin PBXFileReference section */ - 008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; name = main.jsbundle; path = main.jsbundle; sourceTree = ""; }; - 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = ../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj; sourceTree = ""; }; - 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = ../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj; sourceTree = ""; }; - 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = ../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj; sourceTree = ""; }; - 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = ../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj; sourceTree = ""; }; - 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = ../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj; sourceTree = ""; }; + 008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = ""; }; + 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = "../../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj"; sourceTree = ""; }; + 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = "../../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj"; sourceTree = ""; }; + 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = "../../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj"; sourceTree = ""; }; + 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = "../../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj"; sourceTree = ""; }; + 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = "../../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj"; sourceTree = ""; }; 00E356EE1AD99517003FC87E /* ExampleTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = ExampleTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; }; 00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 00E356F21AD99517003FC87E /* ExampleTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = ExampleTests.m; sourceTree = ""; }; - 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = ../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj; sourceTree = ""; }; - 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = ../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj; sourceTree = ""; }; + 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = "../../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj"; sourceTree = ""; }; + 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = "../../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj"; sourceTree = ""; }; 13B07F961A680F5B00A75B9A /* Example.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Example.app; sourceTree = BUILT_PRODUCTS_DIR; }; 13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = Example/AppDelegate.h; sourceTree = ""; }; 13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = Example/AppDelegate.m; sourceTree = ""; }; @@ -124,9 +124,9 @@ 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = Example/Images.xcassets; sourceTree = ""; }; 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = Example/Info.plist; sourceTree = ""; }; 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = Example/main.m; sourceTree = ""; }; - 146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = ../node_modules/react-native/React/React.xcodeproj; sourceTree = ""; }; - 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = ../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj; sourceTree = ""; }; - 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../node_modules/react-native/Libraries/Text/RCTText.xcodeproj; sourceTree = ""; }; + 146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../../node_modules/react-native/React/React.xcodeproj"; sourceTree = ""; }; + 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = ""; }; + 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = ""; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -527,8 +527,7 @@ ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; - shellScript = "export NODE_BINARY=node\n../node_modules/react-native/packager/react-native-xcode.sh"; - showEnvVarsInLog = 1; + shellScript = "export NODE_BINARY=node\n../../node_modules/react-native/packager/react-native-xcode.sh"; }; /* End PBXShellScriptBuildPhase section */ @@ -610,15 +609,15 @@ HEADER_SEARCH_PATHS = ( "$(inherited)", /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, - "$(SRCROOT)/../node_modules/react-native/React/**", + "$(SRCROOT)/../../node_modules/react-native/React/**", ); - INFOPLIST_FILE = "Example/Info.plist"; + INFOPLIST_FILE = Example/Info.plist; LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; - OTHER_LDFLAGS = ( + OTHER_LDFLAGS = ( "$(inherited)", - "-ObjC", - "-lc++", - ); + "-ObjC", + "-lc++", + ); PRODUCT_NAME = Example; }; name = Debug; @@ -630,15 +629,15 @@ HEADER_SEARCH_PATHS = ( "$(inherited)", /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, - "$(SRCROOT)/../node_modules/react-native/React/**", + "$(SRCROOT)/../../node_modules/react-native/React/**", ); - INFOPLIST_FILE = "Example/Info.plist"; + INFOPLIST_FILE = Example/Info.plist; LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; - OTHER_LDFLAGS = ( + OTHER_LDFLAGS = ( "$(inherited)", - "-ObjC", - "-lc++", - ); + "-ObjC", + "-lc++", + ); PRODUCT_NAME = Example; }; name = Release; @@ -680,7 +679,7 @@ HEADER_SEARCH_PATHS = ( "$(inherited)", /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, - "$(SRCROOT)/../node_modules/react-native/React/**", + "$(SRCROOT)/../../node_modules/react-native/React/**", ); IPHONEOS_DEPLOYMENT_TARGET = 7.0; MTL_ENABLE_DEBUG_INFO = YES; @@ -720,7 +719,7 @@ HEADER_SEARCH_PATHS = ( "$(inherited)", /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, - "$(SRCROOT)/../node_modules/react-native/React/**", + "$(SRCROOT)/../../node_modules/react-native/React/**", ); IPHONEOS_DEPLOYMENT_TARGET = 7.0; MTL_ENABLE_DEBUG_INFO = NO; diff --git a/index.js b/index.js index e71c92a..7197a81 100644 --- a/index.js +++ b/index.js @@ -38,10 +38,10 @@ const charFromUtf16 = utf16 => String.fromCodePoint(...utf16.split('-').map(u => const charFromEmojiObj = obj => charFromUtf16(obj.unified) const blacklistedEmojis = ['white_frowning_face', 'keycap_star', 'eject'] - const isAndroid = Platform.OS == 'android' const letterSpacing = 10 const defaultEmojiSize = 30 +const padding = 5 const filteredEmojis = emoji.filter(e => isAndroid ? !!e.google : !includes(blacklistedEmojis, e.short_name)) // sort emojis by 'sort_order' then group them into categories const groupedAndSorted = groupBy(orderBy(filteredEmojis, 'sort_order'), 'category') @@ -51,24 +51,6 @@ const emojisByCategory = mapValues(groupedAndSorted, group => group.map(charFrom const CATEGORIES = ['People', 'Nature', 'Foods', 'Activity', 'Places', 'Objects', 'Symbols', 'Flags'] - // instead listing emojis left-to-right we want to list them top-to-bottom. - // we split them in to rows by sequentially taking every Xth value, where X is the number of rows - function transposeEmojisVertically(emojis, rowCount = 7) { - let array = [] - for (var i = 0; i < rowCount; i++) { - let row = [] - for (var n = 0; n < emojis.length/rowCount; n++) { - let index = i + n * rowCount - if (index < emojis.length) { - row.push(emojis[index]) - } - } - array.push(row) - } - return array - } - - class EmojiPicker extends Component { state = { categories: CATEGORIES.slice(0, 1), @@ -96,7 +78,7 @@ class EmojiPicker extends Component { render() { return ( - + {this.state.categories.map(this.renderCategory.bind(this))} @@ -121,13 +103,13 @@ class EmojiCategory extends Component { height: size+4, width: size+4, textAlign: 'center', - padding: 5 + padding: padding, } return ( - + {this.props.category} - + {emojis.map(e => { - let size = props.emojiSize || defaultEmojiSize - - function handlePress(event) { - let i = Math.floor(event.nativeEvent.locationX/(size + 5 + letterSpacing/2)) - if (i < props.array.length) { - let emoji = props.array[i] - props.onEmojiSelected(emoji) - } - } - - let style = { - size: size, - letterSpacing: letterSpacing, - color: 'black', - } - - return ( - - - - {props.array} - - - - ) -} - -const RowAndroid = props => { - let size = props.emojiSize || defaultEmojiSize - - let style = { - fontSize: size-4, - color: 'black', - height: size+4, - width: size+4, - textAlign: 'center', - } - - return ( - - {props.array.map(emoji => - props.onEmojiSelected(emoji)}> - {emoji} - - )} - - ) -} const ClearButon = props => { return ( @@ -215,11 +145,15 @@ const EmojiOverlay = props => ( ) let styles = StyleSheet.create({ + container: { + padding: padding, + }, clearButton: { + flex: 1, padding: 15, textAlign: 'center', color: 'black', - justifyContent: 'center', + textAlignVertical: 'center', }, absolute: { position: 'absolute', @@ -242,20 +176,20 @@ let styles = StyleSheet.create({ backgroundColor: 'grey', opacity: 0.5, }, - innerContainer: { + categoryOuter: { + flex: -1, + }, + categoryInner: { flex: 1, flexWrap: 'wrap', flexDirection: 'column', }, headerText: { - padding: 5, + padding: padding, color: 'black', justifyContent: 'center', + textAlignVertical: 'center', }, - rowStyle: { - flexDirection: 'row', - paddingHorizontal: letterSpacing/2, - } }) EmojiPicker.propTypes = { diff --git a/package.json b/package.json index de02b73..d4c6e3c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-emoji-picker", - "version": "0.2.1", + "version": "0.2.2", "description": "Simple emoji picker for react-native", "main": "index.js", "repository": {