Closed Nav-kr closed 5 months ago
(A clear and concise description of what the bug is)
I am using [giphy-react-native-sdk] version 2.0.0 My Giphy code
import React, { useState } from 'react'; import { SafeAreaView, View, TouchableOpacity } from 'react-native'; import { GiphyContent, GiphyGridView, GiphyMedia, GiphyMediaView, GiphySDK, } from '@giphy/react-native-sdk'; import { useTheme } from '../constants/ThemePovider'; import AntDesign from 'react-native-vector-icons/AntDesign'; import { appColors } from '../styles/colors'; import { TextInput } from 'react-native-paper'; import { medium } from '../styles/font'; import { moderateScale, verticalScale } from '../utils/metrics'; GiphySDK.configure({ apiKey: '...' }); export default function Giphy(props) { const { onSelect, selection, preview, close } = props; const { isDark } = useTheme(); const [searchQuery, setSearchQuery] = useState(''); return ( <SafeAreaView> {!selection && <TextInput onChangeText={setSearchQuery} placeholder="Search..." mode="outlined" outlineColor={isDark ? appColors.dark_lightGrey : appColors.GRAY_MEDIUM} underlineColorAndroid="transparent" value={searchQuery} theme={{ colors: { accent: appColors.red, placeholder: isDark ? appColors.dark_lightGrey : appColors.GRAY_MEDIUM, primary: isDark ? appColors.dark_lightGrey : appColors.primary, text: isDark ? appColors.dark_sec : appColors.text }, fonts: { fontWeight: medium, fontSize: moderateScale(12) } } } style={{ marginBottom: verticalScale(8), width: props.minWidth ? props.minWidth : '100%', minWidth: props.minWidth ? props.minWidth : '100%', fontSize: moderateScale(12), height: verticalScale(35), backgroundColor: isDark ? appColors.dark_mid : appColors.white, }} />} {!selection && <View style={{ marginBottom: verticalScale(8), overflow: 'hidden' }}> {!searchQuery == '' ? <GiphyGridView content={GiphyContent.search({ searchQuery: searchQuery })} cellPadding={3} style={{ height: verticalScale(200), marginTop: 0 }} onMediaSelect={e => { onSelect(e.nativeEvent.media); preview(e.nativeEvent.media.url); }} /> : <GiphyGridView content={GiphyContent.trendingGifs()} cellPadding={3} style={{ height: verticalScale(250) }} onMediaSelect={e => { onSelect(e.nativeEvent.media); preview(e.nativeEvent.media.url); }} />} </View>} {selection && <View style={{ height: moderateScale(150), width: moderateScale(150), alignItems: 'center', overflow: 'hidden', position: 'relative' }}> <TouchableOpacity onPress={close} style={{ alignSelf: 'flex-end', position: 'absolute', top: moderateScale(5), right: moderateScale(5), backgroundColor: appColors.primary, borderRadius: moderateScale(10), zIndex: 99999 }}> <AntDesign name="closecircle" size={moderateScale(18)} color={appColors.GRAY_LIGHT} /> </TouchableOpacity> <GiphyMediaView media={selection} style={{ height: moderateScale(150), width: moderateScale(150) }} /> </View> } </SafeAreaView> ); }
Hey @Nav-kr, I'm guessing that GIFs are not playing on the Android platform. To avoid any potential issues, please use the latest Giphy SDK. Refer to this answer for more details.
🐛 Bug Report
(A clear and concise description of what the bug is)
To Reproduce
I am using [giphy-react-native-sdk] version 2.0.0 My Giphy code