❤
npm
Sign UpSign In

@wijayantoap/react-native-gif-search
TypeScript icon, indicating that this package has built-in type declarations

1.3.6 • Public • Published

react-native-gif-search

An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using the Tenor V2 and/or the Giphy API

npm downloads npm version Javascript Example Typescript Example

See more previews here.

This package allows you to present a searchable list of gifs to the user, from which the user can select the desired gif. In the beginning and when the search term is empty, a list of trending gifs is shown. You can use this component inside a chat screen, for posts, comments or wherever else you need. The gifs that are displayed in the gifs list are low quality previews, in order to load faster and minimize mobile data usage. The gif that the user selects is given in a higher quality, so that it can be used and displayed properly in the app. These are the default settings, but can be changed (see Data Usage section below).

This package uses the Giphy API so you need to create an account and obtain an API key which is free and easy. This article was helpful for creating this package and has instructions on how to get a Giphy API key. The Tenor API has also been added, for which an API key can be obtained here. This means that you can present gifs using the Giphy API, the Tenor API or both.

Installation

npm install react-native-gif-search --save

Android

In your project's folder go to file android/app/build.gradle and inside dependencies block add these lines:

implementation 'com.facebook.fresco:fresco:2.0.0'
implementation 'com.facebook.fresco:animated-gif:2.0.0'

Note: The fresco version depends on the React Native version. The above fresco version (2.0.0) is used for RN >= 0.60. For RN >= 0.65 use fresco version 2.5.0. For RN < 0.60 use 1.x fresco versions (eg. 1.10.0 for RN 0.59 etc.). For more information or questions or for providing additional information about this, check the issue #13. Credits to dreamerchandra for pointing this out.

Usage

Example Projects

Javascript For a plain Javascript example project go to Examples/js-example

Javascript If you use TypeScript for your project go to Examples/ts-example

Import

import {
  GifSearch,
  poweredByTenorLogoWhite,
  poweredByTenorLogoGrey,
  poweredByTenorLogoBlue,
  viaTenorLogoWhite,
  viaTenorLogoGrey,
  viaTenorLogoBlue,
  poweredByGiphyLogoGrey,
  poweredByGiphyLogoWhite
} from 'react-native-gif-search'

You can import only the logos that you need and use them like this: <Image source={poweredByTenorLogoGrey} />

Minimal example

<GifSearch
  tenorApiKey={YOUR_TENOR_API_KEY}
  giphyApiKey={YOUR_GIPHY_API_KEY}
  onGifSelected={(gif_url)=>{alert(gif_url)}}
/>

Bigger example

<GifSearch
  tenorApiKey={YOUR_TENOR_API_KEY}
  gifsToLoad={10}
  maxGifsToLoad={25}
  style={{backgroundColor: 'white', borderWidth: 3, borderRadius: 10}}
  textInputStyle={{fontWeight: 'bold', color: 'black'}}
  gifListStyle={{height:320}}
  gifStyle={{height:160}}
  loadingSpinnerColor={'black'}
  placeholderTextColor={'grey'}
  placeholderText={'Search'}
  onGifSelected={(gif_url, gif_object) => {console.log(gif_url); console.log(gif_object)}}
  onGifLongPress={(gif_url, gif_object) => {console.log(gif_url); console.log(gif_object)}}
  visible={this.state.visible}
  onBackPressed={() => {this.setState({visible: false})}}
  horizontal={false}
  showScrollBar={false}
  noGifsFoundText={"No Gifs found :("}
  noGifsFoundTextStyle={{fontWeight: 'bold'}}
  provider={"tenor"}
  providerLogo={poweredByTenorLogoGrey}
  textInputProps={{autoFocus: true}}
  onError={(error) => {console.log(error)}}
/>

Multiple columns example

<GifSearch
  giphyApiKey={YOUR_GIPHY_API_KEY}
  onGifSelected={(gif_url)=>{alert(gif_url)}}
  style={{backgroundColor: '#9fd4ab', height:300}}
  textInputStyle={{fontWeight: 'bold', color: 'black'}}
  loadingSpinnerColor={'black'}
  placeholderTextColor={'grey'}
  numColumns={5}
  provider={"giphy"}
  providerLogo={poweredByGiphyLogoGrey}
  showScrollBar={false}
  noGifsFoundText={"No Gifs found :("}
/>

Stickers example

<GifSearch
  giphyApiKey={YOUR_GIPHY_API_KEY}
  onGifSelected={(gif_url)=>{alert(gif_url)}}
  textInputStyle={{fontWeight: 'bold', color: 'white'}}
  loadingSpinnerColor={'white'}
  placeholderTextColor={'grey'}
  providerLogo={poweredByGiphyLogoWhite}
  providerLogoStyle={{width:'40%'}}
  showScrollBar={false}
  noGifsFoundText={"No stickers found :("}
  stickersPlaceholderText={"Search for stickers"}
  gifType={"sticker"}
/>

Usage examples: JS code, TS code.

Properties

Property name Required Explanation Default
onGifSelected Yes Function to be called when user clicks on a gif. The parameters of this function is a string with the url of the selected gif in better quality and the whole Giphy/Tenor object in case the developer wants to use a different url or more info about the selected gif. See the properties of a Giphy object here and the properties of a Tenor object here. The gif object (second parameter) also contains the provider ("giphy", "tenor") and the type ("gif", "sticker"). See a usage example of this in onGifSelected function of App.js.
onGifLongPress No Function to be called when the user long presses on a gif. The parameters of this function is a string with the url of the gif in better quality and the whole Giphy/Tenor object in case the developer wants to use a different url or more info about the selected gif. See the properties of a Giphy object here and the properties of a Tenor object here. The gif object (second parameter) also contains the provider ("giphy", "tenor") and the type ("gif", "sticker"). See a usage example of this in onGifLongPress function of App.js.
giphyApiKey Yes, except if provider={"tenor"} The Giphy API key you obtained (see step 1 here)
tenorApiKey No The Tenor API key you obtained from here
provider No From which provider to load gifs. Can be "tenor", "giphy" or "all". "all"
gifType No What type of gifs to show. Can be "gif", "sticker" or "all". In case of "sticker" only tha GIPHY provider is used regardless the provider property, because only GIPHY supports stickers. In case of "all" there are two buttons to switch between gifs and stickers. "gif"
gifsToLoad No How many gifs to load in the beginning and every time the user reaches the scroll end 15
maxGifsToLoad No On how many gifs to stop loading more gifs 60
providerLogo No The logo to appear on top right corner (e.g.providerLogo={poweredByTenorLogoGrey})
providerLogoStyle No The style of the provider's logo (e.g.providerLogoStyle={{width:'40%'}})
placeholderText No The text for when there is no search term and gifType is set to "gif". If gifType is set to "all" then this is the placeholder while gifs button is selected. 'Search GIF'
stickersPlaceholderText No The text for when there is no search term and gifType is set to "sticker". If gifType is set to "all" then this is the placeholder while stickers button is selected. 'Search Stickers'
visible No Can be used for toggling the view for the gif selection (e.g. open on button press) true
previewGifQuality No Set the quality of the GIFs that appear inside the GifSearch component. Can be "low", "medium" or "high". See also Data Usage section below. "low"
selectedGifQuality No Set the quality of the GIF that is the first parameter of the onGifSelected and onGifLongPress. Can be "low", "medium" or "high". See also Data Usage section below. "medium"
onBackPressed No Function for when the device's back button is pressed. Used with visible={this.state.visible} for closing the gif selection when back button is pressed. If not set then default action is taken. If set then default action is ignored while gif selection is visible. Recommended usage: onBackPressed={() => {this.setState({visible: false})}}
onError No Function to be called when an error occures, e.g. no internet connection
horizontal No Set the orientation of the list with the gifs. Horizontal if true, vertical if false true
style No The component's style property (e.g. style={{backgroundColor: 'yellow', borderRadius: 5}})
textInputStyle No Additional style of the search text input
gifStyle No The style of the gif inside the list
gifListStyle No Additional style for the FlatList used for displaying the gifs
loadingSpinnerColor No The color of the loading spinner 'white'
placeholderTextColor No The color of the placeholder for the search text input 'grey'
showScrollBar No Whether to show or not the scroll bar / scroll indicator true
numColumns No How many columns of gifs to show. When this is used, horizontal is automatically set to false
gifListProps No Additional properties for the FlatList with the gifs
textInputProps No Additional properties for the TextInput with the search term (e.g. textInputProps={{autoFocus: true}})
noGifsFoundText No Text to display when no gifs are found 'No GIFS found'
noGifsFoundTextStyle No Additional style of the text that is displayed when no gifs are found
tenorApiProps No For adding and/or overwriting the default properties of the tenor API request (e.g. tenorApiProps={{"locale":"en_US"}}). See all possible properties here.
giphyApiProps No For adding and/or overwriting the default properties of the giphy API request (e.g. giphyApiProps={{"lang":"en"}}). See all possible properties here.
showGifsButtonText No The text for the button that shows gifs when gifType is "all". "Gifs"
showGifsButtonTextStyle No Additional style for the text of the button that shows gifs when gifType is "all".
showGifsButtonSelectedTextStyle No Additional style for the text of the button that shows gifs when the button is selected and gifType is "all".
showGifsButtonStyle No Additional style for the button that shows gifs when gifType is "all".
showGifsButtonSelectedStyle Additional style for the button that shows gifs when it is selected and gifType is "all". aaa
showStickersButtonText No The text for the button that shows stickers when gifType is "all". "Stickers"
showStickersButtonTextStyle No Additional style for the text of the button that shows stickers when gifType is "all".
showStickersButtonSelectedTextStyle No Additional style for the text of the button that shows stickers when the button is selected and gifType is "all".
showStickersButtonStyle No Additional style for the button that shows stickers when gifType is "all".
showStickersButtonSelectedStyle No Additional style for the button that shows stickers when it is selected and gifType is "all".

