mirror of
https://github.com/status-im/react-native-emoji-picker.git
synced 2026-08-27 10:21:09 +00:00
cleanup. fix building example. bump
This commit is contained in:
@@ -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:
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 = "<group>"; };
|
||||
00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = ../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj; sourceTree = "<group>"; };
|
||||
00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = ../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj; sourceTree = "<group>"; };
|
||||
00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = ../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj; sourceTree = "<group>"; };
|
||||
00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = ../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj; sourceTree = "<group>"; };
|
||||
00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = ../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj; sourceTree = "<group>"; };
|
||||
008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = "<group>"; };
|
||||
00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = "../../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj"; sourceTree = "<group>"; };
|
||||
00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = "../../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj"; sourceTree = "<group>"; };
|
||||
00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = "../../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj"; sourceTree = "<group>"; };
|
||||
00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = "../../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj"; sourceTree = "<group>"; };
|
||||
00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = "../../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj"; sourceTree = "<group>"; };
|
||||
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 = "<group>"; };
|
||||
00E356F21AD99517003FC87E /* ExampleTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = ExampleTests.m; sourceTree = "<group>"; };
|
||||
139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = ../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj; sourceTree = "<group>"; };
|
||||
139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = ../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj; sourceTree = "<group>"; };
|
||||
139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = "../../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj"; sourceTree = "<group>"; };
|
||||
139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = "../../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj"; sourceTree = "<group>"; };
|
||||
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 = "<group>"; };
|
||||
13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = Example/AppDelegate.m; sourceTree = "<group>"; };
|
||||
@@ -124,9 +124,9 @@
|
||||
13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = Example/Images.xcassets; sourceTree = "<group>"; };
|
||||
13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = Example/Info.plist; sourceTree = "<group>"; };
|
||||
13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = Example/main.m; sourceTree = "<group>"; };
|
||||
146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = ../node_modules/react-native/React/React.xcodeproj; sourceTree = "<group>"; };
|
||||
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = ../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj; sourceTree = "<group>"; };
|
||||
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../node_modules/react-native/Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
|
||||
146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../../node_modules/react-native/React/React.xcodeproj"; sourceTree = "<group>"; };
|
||||
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
|
||||
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
|
||||
/* 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;
|
||||
|
||||
@@ -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 (
|
||||
<View style={this.props.style}>
|
||||
<View style={[styles.container, this.props.style]}>
|
||||
<ScrollView horizontal={true}>
|
||||
{this.state.categories.map(this.renderCategory.bind(this))}
|
||||
</ScrollView>
|
||||
@@ -121,13 +103,13 @@ class EmojiCategory extends Component {
|
||||
height: size+4,
|
||||
width: size+4,
|
||||
textAlign: 'center',
|
||||
padding: 5
|
||||
padding: padding,
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={{flex: 0}}>
|
||||
<View style={style.categoryOuter}>
|
||||
<Text style={[styles.headerText, this.props.headerStyle]}>{this.props.category}</Text>
|
||||
<View style={styles.innerContainer}>
|
||||
<View style={styles.categoryInner}>
|
||||
{emojis.map(e =>
|
||||
<Text style={style}
|
||||
key={e}
|
||||
@@ -141,58 +123,6 @@ class EmojiCategory extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
const RowIos = props => {
|
||||
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 (
|
||||
<TouchableWithoutFeedback onPress={handlePress}>
|
||||
<View>
|
||||
<Text style={style} >
|
||||
{props.array}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
)
|
||||
}
|
||||
|
||||
const RowAndroid = props => {
|
||||
let size = props.emojiSize || defaultEmojiSize
|
||||
|
||||
let style = {
|
||||
fontSize: size-4,
|
||||
color: 'black',
|
||||
height: size+4,
|
||||
width: size+4,
|
||||
textAlign: 'center',
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.rowStyle}>
|
||||
{props.array.map(emoji =>
|
||||
<Text
|
||||
key={emoji}
|
||||
style={style}
|
||||
onPress={() => props.onEmojiSelected(emoji)}>
|
||||
{emoji}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
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 = {
|
||||
|
||||
+1
-1
@@ -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": {
|
||||
|
||||
Reference in New Issue
Block a user