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.

Sentry mobile image

Mobile Vitals: A first step to Faster Apps

Slow startup times, UI hangs, and frozen frames frustrate users—but they’re also fixable. Mobile Vitals help you measure and understand these performance issues so you can optimize your app’s speed and responsiveness. Learn how to use them to reduce friction and improve user experience.

Read the guide →

Top comments (0)

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

👋 Kindness is contagious

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

Okay