Attribution

If you wish to publish your app and go from development to production you need to follow some steps for every API that you use.

Tenor

All content retrieved from Tenor must be properly attributed by including one of the three following options:

  • Powered By Tenor - to be used in the GIF browsing experience
  • Search Tenor - to be used as the placeholder text in the search bar
  • Via Tenor - to be used in the footer of a shared GIF

Source: https://tenor.com/gifapi/documentation#attribution

Giphy

For the Giphy API you need to upgrade the Giphy API key. To do so, you must verify that you have used the Giphy attribution marks (Giphy logos) in your app, by providing screenshots and videos from your app. The verification process can take up to 3 days. The react-native-gif-search package can help you with this too, because it has a property for adding a logo on top right corner (see providerLogo in Properties section) or you can include a Giphy logo near your shared GIF using the logos you can import from this package (see Import section).

Data usage

The quality of the GIFs is an important factor when it comes to how much mobile data the component uses. When the user is connected through cellular data and not wifi, then it is easy to consume a lot of data while loading GIFs. That's why react-native-gif-search uses by default a low quality for the preview of the GIFs and a better (medium) quality for the selected GIF. Of course the developer can change this according to the specifications of the app that uses this package. If you are concerned about data usage, you can also have a look at this article for Giphy API. Also click here to see available format types for Giphy, and here for Tenor.

The values of the previewGifQuality and selectedGifQuality properties correspond to these (Giphy/Tenor) API values:

Property value Giphy API value Tenor API value
"low" preview_gif nanogif
"medium" fixed_width tinygif
"high" downsized_large mediumgif

If you wish to use other quality values or in general have more control over API request values, you can use tenorApiProps and giphyApiProps properties (see Properties section above).

