Firework for Developers
One-to-one Virtual ShoppingBusiness Portal
  • Welcome to Firework for Developers
  • Firework Interactive Video and One-to-many Digital Showroom
  • Web
    • Getting Started (Web)
      • Shopify
      • Magento
      • Wordpress (WooCommerce)
      • Salesforce Commerce Cloud
      • BigCommerce
    • Integration Guide for Web
      • Components
        • Hero Unit
        • Carousel / Grid
        • Storyblock (Web)
        • Player (Floating)
        • Storylink
      • Styling
      • Feed Attributes
      • Player
        • Configuration
          • Appearance
      • Video customization
        • Video Factory
        • CTA Button
        • Product cards
      • Events
        • Embed Feed and Storyblock Events
        • Video player events
        • Live stream events
        • Shopping events
      • Shopping Integration (V2)
        • Introduction
        • Shopping APIs
        • Product Hydration
        • Product Factory
        • Cart Sync
        • Tracking
          • Purchase
          • Add to cart
          • Remove from cart
          • Page viewed
        • Shopping Integration FAQ
        • Migrate from V1
      • Web SDK
      • Enhanced Picture-in-Picture
      • Privacy settings
        • Tracking settings
        • Cookies management
        • Content Security Policy
    • Telemetry console
    • Firework Service Domains
    • FAQ & Troubleshooting (Web)
  • Android SDK
    • Integration Guide for Android SDK
      • Getting Started (Android)
      • Video Feed (Android)
        • Video Feed Layouts (Android)
        • Channel Feed (Android)
        • Discover Feed (Android)
        • Playlist Feed (Android)
        • Dynamic Content Feed
        • Channel Hashtags Feed
        • Sku Feed
        • Single Content Feed
        • Configure Video Feed
      • Customization
        • CTA
      • Analytics (Android)
      • Shoppable Videos (Android)
        • Product Hydration
      • Live Stream Support (Android)
      • Video Player (Android)
      • StoryBlock (Android)
      • Share & Video Deep linking
      • Ad Support (Android)
      • Configure Video Advertisements Source (Android)
      • In-app Language Switches
      • Compose support(Android)
    • Sample App (Android)
    • FAQ & Troubleshooting (Android)
    • Changelog (Android)
  • iOS SDK
    • Integration Guide for iOS SDK
      • Getting Started (iOS)
      • ATT compliance (iOS)
      • Video Feed (iOS)
        • Discover Feed(iOS)
        • Channel Feed (iOS)
        • Playlist Feed (iOS)
        • Playlist Group Feed (iOS)
        • Dynamic Content (iOS)
        • Hashtag Playlist (iOS)
        • SKU Playlist (iOS)
        • Video Ads (iOS)
        • Video Feed Layouts (iOS)
      • Story Block (iOS)
      • Customization (iOS)
        • Video feed configurations (iOS)
        • Player configurations (iOS)
        • Shopping configurations (iOS)
          • Customize product card on videos using the custom view (iOS)
        • Customize click behaviors (iOS)
      • Shopping (iOS)
      • Live Stream Support (iOS)
      • Analytics (iOS)
      • Share & Deeplinking(iOS)
      • Ad Support (iOS)
    • Sample App (iOS)
    • FAQ & Troubleshooting (iOS)
    • Changelog (iOS)
  • React Native SDK
    • Integration Guide for React Native SDK V2
      • Getting Started (React Native)
      • ATT compliance React Native (iOS)
      • Video Feed (React Native)
      • Story Block (React Native)
      • Customization (React Native)
        • Video feed configurations (React Native)
        • Player configurations (React Native)
        • Shopping configurations (React Native)
          • Customize product card on videos using the custom view (React Native)
        • Customize click behaviors (React Native)
      • Shopping (React Native)
      • Live Stream Support (React Native)
      • Ad Support (React Native)
      • Analytics (React Native)
      • App-level Language Setting (React Native)
      • Share & Video Deeplinking (React Native)
      • Android Style (React Native)
      • Inject Android Image Loader (React Native)
      • Integrate SDKs in Hybrid React Native and native Apps
      • Reference (React Native)
      • Sample App (React Native)
      • FAQ & Troubleshooting (React Native)
      • Changelog (React Native)
  • Flutter SDK
    • Integration Guide for Flutter SDK V2
      • Getting Started (Flutter)
      • ATT compliance Flutter (iOS)
      • Video Feed (Flutter)
      • Story Block (Flutter)
      • Customization (Flutter)
        • Video feed configurations (Flutter)
        • Player configurations (Flutter)
        • Shopping configurations (Flutter)
          • Customize product card on videos using the custom view (Flutter)
        • Customize click behaviors (Flutter)
      • Live Stream Support (Flutter)
      • Shopping (Flutter)
      • Ad Support (Flutter)
      • Analytics (Flutter)
      • App-level Language Setting (Flutter)
      • Share & Video Deeplinking (Flutter)
      • Inject Android Image Loader (Flutter)
      • Android Style (Flutter)
      • Integrate SDKs in Hybrid Flutter and native Apps
      • Reference (Flutter)
      • Sample App (Flutter)
      • FAQ & Troubleshooting (Flutter)
      • Changelog (Flutter)
  • Help Articles
    • Importing Products to Firework
    • Adding products to a video
    • Displaying product videos on product pages using hashtag filtering(Web)
    • Syncing Carts
    • Encoded IDs
