Hi, there are some empty and broken cells in selector on android 7 version

Hello,
Can you kindly confirm that this is library has the standard MIT License, by adding a document?
Thank you

This can be added once the PlatformColor PR gets merged into core facebook/react-native#27908

In ios its working fine but in android this is too slow to open and after we click on icon, it too slow to close.
sometime its just hang my device. is there any scope for android?

Q. 2
how can i open as a popup., right now i am using react-native modal to open in dialog, i hope you can add this feature as props.

I am using Moto g4 plus (nougat).

On certain devices, specially the older ones, few emojis seem to missing. This may be because of the font handling of how Andorid does. Can you please help in how to handle this situation by restricting the emojis to basic types so that all emojis appear excluding the ones which may be missing?

Regards,
Iftikhar

Emoji sizes are rapidy and contionous increasing size till the app crushed

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-emoji-selector/index.js b/node_modules/react-native-emoji-selector/index.js
index 0737acd..282de94 100644
--- a/node_modules/react-native-emoji-selector/index.js
+++ b/node_modules/react-native-emoji-selector/index.js
@@ -81,8 +81,8 @@ const TabBar = ({ theme, activeCategory, onPress, width }) => {
           style={{
             flex: 1,
             height: tabSize,
-            borderColor: category === activeCategory ? theme : "#EEEEEE",
-            borderBottomWidth: 2,
+            borderColor:  '#EEEEEE' ,
+            borderBottomWidth: category === activeCategory ? 1:0,
             alignItems: "center",
             justifyContent: "center"
           }}
@@ -91,7 +91,7 @@ const TabBar = ({ theme, activeCategory, onPress, width }) => {
             style={{
               textAlign: "center",
               paddingBottom: 8,
-              fontSize: tabSize - 24
+              fontSize: tabSize - 20
             }}
           >
             {category.symbol}
@@ -180,11 +180,16 @@ export default class EmojiSelector extends Component {
   };
 
   loadHistoryAsync = async () => {
-    let result = await AsyncStorage.getItem(storage_key);
-    if (result) {
-      let history = JSON.parse(result);
-      this.setState({ history });
+    try {
+      let result = await AsyncStorage.getItem(storage_key);
+      if (result) {
+        let history = JSON.parse(result);
+        this.setState({ history });
+      }
+    } catch (error) {
+      
     }
+   
   };
 
   //
@@ -295,9 +300,9 @@ export default class EmojiSelector extends Component {
           clearButtonMode="always"
           returnKeyType="done"
           autoCorrect={false}
-          underlineColorAndroid={theme}
           value={searchQuery}
           onChangeText={this.handleSearch}
+          placeholderTextColor={'#D6D6D6'}
         />
       </View>
     );
@@ -381,9 +386,16 @@ const styles = StyleSheet.create({
   searchbar_container: {
     width: "100%",
     zIndex: 1,
-    backgroundColor: "rgba(255,255,255,0.75)"
   },
   search: {
+    backgroundColor: '#424242',
+    padding:0,
+    borderRadius:16,
+    fontSize:12,
+    borderWidth:0,
+    paddingVertical:6,
+    paddingHorizontal:8,
+    color:'#D6D6D6',
     ...Platform.select({
       ios: {
         height: 36,
@@ -393,6 +405,7 @@ const styles = StyleSheet.create({
       }
     }),
     margin: 8
+
   },
   container: {
     flex: 1,

This issue body was partially generated by patch-package.

Why do the emojis look faded in Android its looking perfect in iOs?

i tried changing activeOpacity={1} for EmojiCell But no change ?

any help would be appreciated!

Thanks for this great component.

I had a serious layout issue when using this where the content (emojis) would not scroll vertically. I had to copy everything locally and add alignItems: 'flex-start' to the container style. This seems to jive with the note added in the flexWrap docs.

Allow styling options and props such as,

• searchBar styling
• container styling
• text styling

Hey,
I am facing an issue about emoji resizing. Its showing me a very large emoji Icons

Hello, is there a way to display more emojis?

When opening the component, the ActivityIndicator doesn't go away even though the emojis get loaded. I can the tell that the emojis get loaded because I can click a category while the ActivityIndicator is being displayed, and see the categories emojis.

Default is all categories, set default to one to improve performance.

import EmojiSelector, { Categories } from 'react-native-emoji-selector';

<EmojiSelector
     category={Categories.people}
 />

Hi, this is awesome library but the emoji layout is quite big, how can change a height and width of emoji?

Hi guys, thank you for the great library.

There is a warning of AsyncStorage since it has been moved to the AsyncStorage

Is it possible to change the size of all the emojis in the categories.. because i think emojis size in the categories bar and emoji size in the categories content id different ...one is small and the other is big

Hey community, thank you for all the support you have given for this library! This is a call for support. RN development isn’t something I do often and it can be hard for me to test and validate PRs in and publish releases, especially when I no longer keep up with RN releases. That being said, I’m looking for a maintainer to help keep this library up to date for the RN community.

If you are interested in becoming a maintainer for this project, please send an email to arronjhunt AT gmail DOT com

Looking for testers to help test this library on physical Android devices and submit PRs against them.

Description

When passing Categories, it would be good to customize which text is displayed depending on the current user language preference.

It would be good to pass a prop like i18n={{ search: 'Recherche', categories: { search: 'Résultats de recherche', recent: 'Récents' } }}

Unable to increase the size of the category images. Its very very small in real device.

Is there any way to adjust the size?

Repro'd when setting showHistory to false or leaving the prop out (which should default to false).

Seems like it's missing a condition to not show that tab here:

Possible Unhandled Promise Rejection (id: 1):
Invariant Violation: AsyncStorage has been removed from react-native core. It can now be installed and imported from '@react-native-async-storage/async-storage' instead of 'react-native'. See https://github.com/react-native-async-storage/async-storage
Invariant Violation: AsyncStorage has been removed from react-native core. It can now be installed and imported from '@react-native-async-storage/async-storage' instead of 'react-native'. See https://github.com/react-native-async-storage/async-storage

The search text is black on all devices except iPhoneX.
I think theme should be applied to the search bar text as well. (see below)

const Searchbar = (

<TextInput
style={styles.search}
placeholder={placeholder}
clearButtonMode="always"
returnKeyType="done"
autoCorrect={false}
underlineColorAndroid={theme}
value={searchQuery}
onChangeText={this.handleSearch}
color={theme} // Add this
/>

);

Current version installed in my project: "react-native-emoji-selector": "^0.2.0"

I have tried to apply styles but nothing changed, wrapped around a View nothing changed.

Code:

const [input, setInput] = useState(null);
const [emojiPicker, setEmojiPicker] = useState(false);

<KeyboardAvoidingView
  style={emojiPicker ? {height: '60%'} : {flex: 1}}
  behavior={Platform.select({android: undefined, ios: 'padding'})}
  keyboardVerticalOffset={90}
>
  {emojiPicker && (
    <EmojiSelector
      onEmojiSelected={emoji =>
        setInput(currentInput => currentInput + emoji)
      }
      columns={8}
      showSearchBar
      showTabs
      showHistory
      showSectionTitles
    />
  )}
</KeyboardAvoidingView>

Hi, could you add the sample code from your demo so we can see how to properly display the emoji in a View? It would help in addition to just having code that logs an emoji in the console. Thank you!

Is it possible to offer the text from the library in several languages?
For example in German?

Hey everyone!

I just wanted to give a shoutout to everyone who has used this library and given feedback. It has been awesome engaging with the OSS community and building a tool that many people are using. This library has been in v0.X since it was originally published, mostly due to my fear of committing to a big 1.0 release. Now that my full-time work has moved to a comfortable cadence and covid lockdowns lightening back up, I have found a new sense of motivation to get a 1.0 release shipped.

What's changing?

A goal of this library has always been to ship something super lightweight, performant, and with few dependencies. Those goals will remain intact for v1.0. It is also to be opinionated enough that anyone should be able to drop in the <EmojiSelector /> component and not have to worry about state management or styling. This will mostly remain the same; however, there have been so many requests for more granular control over design and themeing that I need to make a change. v1.0 will allow you to override 100% of its base-level components. I think this will give some much-needed customization to those who are using this library in their own app who want to maintain control over branding and experience.

You can follow the progress in the new feature/v1 branch.

✨ New APIs

Dark mode

Dark mode will work out-of-the-box with no changes needed from v0.2.0.

Current progress on dynamic dark/light mode

Fully customizable

Every sub-component will support style overrides via the overrideStyles prop.

Support for skins and variants

Limit tab categories.

The tab bar can be customized to show a limited number of categories.

☑️ TODO

• Native support for dark mode. [#37]
• Custom themeing and style overrides. [#48]
• Improved control over emoji categories. [#35]
• Fix AsyncStorage issues [#9]
• Skin/Variant options
• Better rendering performance. [#4]
• Upgrade to use React hooks under the hood.
• Improve branding and documentation.

When will it be available?

There are no guarantees. I will need some help from the community to test on multiple versions and devices (especially Android). I will hopefully have a -beta.0 release out next week to start gathering feedback!

It would be very helpful if categories could be disabled via component props

How can I populate the recently used tab? Additionally I'd like to default to that tab on render...it doesn't appear as a Category.

Awesome library - nice work!

Just started using this library and pretty happy with it overall. On both platforms though, when using default categories, they are all on the same bar which makes each little icon tiny. It would be nice if they would be a decent fixed size, and the selector had some sort of horizontal scrolling option. Also for Android, the TextInput is really too small and the bottom border is inside of the text.
. The TextInput stuff should be really quick to fix (maybe give a prop for textSize in the TextInput). For the time being I will probably make decisions about which Categories users can live without in order to improve the size of the other category icons.

As for improving the flexibility of styling in this library, it would be straightforward to add in props for adding styles to the component container (so we can change background color, say for dark mode), container of the other bigger components (i.e. TextInput, emoji list, and category list).

I'm in a dev sprint right now and then need to catch up on school work; otherwise, I would PR this now.
Thanks.