Warnings ⚠️

  • If your GifSearch component is nested in a ScrollView you should add keyboardShouldPersistTaps={"handled"} property in the ScrollView (like in example code), otherwise the scrolling will probably be luggy.
  • If you want to have borderRadius for a GIF, you should also use overlayColor, otherwise there will probably be no border radius when you test it. See gifComponent style in GifPicker example code). To find out more about this issue check this StackOverflow answer.

Version History

  • v1.3.2

    • Fixed the #11 bug.

  • v1.3.1

    • Added previewGifQuality and selectedGifQuality
      • Credits to anthlasserre for adding properties that handle the quality of the gifs (see pull request #10).

  • v1.3.0

    • Added support for TypeScript
      • Credits to anthlasserre for adding TS support and an example project (see pull request #9).

  • v1.2.1

    • providerLogoStyle: Now you can change the style of the provider logo (e.g. width, height etc.)
    • Fixes:
      • When using columns, the last column now has no right margin.
      • Credits to devautor for locating and helping fix this and other UI problems (see pull request #8).

  • v1.2.0

    • Added support for Stickers from GIPHY API
    • onGifLongPress: Now you can provide a function used when the user long presses a gif (e.g. for showing a preview before selecting)
    • New properties: gifType, stickersPlaceholderText, onGifLongPress, showGifsButtonText, showGifsButtonTextStyle, showGifsButtonSelectedTextStyle, showGifsButtonStyle, showGifsButtonSelectedStyle, showStickersButtonText, showStickersButtonTextStyle, showStickersButtonSelectedTextStyle, showStickersButtonStyle, showStickersButtonSelectedStyle (see Properties section for explanation).

  • v1.1.0

    • Added support for Tenor API
    • New properties: tenorApiKey, provider, providerLogo, tenorApiProps, giphyApiProps (see Properties section for explanation).
    • Removed properties: developmentMode, darkGiphyLogo. Anyone who used developmentMode={false} with darkGiphyLogo={true} should replace these with providerLogo={poweredByGiphyLogoGrey} and import poweredByGiphyLogoGrey (see Import section) in order to have the same results (use providerLogo={poweredByGiphyLogoWhite} in case you had darkGiphyLogo={false}). Notice that if you intend to use only Giphy API you must add the property provider={"giphy"}.
    • Fixes:
      • After typing the search term, the gifs of the final search term will be displayed. Previously there were cases where the user would type "test" and the gifs for "tes" would appear.

  • v1.0.10

    • giphyLogo, giphyLogoDark: Now you can also import the giphyLogo and the giphyLogoDark from the module and use it as a source of an Image component (like in example code).
    • Fixes:
      • Bigger width for "no gifs found" text.

  • v1.0.8

    • No GIFS found: Displaying a text when there are no gifs matching the search term. See Properties section.
    • Autofocus on open: Now you can autofocus on the search input when the GifSearch component is displayed. Just use textInputProps={{autoFocus: true}}.
    • Fixes:
      • The selected gif is now better quality with no lag (credits to anthlasserre for noticing).
      • When keyboard is open and the user selects a gif, the keyboard now closes and the gif is selected. Previously it did not select the gif on first tap.

  • v1.0.7

    • numColumns: Displaying gifs in grid view with specific number of columns. See Properties section. Credits to anthlasserre for suggesting and helping add this feature.
    • gifListProps: See Properties section. Credits to anthlasserre for suggesting and helping add this feature.
    • onGifLongPress: Function for when the user long presses on a link. This can be used to show a bigger preview. See Properties section.

License

ISC

Readme

Keywords

Package Sidebar

Install

npm i @wijayantoap/react-native-gif-search

Repository

github.com/wijayantoap/react-native-gif-search

Homepage

github.com/wijayantoap/react-native-gif-search#readme

Weekly Downloads

2

Version

1.3.6

License

ISC

Unpacked Size

286 kB

Total Files

16

Last publish

Collaborators

  • wijayantoap
Try on RunKit
Report malware