App.js

import React from 'react';
import {
    Text,
    View,
    ScrollView,
    StyleSheet,
    Image,
} from 'react-native';

import {GifSearch, viaTenorLogoGrey, poweredByGiphyLogoGrey} from 'react-native-gif-search';

const GIPHY_API_KEY = 'NctafbvmG7x6Z1HyDVsd5gvB5SBf87ZE';
const DEVELOPMENT_MODE = false;

export default class App extends React.Component {

  constructor(props) {
      super(props);

      this.state = {
        gif_url: null,
        gif_provider: null,
        gif_type: null
      }
  }

  onGifSelected = (gif_url, gif_object) => {
      this.setState({gif_url: gif_url, gif_provider: gif_object.provider, gif_type: gif_object.type})
  }

  onGifLongPress = (gif_url, gif_object) => {
      alert(gif_url)
  }

  render() {
    return (
      <ScrollView style={styles.container} keyboardShouldPersistTaps={"handled"}>
        <GifSearch
          giphyApiKey={GIPHY_API_KEY}
          provider={"all"}
          gifsToLoad={10}
          maxGifsToLoad={50}
          style={{backgroundColor: '#9fd4ab'}}
          textInputStyle={{color: 'black'}}
          gifStyle={{height:160}}
          loadingSpinnerColor={'black'}
          placeholderTextColor={'grey'}
          placeholderText={'Search Gifs from Tenor and Giphy'}
          stickersPlaceholderText={'Search Stickers from Giphy'}
          onGifSelected={this.onGifSelected}
          onGifLongPress={this.onGifLongPress}
          visible={true}
          horizontal={true}
          showScrollBar={false}
          onError={(error) => {console.log(error)}}
          noGifsFoundText={"No Gifs found :("}
          noGifsFoundTextStyle={{fontWeight: 'bold'}}
          textInputProps={{autoFocus: true}}
          gifType={"all"}
          previewGifQuality={"low"}
          selectedGifQuality={"medium"}
        />
        <View style={styles.gifPreview}>
            {this.state.gif_url ?
            (
              <View>
                <Text style={{textAlign:'center', fontSize: 20}}>Selected {this.state.gif_type}:</Text>
                <View style={styles.gifContainer}>
                    <Image
                      style={styles.gif}
                      source={{ uri: this.state.gif_url}}
                    />
                    {!DEVELOPMENT_MODE ?
                    (
                      <Image 
                        source={this.state.gif_provider == "tenor" ? (viaTenorLogoGrey) : (poweredByGiphyLogoGrey)} 
                        style={styles.providerLogo}
                      />
                    )
                    :
                    (null)
                    }
                </View>
              </View>
            )
            :
            (null)
            }
            
        </View>

      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  gifPreview: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 20,
  },
  gifContainer: {
    width: 280,
    height: 240,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 5,
    borderWidth: 2,
    marginVertical: 10
  },
  gif: {
    width: 250,
    height: 180,
    borderRadius: 25,
    resizeMode: 'contain',
  },
  providerLogo: {
    width: 190,
    height:15,
    resizeMode: 'contain',
    marginTop: 13,
    marginBottom: 2
  }
});