Fabric GIF Emoji

A React Native library for displaying and inputting GIF/PNG emojis using the new Fabric architecture.

Features

• 🎯 Fabric Native Components: Built for React Native's new architecture
• 🖼️ GIF & PNG Support: Display animated GIFs and static PNG emojis
• ⌨️ Input Component: Text input with emoji insertion capabilities
• 📱 Cross Platform: iOS and Android support
• 🎨 Customizable: Flexible styling and configuration options
• 🚀 Performance: Optimized for smooth emoji rendering
• 📦 Zero Dependencies: No external React Native dependencies

Installation

npm install fabric-gif-emoji
# or
yarn add fabric-gif-emoji

iOS Setup

1. Run cd ios && pod install
2. Ensure your app has the new architecture enabled (RCT_NEW_ARCH_ENABLED=1)

Android Setup

1. Ensure your app has the new architecture enabled in android/gradle.properties:

   newArchEnabled=true

Usage

EmojiInput Component

import React, { useRef } from "react";
import { EmojiInput, insertEmoji, getEmojiAssets } from "fabric-gif-emoji";
import type { EmojiInputRef } from "fabric-gif-emoji";

function MyComponent() {
  const emojiInputRef = useRef<EmojiInputRef>(null);

  const handleEmojiSelected = (event: any) => {
    const { emoji, imageUrl } = event.nativeEvent;
    console.log("Emoji selected:", emoji);
  };

  const handleTextChange = (event: any) => {
    const { text } = event.nativeEvent;
    console.log("Text changed:", text);
  };

  const insertRandomEmoji = () => {
    const emojis = getEmojiAssets();
    if (emojis.length > 0) {
      const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
      insertEmoji(emojiInputRef, randomEmoji.name, randomEmoji.url);
    }
  };

  return (
    <EmojiInput
      ref={emojiInputRef}
      placeholder="Type your message..."
      style={{ height: 40, borderWidth: 1, borderColor: "#ccc" }}
      onTextChange={handleTextChange}
      onEmojiSelected={handleEmojiSelected}
      maxLength={500}
      multiline={false}
      editable={true}
      autoFocus={false}
    />
  );
}

EmojiText Component

import React from "react";
import { EmojiText } from "fabric-gif-emoji";

function MyTextComponent() {
  const handleEmojiPress = (event: any) => {
    const { emoji, imageUrl } = event.nativeEvent;
    console.log("Emoji pressed:", emoji);
  };

  return (
    <EmojiText
      text="Hello 👋 World 🌍!"
      style={{ fontSize: 16 }}
      textColor="#333333"
      textAlign="center"
      lineHeight={24}
      onEmojiPress={handleEmojiPress}
    />
  );
}

API Reference

EmojiInput Props

| Prop | Type | Default | Description | | ----------------- | ---------- | ----------- | ------------------------ | | placeholder | string | "" | Placeholder text | | value | string | "" | Input value | | maxLength | number | undefined | Maximum character length | | multiline | boolean | false | Enable multiline input | | editable | boolean | true | Enable text editing | | autoFocus | boolean | false | Auto focus on mount | | onTextChange | function | undefined | Text change callback | | onEmojiSelected | function | undefined | Emoji selection callback |

EmojiText Props

| Prop | Type | Default | Description | | ----------------- | ------------------------------- | --------------- | -------------------- | | text | string | "" | Text content | | fontSize | number | 16 | Font size | | textColor | string | "#000000" | Text color | | backgroundColor | string | "transparent" | Background color | | textAlign | 'left' \| 'center' \| 'right' | 'left' | Text alignment | | lineHeight | number | undefined | Line height | | onEmojiPress | function | undefined | Emoji press callback |

Utility Functions

insertEmoji(ref, emoji, imageUrl)

Inserts an emoji at the current cursor position.

clearText(ref)

Clears all text in the input.

getText(ref)

Gets the current text value (returns Promise).

showEmojiPicker(ref)

Shows the emoji picker.

hideEmojiPicker(ref)

Hides the emoji picker.

getEmojiAssets()

Returns available emoji assets.

Configuration

Emoji Assets

The library includes a default set of emoji assets. You can customize these by modifying the emojiAssets.json file or providing your own assets.

Asset Structure

{
  "emojis": [
    {
      "name": "happy",
      "url": "path/to/emoji.gif",
      "type": "gif"
    },
    {
      "name": "smile",
      "url": "path/to/emoji.png",
      "type": "png"
    }
  ]
}

Requirements

• React Native >= 0.73.0
• New Architecture enabled
• iOS >= 11.0
• Android minSdkVersion >= 21

Troubleshooting

Build Issues

1. iOS: Make sure to run pod install with RCT_NEW_ARCH_ENABLED=1
2. Android: Ensure newArchEnabled=true in gradle.properties
3. Clean: Try cleaning your build folders and node_modules

Runtime Issues

1. Module not found: Ensure the library is properly linked with autolinking
2. Native module null: Check that the new architecture is properly enabled
3. Emoji not displaying: Verify asset paths and permissions

Contributing

See CONTRIBUTING.md for details.

License

MIT © izetent