Powered by GitBook
On this page
  • Android
  • Picture in Picture(PIP) cannot be closed normally when killing the application in Android 11
  • Out of JVM Memory
  • Gradle plugin version is larger than 4.1.x
  • Use JDK11 and Gradle 7.x.
  • minCompileSdk = 31
  • Okhttp version issue
  • Glide version issue
  • Natively started activity is closed when launching RN app from desktop icon on Android
  • popNativeContainer vs startFloatingPlayer
  • Don't use popNativeContainer when PiP is enabled(enablePictureInPicture is true)
  • Don't use startFloatingPlayer when PiP is disabled(enablePictureInPicture is false)
  • How to enable PiP?

Was this helpful?

  1. React Native SDK
  2. Integration Guide for React Native SDK V2

FAQ & Troubleshooting (React Native)

Android

Picture in Picture(PIP) cannot be closed normally when killing the application in Android 11

class MainActivity: ... {

  // ...

  override fun onDestroy() {
    super.onDestroy()
    ...
    
    // Please add this line to your MainActivity
    // We call FireworkSdk.closePip inside FWReactNativeSDK.INSTANCE.closePip
    FWReactNativeSDK.INSTANCE.closePip()
  }
}

Out of JVM Memory

Gradle build daemon has been stopped: JVM garbage collector thrashing and after running out of JVM memory. Add the following configuration to the file: gradle.properties.

...
org.gradle.jvmargs=-Xmx4g

Gradle plugin version is larger than 4.1.x

If your Gradle plugin version is larger than com.android.tools.build:gradle:4.1.x. Please set the compileSdkVersion = 31 and targetSdkVersion = 31 . And add the following configuration to the file: src/main/AndroidManifest.xml .

<manifest>
  ...
  <application>
    ...
    <activity
      android:name=".MainActivity"
      ...
      android:exported="true" // sdk version 31
    >
      ...
    </activity>
  </application>
</manifest>

Use JDK11 and Gradle 7.x.

If you want to use JDK11 and Gradle 7.x. Please do:

  1. JAVA_HOME = JDK11 (system env)

  2. classpath("com.android.tools.build:gradle:7.x.x") (build.gradle)

  3. distributionUrl=https://services.gradle.org/distributions/gradle-7.x-all.zip (gradle-wrapper.properties)

  4. And change the following configuration in the file: app/firework.gradle .

android {
  ...
  compileOptions {
    sourceCompatibility JavaVersion.VERSION_11
    targetCompatibility JavaVersion.VERSION_11
  }
  ...
}

minCompileSdk = 31

  • If you met the issue like below:

> The minCompileSdk (31) specified in a
        dependency's AAR metadata (META-INF/com/android/build/gradle/aar-metadata.properties)
        is greater than this module's compileSdkVersion (android-30).
        Dependency: androidx.lifecycle:lifecycle-viewmodel-ktx:2.4.0.

Please do:

