Skip to content

Latest commit

 

History

History
170 lines (137 loc) · 10.5 KB

README.md

File metadata and controls

170 lines (137 loc) · 10.5 KB
Raw

react-native-gif-search

An easy-to-use, highly customizable react-native package for searching and selecting a gif using the Giphy API.

npm downloads npm version

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. It 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 instrauctions on how to get an API key.

If you wish to publish your app and go from development to production you need to upgrade the 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 dark or white version of the powered by Giphy logo (developmentMode={false}) as you can see in the preview above.

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.

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'

Usage

Import

import {GifSearch, giphyLogo, giphyLogoDark} from 'react-native-gif-search'
  • GifSearch: The gif searching component
  • giphyLogo: The white Giphy logo for use in an Image (<Image source={giphyLogo} />)
  • giphyLogoDark: The grey Giphy logo for use in an Image (<Image source={giphyLogoDark} />)

Minimal example

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

Bigger example

<GifSearch
  giphyApiKey={YOUR_GIPHY_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'}
  darkGiphyLogo={true}
  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})}}
  developmentMode={false}
  horizontal={false}
  showScrollBar={false}  
  noGifsFoundText={"No Gifs found :("}
  noGifsFoundTextStyle={{fontWeight: 'bold'}}
  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'}
  darkGiphyLogo={true}
  numColumns={5}
  developmentMode={false}
  showScrollBar={false}
  noGifsFoundText={"No Gifs found :("}
/>

You can see a full example project in the example folder and more specifically in the App.js file.

Properties

Property name Required Explanation Default
giphyApiKey Yes The Giphy API key you obtained (see step 1 here)
onGifSelected Yes Function to be called when user clicked 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 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.
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
developmentMode No Giphy logo appears on top right corner, if set to false (this is required by Giphy when publishing your app) true
darkGiphyLogo No Used with developmentMode={false} shows the gray Giphy logo if set to true, or the white Giphy logo if set to false false
placeholderText No The text for when there is no search term 'Search GIF'
visible No Can be used for toggling the view for the gif selection (e.g. open on button press) true
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 The style of the search text input
gifStyle No The style of the gif inside the list
gifListStyle No The 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
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 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.
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 The style of the text that is displayed when no gifs are found

Version History

  • 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. ⚠️ Warning: If your GifSearch component is nested in a ScrollView you should add keyboardShouldPersistTaps={"handled"} property in the ScrollView (like in example code).

  • 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