# FAQ & Troubleshooting (Flutter)

## Android

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

```kotlin
class MainActivity: ... {

  // ...

  override fun onDestroy() {
    super.onDestroy()
    ...
    
    // Please add this line to your MainActivity
    // We call FireworkSdk.closePip inside FWFlutterSDK.closePip
    FWFlutterSDK.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

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",
]
```

### There is an extra white blank space when the keyboard popup in StoryBlock

<figure><img src="https://688917408-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MLoGG8m6bokS9YTmS7m%2Fuploads%2Fgit-blob-16363592fb3f3dbc10563d13c16c77f20a9e7274%2FXnip2024-09-12_11-28-47.jpg?alt=media" alt="" width="188"><figcaption></figcaption></figure>

Change `resizeToAvoidBottomInset` value(please refer to the following code snippet) in `Scaffold` widget that contains `StoryBlock` widget.

```dart
Scaffold(
  ...
  // Set false on Android and using default value on iOS
  resizeToAvoidBottomInset: defaultTargetPlatform == TargetPlatform.android ? false : null,
  ...
)
```

## 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.

1. <https://docs.firework.com/home/flutter-sdk/integration-guide-v2/video-feed#enable-pip-picture-in-picture>
2. <https://docs.firework.com/home/flutter-sdk/integration-guide-v2/story-block#enable-pip-picture-in-picture>
3. <https://docs.firework.com/home/flutter-sdk/integration-guide-v2/share#enable-pip-picture-in-picture-when-opening-the-video-player>

### When overlaying on the story block, the widget is positioned incorrectly on Android

For example, you embed the story block and custom widgets on the `Stack` widget. The custom widgets may be positioned incorrectly. This is caused by the Flutter rendering system. But we found a solution to fix it. You could add the following section after `StoryBlock` widget in the `Stack` widget children.

```dart
if (defaultTargetPlatform == TargetPlatform.android)
  IgnorePointer(
    child: OverflowBox(
      minWidth: MediaQuery.of(context).size.width,
      maxWidth: MediaQuery.of(context).size.width,
      child: Container(
        color: const Color(0x01000000),
      ),
    ),
  ),
```

The complete codes are as follows:

{% code lineNumbers="true" %}

```dart
Stack(
  alignment: AlignmentDirectional.center,
  children: [
    StoryBlock(
      height: 400,
      source: StoryBlockSource.singleContent,
      contentId: "your encoded video or live stream id",
    ),
    // Add the following widget after StoryBlock widget
    // in the Stack widget children.
    if (defaultTargetPlatform == TargetPlatform.android)
      IgnorePointer(
        child: OverflowBox(
          minWidth: MediaQuery.of(context).size.width,
          maxWidth: MediaQuery.of(context).size.width,
          child: Container(
            color: const Color(0x01000000),
          ),
        ),
      ),
    // Custom widgets
    PositionedDirectional(
      bottom: 24,
      end: 24,
      child: OutlinedButton(
        onPressed: () async {
          //await FireworkSDK.getInstance().navigator.popNativeContainer();
          // onDismissed?.call();
        },
        child: Text(
          "Button Text",
        ),
      ),
    )
  ],
);
```

{% endcode %}