Giphy Sdk in React Native App With Expo Workflow

[Annouymous]

I am new to programming and I would like to use the Giphy SDK in my Expo project, which currently uses Expo Go but
Expo Go does not support custom native code, and I cannot use the Giphy SDK in my current setup.
I have explored potential solutions such as creating development builds or ejecting to a bare workflow, but I would like to confirm with the Giphy SDK maintainers
If any specific considerations or guidance exist for integrating this SDK into Expo projects.
I did try this Example Code and got this error

import React from 'react'
import { SafeAreaView, Button } from 'react-native'
import { GiphyDialog, GiphySDK } from '@giphy/react-native-sdk'

// Configure API keys
GiphySDK.configure({ apiKey: '*************' })

export default function App() {
return (

<Button title="Show Giphy Dialog" onPress={() => GiphyDialog.show()} />

)
}

ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RTNGiphySDKModule' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes
ERROR Invariant Violation: "main" has not been registered. This can happen if:

• Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
• A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes

[pshoniuk]

hi @Annouymous
Thanks for reaching out. You are correct. The GIPHY RN SDK doesn't support Expo Go. To use GIPHY RN SDK with Expo, you can use the developer builds (read more about it in this manual: https://github.com/Giphy/giphy-react-native-sdk/blob/main/docs/expo-integration.md). Please let me know if this helps you

[Annouymous]

Before integrating the Giphy SDK into my main React Native project, I began by creating a basic Expo native app using the command npx create-expo-app my-app. Following this, I ran npx expo run:android, and the build process went smoothly.

However, after I installed the Giphy SDK and added the plugin reference to my project's app.json, I included basic Giphy dialog code in my App.js file. When I attempted to rebuild the app using npx expo run:android, the build process was successful, but upon trying to open the app, it kept crashing.

I'm reaching out to seek insights into the possible reasons behind this issue and any potential solutions that can help resolve it. Your assistance in identifying the root cause and offering guidance on how to address this matter would be greatly appreciated.

[pshoniuk]

@Annouymous I've followed all the steps you mentioned to create a playground, but unfortunately, I could not reproduce the issue. I have the playground app working as it should on the new and old RN arch. Could you please share the minimal reproducer repo? This will be very helpful in identifying the root of the problem

[Annouymous]

I have followed all the steps outlined in my previous message and have uploaded my code to GitHub. You can find the code repository at this link: GitHub Repository.

In addition, I've created an installation video that demonstrates the steps I've taken. You can watch the video here: Installation Video.

However, even after following the installation steps, I'm encountering errors after installing the Giphy SDK. I kindly request your help in examining the code and identifying the specific error.

[pshoniuk]

@Annouymous Thank you for such a detailed report. We've found the root of the problem. It's a Fresco version conflict. GIPHY RN SDK uses version 3.x, and Flipper, enabled by default, uses 2.x. For a quick solution, you can remove the following line from MainApplication.java file located in android folder:
ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
I'll update the status here if we find a solution on the GIPHY RN SDK side.

[Annouymous]

As you recommended, I followed your guidance to navigate to the MainApplication.java file within the Android folder and remove the line ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager());. I'm pleased to report that after making this adjustment, the app is now functioning smoothly without any errors.

However, for my personal understanding and knowledge enhancement, I'm curious about the specific purpose of that line of code (ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager());) and how it was impacting the behavior of the Giphy SDK within the application. Any insights you can provide on the role and influence of this code would be greatly appreciated.

Additionally, I'm interested in knowing whether the Giphy SDK is already optimized with best practices or if there are further optimization steps I should consider. Specifically, should I focus on optimizing the loading of GIFs coming from the API? Would it be beneficial to implement modules like "optimized image components" or "react-native-fast-image" to enhance overall performance? Your recommendations on best practices for optimizing the Giphy SDK integration would be invaluable.

Lastly, I'd like to suggest the inclusion of a comprehensive installation guide for Expo React Native within the project's documentation. This would be a valuable resource for future developers, ensuring a smooth onboarding experience and providing clear instructions on working with the Giphy SDK and Expo.

[ALexanderLonsky]

hey @Annouymous,

We’ve found the root cause of the problem, and it’s been resolved in the latest release. You don’t need to implement any more workarounds to make it work.
As for the rendering optimizations, we are doing our best for GIF rendering. To start with, we use the WebP format by default, which is generally superior to GIF. Additionally, we use native libraries for rendering.
Furthermore, we ensure proper rendition for both the dialog and the grid. You can read more about the renditions here.
Of course, you are free to use any components for rendering GIFs in your project; the choice is entirely yours.