Giphy / giphy-react-native-sdk

GIPHY React Native SDK
https://developers.giphy.com
Apache License 2.0
67 stars 25 forks source link

GIF is not playing after updating my react native version to 0.73.4 #180

Closed Nav-kr closed 2 months ago

Nav-kr commented 2 months ago

🐛 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

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>
    );
}
ALexanderLonsky commented 2 months ago

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.