# Inject Android Image Loader (React Native)

You could inject an Android image loader that can be one of the predefined Glide or Picasso or your custom implementation of the `com.firework.imageloading.ImageLoader` interface using your own solution.

#### Inject the Glide

Step 1: add the library dependency inside the `dependencies` block in the `firework.gradle.`

```gradle
dependencies {
  implementation "com.firework.external.imageloading:glide:+"
  ...
}

configurations.all {
  resolutionStrategy.eachDependency { details ->
    ...
    if (details.requested.group == 'com.firework.external.imageloading' && details.requested.name == 'glide') {
      details.useVersion rootProject.ext.get("fwNativeVersion")
    }
  }
}
```

Step 2: add the following codes to the `MainApplication` class

{% tabs %}
{% tab title="Kotlin" %}

```kotlin
import com.firework.imageloading.glide.GlideImageLoaderFactory
import com.fireworksdk.bridge.reactnative.FWReactNativeSDK

class MainApplication: ReactApplication() {
  ...
  
  override fun onCreate() {
    super.onCreate()
    ...
    // before init method
    FWReactNativeSDK.setImageLoader(GlideImageLoaderFactory.createInstance(this))
    FWReactNativeSDK.init(
      this,
      FWSDKInitOptionsModel(videoLaunchBehavior = FWPlayerLaunchBehavior.MuteOnFirstLaunch)
    )
  }
}
```

{% endtab %}

{% tab title="Java" %}

<pre class="language-java"><code class="lang-java">import com.firework.imageloading.glide.GlideImageLoaderFactory;
import com.fireworksdk.bridge.reactnative.FWReactNativeSDK;

public class MainApplication extends Application implements ReactApplication {
<strong>   ...
</strong><strong> 
</strong><strong>  @Override
</strong>  public void onCreate() {
    super.onCreate();
    ...
    // before init method
    FWReactNativeSDK.INSTANCE.setImageLoader(GlideImageLoaderFactory.createInstance(this));
    FWReactNativeSDK.INSTANCE.init(
      this,
      new FWSDKInitOptionsModel(null, FWPlayerLaunchBehavior.MuteOnFirstLaunch)
    );
  }
<strong>}
</strong></code></pre>

{% endtab %}
{% endtabs %}

#### Inject the Picasso

Step 1: add the library dependency inside the `dependencies` block in the `firework.gradle.`

```gradle
dependencies {
  implementation "com.firework.external.imageloading:picasso:+"
  ...
}

configurations.all {
  resolutionStrategy.eachDependency { details ->
    ...
    if (details.requested.group == 'com.firework.external.imageloading' && details.requested.name == 'picasso') {
      details.useVersion rootProject.ext.get("fwNativeVersion")
    }
  }
}
```

Step 2: add the following codes to the `MainApplication` class

{% tabs %}
{% tab title="Kotlin" %}

```kotlin
import com.firework.imageloading.picasso.PicassoImageLoaderFactory
import com.fireworksdk.bridge.reactnative.FWReactNativeSDK

class MainApplication: ReactApplication() {
  ...
  
  override fun onCreate() {
    super.onCreate()
    ...
    // before init method
    FWReactNativeSDK.setImageLoader(PicassoImageLoaderFactory.createInstance(this))
    FWReactNativeSDK.init(
      this,
      FWSDKInitOptionsModel(videoLaunchBehavior = FWPlayerLaunchBehavior.MuteOnFirstLaunch)
    )
  }
}
```

{% endtab %}

{% tab title="Java" %}

<pre class="language-java"><code class="lang-java">import com.firework.imageloading.picasso.PicassoImageLoaderFactory;
import com.fireworksdk.bridge.reactnative.FWReactNativeSDK;

public class MainApplication extends Application implements ReactApplication {
<strong>   ...
</strong><strong> 
</strong><strong>  @Override
</strong>  public void onCreate() {
    super.onCreate();
    ...
    // before init method
    FWReactNativeSDK.INSTANCE.setImageLoader(PicassoImageLoaderFactory.createInstance(this));
    FWReactNativeSDK.INSTANCE.init(
      this,
      new FWSDKInitOptionsModel(null, FWPlayerLaunchBehavior.MuteOnFirstLaunch)
    );
  }
<strong>}
</strong></code></pre>

{% endtab %}
{% endtabs %}