DEV Community

Cover image for React native expo tenor search Component
Sreedeep
Sreedeep

Posted on

1

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.

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up