GIPHY SDK Integration to Expo App (prebuild)

[rmsohaila]

Hi, I am a beginner to the App Development therefore I chose Expo in the start to kick start with project. Now when I came across to integrate the GiphyDialog in my app, I've ejected my app from expo using npx expo prebuild. After that I've started with the initial example given in the repo and unable to run the App.

After run into this exception when I tried to follow the command given in the documentation

I am getting following error:

.\gradlew generateCodegenArtifactsFromSchema       

> Configure project :expo

Using expo modules
  - expo-application (5.3.1)
  - expo-camera (13.4.4)
  - expo-constants (14.4.2)
  - expo-file-system (15.4.4)
  - expo-font (11.4.0)
  - expo-image-loader (4.3.0)
  - expo-image-picker (14.3.2)
  - expo-keep-awake (12.3.0)
  - expo-linear-gradient (12.3.0)
  - expo-modules-core (1.5.12)
  - expo-modules-core$android-annotation (1.5.12)
  - expo-modules-core$android-annotation-processor (1.5.12)
  - expo-permissions (14.2.1)
  - expo-splash-screen (0.20.5)
  - expo-system-ui (2.4.0)
  - expo-web-browser (12.3.2)

> Configure project :react-native-appearance
WARNING:Software Components will not be created automatically for Maven publishing from Android Gradle Plugin 8.0. To opt-in to the future behavior, set the Gradle property android.disableAutomaticComponentCreation=true in the `gradle.properties` file or use the new publishing DSL.

FAILURE: Build failed with an exception.

* Where:
Build file 'D:\Projects\v2\node_modules\react-native-appearance\android\build.gradle' line: 102

* What went wrong:
A problem occurred configuring project ':react-native-appearance'.        
> Configuration with name 'compile' not found.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

See https://docs.gradle.org/8.0.1/userguide/command_line_interface.html#sec:command_line_warnings

BUILD FAILED in 14s
5 actionable tasks: 5 up-to-date

I've tried by updating the maven to maven-publish but the problem persist.

My Env versions:

Please help me integrate the GiphySDK. Thanks

[ALexanderLonsky]

Hey @rmsohaila, It's difficult for me to pinpoint what's going wrong on your end without a demo example. I've just tried creating a new project on my end:

1. npx create-expo-app my-app
2. cd my-app
3. npx expo install @giphy/react-native-sdk
4. App.js:

   
   import { StatusBar } from 'expo-status-bar';
   import { StyleSheet, Text, View } from 'react-native';
   import React from 'react'
   import { SafeAreaView, Button } from 'react-native'
   import { GiphyDialog, GiphySDK } from '@giphy/react-native-sdk'

GiphySDK.configure({ apiKey: 'your_key' })

export default function App() { return ( <Button title="Show Giphy Dialog" onPress={() => GiphyDialog.show()} /> ) }

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });

5. `npx expo prebuild --clean`
6. Open `my-app/android` folder in `Android Studio` and compile
7. `./gradlew generateCodegenArtifactsFromSchema` also works well for me

[DavidStryfe]

It's happening the same to me, both for iOS and Android.

I've imported the library just like the documentation says, and only using GiphySDK.configure({ apiKey: "KEY" }), I get this problem:

[ALexanderLonsky]

Hey @DavidStryfe , Could you please attach a demo project here? It seems the issue may be related to incorrect syntax, but I won't be able to assist you in fixing it without the reproducible demo.

[DavidStryfe]

Hi @ALexanderLonsky ! Thank you for your answer, I was trying to reproduce it. I see the following error on index.bundle:

var THEME_COLOR_FIELDS = (['avatarPlaceholderColor', 'backgroundColor', 'backgroundColorForLoadingCells', 'confirmationBackButtonColor', 'confirmationSelectButtonColor', 'confirmationSelectButtonTextColor', 'confirmationViewOnGiphyColor', 'defaultTextColor', 'dialogOverlayBackgroundColor', 'emojiDrawerGradientBottomColor', 'emojiDrawerGradientTopColor', 'emojiDrawerSeparatorColor', 'handleBarColor', 'retryButtonBackgroundColor', 'retryButtonTextColor', 'searchBackButtonColor', 'searchBarBackgroundColor', 'searchPlaceholderTextColor', 'searchTextColor', 'stickerBackgroundColor', 'suggestionCellBackgroundColor', 'suggestionCellTextColor', 'tabBarSwitchDefaultColor', 'tabBarSwitchSelectedColor', 'usernameColor'] satisfies (keyof NativeGiphyTheme)[]);

I think this can happens when TypeScript transpiles to javascript, but I don't know why.

[ALexanderLonsky]

Hey @DavidStryfe, What does the error say? For me, if I replace 'satisfies' with 'satisfies1', then I get:

error: SyntaxError: .../node_modules/@giphy/react-native-sdk/src/dto/giphyTheme.ts: Missing semicolon. (91:1)
  89 |   'tabBarSwitchSelectedColor',
  90 |   'usernameColor',
> 91 | ] satisfies1 (keyof NativeGiphyTheme)[]
     |  ^
  92 |
  93 | type ChangeThemeColorType<T> = {
  94 |   [P in keyof T]: P extends (typeof THEME_COLOR_FIELDS)[number] ? ColorValue : T[P]

What you can try is to go to /node_modules/@giphy/react-native-sdk/src/dto/giphyTheme.ts and replace

const THEME_COLOR_FIELDS = [
  'avatarPlaceholderColor',
  'backgroundColor',
  'backgroundColorForLoadingCells',
  'confirmationBackButtonColor',
  'confirmationSelectButtonColor',
  'confirmationSelectButtonTextColor',
  'confirmationViewOnGiphyColor',
  'defaultTextColor',
  'dialogOverlayBackgroundColor',
  'emojiDrawerGradientBottomColor',
  'emojiDrawerGradientTopColor',
  'emojiDrawerSeparatorColor',
  'handleBarColor',
  'retryButtonBackgroundColor',
  'retryButtonTextColor',
  'searchBackButtonColor',
  'searchBarBackgroundColor',
  'searchPlaceholderTextColor',
  'searchTextColor',
  'stickerBackgroundColor',
  'suggestionCellBackgroundColor',
  'suggestionCellTextColor',
  'tabBarSwitchDefaultColor',
  'tabBarSwitchSelectedColor',
  'usernameColor',
] satisfies (keyof NativeGiphyTheme)[]

with

const THEME_COLOR_FIELDS: (keyof NativeGiphyTheme)[] = [
  'avatarPlaceholderColor',
  'backgroundColor',
  'backgroundColorForLoadingCells',
  'confirmationBackButtonColor',
  'confirmationSelectButtonColor',
  'confirmationSelectButtonTextColor',
  'confirmationViewOnGiphyColor',
  'defaultTextColor',
  'dialogOverlayBackgroundColor',
  'emojiDrawerGradientBottomColor',
  'emojiDrawerGradientTopColor',
  'emojiDrawerSeparatorColor',
  'handleBarColor',
  'retryButtonBackgroundColor',
  'retryButtonTextColor',
  'searchBackButtonColor',
  'searchBarBackgroundColor',
  'searchPlaceholderTextColor',
  'searchTextColor',
  'stickerBackgroundColor',
  'suggestionCellBackgroundColor',
  'suggestionCellTextColor',
  'tabBarSwitchDefaultColor',
  'tabBarSwitchSelectedColor',
  'usernameColor',
];

It should help if the problem is related to the 'satisfies' keyword.

P.S. What version of Expo or TypeScript are you using?

[github-actions[bot]]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.