# react-native-giphy-keyboard

> Deprecated. React Native implementation of the Giphy SDK for iOS and Android

Latest version **2.1.0** (published 2021-09-13) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-native-giphy-keyboard
pnpm add react-native-giphy-keyboard
yarn add react-native-giphy-keyboard
bun add react-native-giphy-keyboard
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2021-09-13 |
| First published | 2020-01-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 36.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Gustavo Parreira |
| Maintainers | gustash |
| Keywords | react-native, giphy |

## Links

- npm: https://www.npmjs.com/package/react-native-giphy-keyboard
- Repository: https://github.com/Gustash/react-native-giphy-keyboard
- Homepage: https://github.com/Gustash/react-native-giphy-keyboard#readme
- Issues: https://github.com/Gustash/react-native-giphy-keyboard/issues
- npm.io page: https://npm.io/package/react-native-giphy-keyboard

## Recent versions

- 2.1.0 (latest) — 2021-09-13
- 2.0.0 — 2020-11-16
- 1.1.2 — 2020-04-09
- 1.1.1 — 2020-04-09
- 1.0.2 — 2020-04-02
- 1.0.1 — 2020-01-24
- 1.0.0 — 2020-01-23

## README

# react-native-giphy-keyboard

# ⚠️  Deprecation notice ⚠️

This repository has been deprecated in favor of the official https://github.com/Giphy/giphy-react-native-sdk and the `@giphy/react-native-sdk` npm package.

### This module implements the iOS and Android SDKs from Giphy for a simple usage. No more fumbling around with the Giphy API!

## Getting started

Install the package with:

`npm install react-native-giphy-keyboard`

or

`yarn add react-native-giphy-keyboard`

### iOS

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:

```plist
<key>GiphyApiKey</key>
<string>YOUR_API_KEY_HERE</string>
```

### Android

Open your project build.gradle and add the following:

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

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

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

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

## Verification Mode

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

### iOS

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

```plist
<key>GiphyVerificationMode</key>
<true/>
```

### Android

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

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

Now follow the instructions on the Giphy Developers dashboard.

### Note

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

## API

### Open Giphy

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

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

### Dismiss Giphy

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

GiphyKeyboard.dismiss();
```

### Listener

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

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

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

## Example project

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.

---
_Source: https://npm.io/package/react-native-giphy-keyboard · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._