configurations.all {
  resolutionStrategy {
    ...
    force 'androidx.work:work-runtime-ktx:2.2.0'
    force 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.2.0'
  }
}

Maybe your compileSdkVersion = 30 and targetSdkVersion = 30 , your Gradle is below 6.9-all and the Gradle plugin is com.android.tools.build:gradle:4.1.x .

Okhttp version issue

If you met the issue like below:

/data/app/com.thesouledstore-1b4KZ7kSaE_DlLmco_iLxQ==/base.apk!classes5.dex)
2022-02-25 21:06:33.506 16304-18932/? E/com.newrelic.android: TransactionStateUtil: Attempting to convert network exception java.io.IOException to error code.
2022-02-25 21:06:33.508 16304-18932/? E/AndroidRuntime: FATAL EXCEPTION: OkHttp Dispatcher
    Process: com.thesouledstore, PID: 16304
    java.lang.NoSuchMethodError: No static method delimiterOffset(Ljava/lang/String;IILjava/lang/String;)I in class Lokhttp3/internal/Util; or its super classes (declaration of 'okhttp3.internal.Util' appears in /data/app/com.thesouledstore-1b4KZ7kSaE_DlLmco_iLxQ==/base.apk!classes5.dex)

Maybe your okhttp version is 3.x.x . Please do:

Solution: force the version to your app/firework.gradle file, like below:

configurations.all {
  resolutionStrategy {
    ...
    force 'com.squareup.okhttp3:okhttp:3.12.12'
    force 'com.squareup.okhttp3:logging-interceptor:3.12.12'
    force 'com.squareup.okhttp3:okhttp-urlconnection:3.12.12'
  }
}

Glide version issue

Glide issue: if you met the issue like below:

GeneratedAppGlideModuleImpl is implemented incorrectly. 
If you've mannually implemented this class, remove your implementation. 
The Annotation processor will generate a correct implementation.
(FastImageViewManager.java:xxx)

Maybe your react-native-fast-image version is >7.x.x and <8.1.4 . Please do:

Solution 1: add the excludeAppGlideModule = true to your android/build.gradle file, like below:

buildscript {
    ...
    ext {
        excludeAppGlideModule = true
        ...
    }
    ...
}

Solution 2(recommended): upgrade the react-native-fast-image version to >= 8.1.4

Natively started activity is closed when launching RN app from desktop icon on Android

Please do:

  1. Remove the android:launchMode="singleTask" from AndroidManifest.xml

  2. Build a release APK or build a debug APK with bundleInDebug=true

project.ext.react = [
  bundleInDebug: true,  // just for exporting an apk, if you want link codes to metro(npm start), please change it to false
  // enableHermes: false,  // clean and rebuild if changing
  entryFile: "index.tsx",
]

popNativeContainer vs startFloatingPlayer

  1. popNativeContainer is used to close the current full-screen player. We only support using this API when PiP is disabled(enablePictureInPicture is false).

  2. startFloatingPlayer is used to make the current full-screen player into the floating player. We only support using this API when PiP is enabled(enablePictureInPicture is true).

Don't use popNativeContainer when PiP is enabled(enablePictureInPicture is true)

If you use popNativeContainer when PiP is enabled(enablePictureInPicture is true), it will cause inconsistent behavior between iOS and Android. This inconsistent behavior is:

  1. No effect on iOS

  2. The full-screen player is closed on Android

Don't use startFloatingPlayer when PiP is disabled(enablePictureInPicture is false)

If you use startFloatingPlayer when PiP is disabled(enablePictureInPicture is false), it will have no effect on iOS and Android.

How to enable PiP?

The PiP is disabled by default. You can refer to the following links to learn how to enable PiP.

PreviousSample App (React Native)NextChangelog (React Native)

Last updated 2 months ago

Was this helpful?

https://docs.firework.com/home/react-native-sdk/integration-guide-v2/video-feed#enable-pip-picture-in-picture
https://docs.firework.com/home/react-native-sdk/integration-guide-v2/story-block#enable-pip-picture-in-picture
https://docs.firework.com/home/react-native-sdk/integration-guide-v2/share#enable-pip-picture-in-picture-when-opening-the-video-player