Install the package with:

npm install react-native-giphy-keyboard

or

yarn add react-native-giphy-keyboard

Add use_frameworks! to your Podfile under target 'PROJECT_NAME' do, then run pod install on your ios directory.

Note: for pure Objective-C projects, add an empty swift file to your project and choose Create the Bridging Header when prompted by Xcode. This allows static libraries to be linked.

Add your Giphy API key by adding this to your Info.plist:

<key>GiphyApiKey</key>
<string>YOUR_API_KEY_HERE</string>

Open your project build.gradle and add the following:

buildscript {
    ext {
        kotlin_version = "1.3.61"
        ...
    }
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        ...
    }
    ...
}

allprojects {
  repositories {
    maven {
        url "http:https://giphy.bintray.com/giphy-sdk"
    }
    ...
  }
  ...
}

Then go to your android/app/src/main/res/values/strings.xml and add the following key:

<string name="giphy_api_key" translatable="false">YOUR_API_KEY_HERE</string>

When you're ready to get a production key from Giphy, enable verification mode by doing the following:

Add the following to your Info.plist and build the app.

<key>GiphyVerificationMode</key>
<true/>

Add the following to your android/app/src/main/res/values/strings.xml and build the app.

<bool name="giphy_verification_mode">true</bool>

Now follow the instructions on the Giphy Developers dashboard.

Remember to remove these when the verification is finished. You DON'T want this enabled when you ship to production.

import * as GiphyKeyboard from 'react-native-giphy-keyboard';

GiphyKeyboard.openGiphy({
  rendition: 'fixedWidth',
  fileType: 'gif',
  mediaTypes: ['gifs', 'stickers'],
  theme: 'dark',
});

import * as GiphyKeyboard from 'react-native-giphy-keyboard';

GiphyKeyboard.dismiss();

import * as GiphyKeyboard from 'react-native-giphy-keyboard';

useEffect(() => {
  const removeListener = GiphyKeyboard.addMediaSelectedListener(media => {
    const { url, aspectRatio } = media;
  });

  return () => {
    removeListener();
  };
}, []);

Feel free to clone this repo and run the example/ project.

Run npm install or yarn install in the example/ directory.

Run pod install in the example/ios/ directory.

Build the app in XCode.