Giphy For React Native

Cross Platform wrapper around the Giphy SDK for both iOS and Android, giving you access to Giphy large GIF library. Works well with react-native-gifted-chat and Typescript.

Prerequisites

• You need to get an API Key from Giphy Developers
• iOS 10.0+
• Swift 5.0

Example

You can view the source code for the example application here

iOS Application

Installation

Install the library using either yarn or npm like so:

$ npm install --save react-native-giphy-ui

$ yarn add react-native-giphy-ui

iOS Installation

If you're using React Native versions > 60.0, it's relatively straightforward.

cd ios && pod install

For versions below 0.60.0, use rnpm links

• Run react-native link @jesster2k10/react-native-range-slider
• If linking fails, follow the manual linking steps

Additional Steps

This library was written in Swift, so in-order for you app to compile, you need to have at least on .swift file in your source code a bridging header to avoid a runtime error like so:

All you have to do is:

• File > New > File
• Swift File
• Name the file whatever you wish
• When prompted to create a bridging header, do so

Android Installation

For versions below 0.60.0, follow the linking instructions above.

You must add the following to your application build.gradle

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

Your minSdkVersion must be >= 19.

Usage

This library offers an imperative api wrapper around the native Giphy SDK

import { GiphyUI } from 'react-native-giphy-ui';

// Configure the client with the api key
GiphyUI.configure('GIPHY_API_KEY');

// Present the ui
GiphyUI.present(
  {
    theme: 'dark',
    layout: 'carousel',
    rating: 'ratedPG13',
    showConfirmationScreen: false,
    mediaTypes: ['gfs'],
  },
  selectedMedia => {
    console.log('Picked media', selectedMedia);
  }
);

Reference

GiphyUI

• present
• configure

present(config: GiphyPresentConfig, onSelect: (media: GiphyGif) => void, onDismiss?: Callback)

Shows the GiphyViewController with a customized configuration, and an on select/dismiss callback.

GiphyUI.present(
  {
    theme: 'light',
  },
  media => {
    console.log(media);
  }
);

GiphyPresentConfig

| Name | Type | Default | Description | | ---------------------- | ---------------------------------------------------------------------------- | --------- | ---------------------------------------------------------------------------------- | | theme | enum('light', 'dark') | light | The theme of the gif picker | | layout | enum('carousel', 'waterfall') | waterfall | The layout of the gif picker | | rating | enum('nsfw', 'ratedPG13', 'ratedPG', 'unrated', 'ratedR', 'ratedY, 'ratedG') | ratedPG | set a specific content rating for the search results. | | trayHeightMultiplier | number | 0.7 | height for the tray's "snap point" as a ratio of the GiphyViewController's height. | | showConfirmationScreen | boolean | false | show a secondary confirmation screen when the user taps a GIF. | | shouldLocalizeSearch | boolean | false | localize the search results based on phone settings | | mediaTypes | enum('gifs', 'stickers', 'text', 'emoji')[] | ['gifs'] | Set the content type(s) you'd like to show |

GiphyGif

Please view the types file

Callback

type Callback = (() => void) | null;

configure(apiKey: string)

Configures the api client with a given api key.

GiphyCache (iOS Only)

• setSetting
• downloadAssetUrl

setSetting(setting: 'memoryOnly' | 'diskOnly')

This controls how the GIFs are cached on the device. If you only want to store the GIF caches in memory you can:

GiphyCache.setSetting('memoryOnly');

Similarly, if you want to store the cache on the disk; you can:

GiphyCache.setSetting('diskOnly');

downloadAssetUrl(url: string): Promise<Asset>

Returns the raw image data for a cached image.

const asset = await GiphyCache.downloadAssetUrl(url);
console.log(asset.data); // base 64 encoded data

Asset

type Asset = {
  width: number;
  height: number;
  data: string; // base 64 image
};

setDiskCacheByteLimit(limit: number)

The default disk cache limit is 300mb, if you want to increase it, call on this method like so:

const oneGB = 1000 * 1000 * 1000;
GiphyCache.setDiskCacheByteLimit(oneGB);

GiphyMediaView (iOS Only)

This API has not been fully implemented yet.

A wrapper around GPHMediaView to display a Gif Media

Note: you can use a regular React Native Image to display the gif

import {GiphyMediaView} from 'react-native-giphy-ui'

const App = () => {
  //...
  const media = //

  return (
    <GiphyMediaView media={media} />
  )
}

Acknowledgments

• This library is based off of giphy-ios-sdk-ui and giphy-android-sdk-ui

Roadmap

• [ ] Extend coverage of the native api
• [ ] Improve documentation
• [ ] Unit tests
• [ ] Flow support

Contribution

Please visit the CONTRIBUTING.md file.

License

MIT