@laxkar77/react-native-gboard-gif-input

Drop-in TextInput replacement that enables Gboard's GIF tab on Android. By default, React Native's <TextInput> declares no rich-content MIME types, so Gboard greys out the GIF/sticker tabs with "GIFs can't be used here." This package fixes that — selected GIFs are copied to your app's cache directory and delivered to JS as a stable file:// path.

Android-only. iOS gracefully falls back to a regular <TextInput> because Gboard on iOS does not expose a GIF tab to third-party text fields.

Installation

npm install @laxkar77/react-native-gboard-gif-input
# or
yarn add @laxkar77/react-native-gboard-gif-input

No additional setup — autolinking handles the Android side.

Usage

import { useState } from 'react';
import { Image, View } from 'react-native';
import { MediaTextInput } from '@laxkar77/react-native-gboard-gif-input';

export function Composer() {
  const [text, setText] = useState('');
  const [gifUri, setGifUri] = useState<string | null>(null);

  return (
    <View>
      {gifUri && <Image source={{ uri: gifUri }} style={{ width: 200, height: 200 }} />}
      <MediaTextInput
        value={text}
        onChangeText={setText}
        placeholder="Type or pick a GIF..."
        onCommitContent={({ uri, mimeType }) => {
          setGifUri(uri);
          console.log('Committed:', mimeType, uri);
        }}
      />
    </View>
  );
}

MediaTextInput accepts every prop a regular <TextInput> does, plus:

| Prop | Type | Description | | ----------------- | ----------------------------------------- | ---------------------------------------------------------------------------- | | onCommitContent | (payload: CommitContentEvent) => void | Fires when the user inserts a GIF/image/sticker via the keyboard. |

CommitContentEvent

type CommitContentEvent = {
  uri: string;          // file:// path in the app's cacheDir
  mimeType: string;     // e.g. "image/gif", "image/png", "image/webp"
  linkUri?: string;     // optional original web URL (e.g. Tenor/GIPHY source)
  description?: string; // optional human-readable label from the keyboard
};

How it works

1. Subclasses ReactEditText and registers image/gif, image/png, image/jpeg, and image/webp via EditorInfoCompat.setContentMimeTypes — this is the line Gboard reads to decide whether to enable its GIF tab.
2. Uses Android 12+'s unified OnReceiveContentListener (with legacy fallback) to receive the committed content:// URI.
3. Copies the bytes to the app's cache directory immediately — the keyboard's URI permission is tied to the input connection's lifetime, so direct usage causes intermittent <Image> failures after focus loss.
4. Dispatches a non-coalescing direct event on the new architecture's EventDispatcher.

Supported MIME types

image/gif, image/png, image/jpeg, image/webp — covers Gboard's GIF tab, sticker tabs, and the system clipboard for image paste.

Caveats

• Android only. iOS Gboard does not expose a GIF tab in third-party text fields; this is an Apple platform restriction. The component falls back to a plain <TextInput> on iOS.
• inputType matters. Gboard hides the GIF tab when the field is textPassword, numberDecimal, etc., regardless of MIME types. Keep keyboardType="default" for GIF support.
• Stock AOSP keyboard does not have a GIF tab. Make sure Gboard is the active IME on the device/emulator (adb shell ime list -s).
• The cache directory grows over time. If you handle a high volume of GIFs, periodically clean stale files from cacheDir.

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

Made with create-react-native-library