DEV Community

Cover image for React native expo tenor search Component
Sreedeep
Sreedeep

Posted on

React native expo tenor search Component

Recently we needed to integrate tenor gifs into our product, due to tenor apis up-scaling to v2 we couldn't find any opensource package , hence we created this expo-tenor-search package for react native .

expo-tenor-search

the main features are simple

  • you can search gifs
  • display gif categories

For easy integration into your apps there is this function handleGifSelect which you can define your logic on what to do with the selected gif.

This is how it looks in code

import { GifSearch } from 'expo-tenor-search'

export default function GifScreen() {
  const handleGifSelect = (data) => {
    console.log(`Selected GIF: ${data}`)
  }

  const styles = {
    searchbox: {
      searchContainer: {
        height: 45
      }
    },
    gifbox: {
      img: {
        borderRadius: '10px'
      }
    }
  }
  return (
    <GifSearch
      tenorkey={'xxx-xxx-xxx-xxx'}
      MediaFilter={'minimal'}
      onGifSelect={handleGifSelect}
      styles={styles}
    />
  )
}
Enter fullscreen mode Exit fullscreen mode
  • you can pass custom css into this with which you can control the UI .
  • there are selectors like searchContainer , closeButton,button , img etc using which you can manipulate the styles .

The results produced are :-

Image description

If you find this useful and want to know more about its implementation give this an up vote.

Will be posting more stuff here soon.

Follow me here twitter for updates.

Top comments (0)