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.

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay