fix: android

src/EmojiKeyboard.tsx

@@ -79,7 +79,7 @@ export const EmojiKeyboard = () => {
         scrollEnabled={false}
         // onScroll={onScroll}
         initialNumToRender={1}
-        windowSize={7}
+        windowSize={1}
         maxToRenderPerBatch={1}
       />
       <Categories flatListRef={flatListRef} scrollNav={scrollNav} />

src/components/EmojiCategory.tsx

@@ -25,7 +25,7 @@ export const EmojiCategory = ({ item }: { item: CategoryTypes }) => {
   const { width } = useWindowDimensions();
   const ctx = React.useContext(KeyboardContext);
   const numberOfColumns = React.useRef<number>(
-    Math.floor(width / (ctx.emojiSize + 20))
+    Math.floor(width / (ctx.emojiSize * 2))
   );
   const [empty, setEmpty] = React.useState<EmojiType[]>([]);
 
@@ -48,22 +48,6 @@ export const EmojiCategory = ({ item }: { item: CategoryTypes }) => {
   });
 
   const renderItem = React.useCallback(
-    // (props) => {
-    //   if (props.item.slug === 'blank_emoji')
-    //     return (
-    //       <View
-    //         {...props}
-    //         style={{ backgroundColor: 'blue', width: 10, height: 10 }}
-    //       />
-    //     );
-    //   else
-    //     return (
-    //       <View
-    //         {...props}
-    //         style={{ backgroundColor: 'red', width: 10, height: 10 }}
-    //       />
-    //     );
-    // },
     (props) => (
       <SingleEmoji
         {...props}

src/components/SingleEmoji.tsx

@@ -2,25 +2,49 @@ import * as React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import type { EmojiType } from '../types';
 
-export const SingleEmoji = ({
-  item,
-  onPress,
-  emojiSize,
-}: {
+export class SingleEmoji extends React.Component<{
   item: EmojiType;
   onPress: (emojiObject: EmojiType) => void;
   emojiSize: number;
-}) => {
-  if (item.slug !== 'blank_emoji')
+}> {
+  shouldComponentUpdate() {
+    return false;
+  }
+  render() {
     return (
-      <TouchableOpacity onPress={() => onPress(item)} style={styles.container}>
-        <View>
-          <Text style={{ fontSize: emojiSize }}>{item.emoji}</Text>
+      <TouchableOpacity
+        onPress={() => this.props.onPress(this.props.item)}
+        style={styles.container}
+      >
+        <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+          <Text style={{ fontSize: this.props.emojiSize }}>
+            {this.props.item.emoji}
+          </Text>
         </View>
       </TouchableOpacity>
     );
-  else return <View style={styles.container} />;
-};
+  }
+}
+
+// export const SingleEmoji = ({
+//   item,
+//   onPress,
+//   emojiSize,
+// }: {
+//   item: EmojiType;
+//   onPress: (emojiObject: EmojiType) => void;
+//   emojiSize: number;
+// }) => {
+//   if (item.slug !== 'blank_emoji')
+//     return (
+//       <TouchableOpacity onPress={() => onPress(item)} style={styles.container}>
+//         <View>
+//           <Text style={{ fontSize: emojiSize }}>{item.emoji}</Text>
+//         </View>
+//       </TouchableOpacity>
+//     );
+//   else return <View style={styles.container} />;
+// };
 
 const styles = StyleSheet.create({
   container: { flex: 1, padding: 8 },