@truewatchtech/react-native-mobile 0.3.15-alpha.1 → 0.4.0-alpha.4

package/android/src/main/java/com/ft/sdk/reactnative/sessionreplay/utils/text/TextViewUtils.java

@@ -0,0 +1,184 @@
+package com.ft.sdk.reactnative.sessionreplay.utils.text;
+
+import android.view.Gravity;
+import android.widget.TextView;
+
+import com.ft.sdk.reactnative.BuildConfig;
+import com.ft.sdk.reactnative.sessionreplay.mappers.Pair;
+import com.ft.sdk.reactnative.sessionreplay.utils.DrawableUtils;
+import com.ft.sdk.reactnative.sessionreplay.utils.ReactViewBackgroundDrawableUtils;
+import com.ft.sdk.reactnative.sessionreplay.utils.ReflectionUtils;
+import com.facebook.react.bridge.ReactContext;
+import com.ft.sdk.sessionreplay.model.Alignment;
+import com.ft.sdk.sessionreplay.model.ShapeBorder;
+import com.ft.sdk.sessionreplay.model.ShapeStyle;
+import com.ft.sdk.sessionreplay.model.TextPosition;
+import com.ft.sdk.sessionreplay.model.TextStyle;
+import com.ft.sdk.sessionreplay.model.TextWireframe;
+import com.ft.sdk.sessionreplay.model.Vertical;
+import com.ft.sdk.sessionreplay.model.Wireframe;
+import com.ft.sdk.sessionreplay.recorder.MappingContext;
+import com.ft.sdk.sessionreplay.utils.InternalLogger;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public abstract class TextViewUtils {
+  protected final ReactContext reactContext;
+  protected final DrawableUtils drawableUtils;
+
+  public TextViewUtils(ReactContext reactContext, DrawableUtils drawableUtils) {
+    this.reactContext = reactContext;
+    this.drawableUtils = drawableUtils;
+  }
+
+  public List<Wireframe> mapTextViewToWireframes(
+    List<Wireframe> wireframes,
+    TextView view,
+    MappingContext mappingContext
+  ) {
+    List<Wireframe> result = new ArrayList<>();
+    float pixelDensity = mappingContext.getSystemInformation().getScreenDensity();
+    for (Wireframe originalWireframe : wireframes) {
+      if (!(originalWireframe instanceof TextWireframe)) {
+        result.add(originalWireframe);
+      } else {
+        result.add(addReactNativeProperties(
+          (TextWireframe) originalWireframe,
+          view,
+          pixelDensity
+        ));
+      }
+    }
+    return result;
+  }
+
+  public TextWireframe addReactNativeProperties(
+    TextWireframe originalWireframe,
+    TextView view,
+    float pixelDensity
+  ) {
+    Pair<ShapeStyle, ShapeBorder> shapeAndBorder = resolveShapeStyleAndBorder(view, pixelDensity);
+    ShapeStyle shapeStyle = shapeAndBorder != null ? shapeAndBorder.first : originalWireframe.getShapeStyle();
+    ShapeBorder border = shapeAndBorder != null ? shapeAndBorder.second : originalWireframe.getBorder();
+
+    Pair<TextStyle, TextPosition> textStyleAndPosition = resolveTextStyleAndPosition(originalWireframe, view, pixelDensity);
+    TextStyle textStyle = textStyleAndPosition != null ? textStyleAndPosition.first : originalWireframe.getTextStyle();
+    TextPosition textPosition = textStyleAndPosition != null ? textStyleAndPosition.second : originalWireframe.getTextPosition();
+
+    // nothing changed, return the original wireframe
+    if (shapeStyle == originalWireframe.getShapeStyle()
+      && border == originalWireframe.getBorder()
+      && textStyle == originalWireframe.getTextStyle()
+      && textPosition == originalWireframe.getTextPosition()) {
+      return originalWireframe;
+    }
+
+    return new TextWireframe(
+      originalWireframe.getId(),
+      originalWireframe.getX(),
+      originalWireframe.getY(),
+      originalWireframe.getWidth(),
+      originalWireframe.getHeight(),
+      originalWireframe.getClip(),
+      shapeStyle,
+      border,
+      originalWireframe.getText(),
+      textStyle,
+      textPosition
+    );
+  }
+
+  protected Pair<TextStyle, TextPosition> resolveTextStyleAndPosition(
+    TextWireframe originalWireframe,
+    TextView view,
+    float pixelDensity
+  ) {
+    if (!reactContext.hasActiveReactInstance()) {
+      return null;
+    }
+    TextStyle textStyle = resolveTextStyle(originalWireframe, pixelDensity, view);
+    if (textStyle == null) return null;
+    Alignment alignment = resolveTextAlignment(view, originalWireframe);
+    TextPosition textPosition = new TextPosition(
+      originalWireframe.getTextPosition() != null ? originalWireframe.getTextPosition().getPadding()
+        : null, alignment
+    );
+    return new Pair<>(textStyle, textPosition);
+  }
+
+  protected Pair<ShapeStyle, ShapeBorder> resolveShapeStyleAndBorder(
+    TextView view,
+    float pixelDensity
+  ) {
+    android.graphics.drawable.Drawable backgroundDrawable = drawableUtils.getReactBackgroundFromDrawable(view.getBackground());
+    if (backgroundDrawable == null) return null;
+    float opacity = view.getAlpha();
+    return drawableUtils.resolveShapeAndBorder(backgroundDrawable, opacity, pixelDensity);
+  }
+
+  protected Alignment resolveTextAlignment(
+    TextView view,
+    TextWireframe textWireframe
+  ) {
+    int gravity = view.getGravity();
+    com.ft.sdk.sessionreplay.model.Horizontal horizontal = textWireframe.getTextPosition() != null && textWireframe.getTextPosition().getAlignment() != null ? textWireframe.getTextPosition().getAlignment().getHorizontal() : null;
+    Vertical vertical;
+    switch (gravity & Gravity.VERTICAL_GRAVITY_MASK) {
+      case Gravity.TOP:
+        vertical = Vertical.TOP;
+        break;
+      case Gravity.CENTER_VERTICAL:
+      case Gravity.CENTER:
+        vertical = Vertical.CENTER;
+        break;
+      case Gravity.BOTTOM:
+        vertical = Vertical.BOTTOM;
+        break;
+      default:
+        vertical = Vertical.TOP;
+    }
+    return new Alignment(horizontal, vertical);
+  }
+
+  protected String resolveFontFamily(String typefaceName) {
+    switch (typefaceName) {
+      case ROBOTO_TYPEFACE_NAME:
+        return SANS_SERIF_FAMILY_NAME;
+      case MONOSPACE_FAMILY_NAME:
+        return MONOSPACE_FAMILY_NAME;
+      case SERIF_FAMILY_NAME:
+        return SERIF_FAMILY_NAME;
+      default:
+        return SANS_SERIF_FAMILY_NAME;
+    }
+  }
+
+  protected abstract TextStyle resolveTextStyle(
+    TextWireframe textWireframe,
+    float pixelsDensity,
+    TextView view
+  );
+
+  public static final String TEXT_ATTRIBUTES_FIELD_NAME = "mTextAttributes";
+  public static final String FONT_FAMILY_FIELD_NAME = "mFontFamily";
+  public static final String COLOR_FIELD_NAME = "mColor";
+  public static final String IS_COLOR_SET_FIELD_NAME = "mIsColorSet";
+  public static final String SPANNED_FIELD_NAME = "mSpanned";
+  private static final String ROBOTO_TYPEFACE_NAME = "roboto";
+  private static final String SERIF_FAMILY_NAME = "serif";
+  private static final String SANS_SERIF_FAMILY_NAME = "roboto, sans-serif";
+  public static final String MONOSPACE_FAMILY_NAME = "monospace";
+  public static final String RESOLVE_UIMANAGERMODULE_ERROR = "Unable to resolve UIManagerModule";
+  public static final String RESOLVE_FABRICFIELD_ERROR = "Unable to resolve field from fabric view";
+  public static final String NULL_FABRICFIELD_ERROR = "Null value found when trying to resolve field from fabric view";
+
+  public static TextViewUtils create(ReactContext reactContext, InternalLogger logger) {
+    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+      return new FabricTextViewUtils(reactContext, logger, new ReactViewBackgroundDrawableUtils());
+    } else {
+    return new LegacyTextViewUtils(reactContext, logger, new ReflectionUtils(), new ReactViewBackgroundDrawableUtils());
+    }
+  }
+
+}

package/android/src/main/java/com/ft/sdk/reactnative/utils/ColorUtils.java

@@ -0,0 +1,24 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+package com.ft.sdk.reactnative.utils;
+
+public class ColorUtils {
+    private static final int HEX_COLOR_INCLUDING_ALPHA_LENGTH = 8;
+
+    public static String formatAsRgba(int backgroundColor) {
+        String colorHexString = Integer.toHexString(backgroundColor);
+        return "#" + convertArgbToRgba(colorHexString);
+    }
+
+    private static String convertArgbToRgba(String hexString) {
+        if (hexString.length() == HEX_COLOR_INCLUDING_ALPHA_LENGTH) {
+            return hexString.substring(2, 8) + hexString.substring(0, 2);
+        } else {
+            return hexString;
+        }
+    }
+}

package/android/src/newarch/java/com/ft/sdk/reactnative/FTSessionReplayModule.java

@@ -0,0 +1,30 @@
+package com.ft.sdk.reactnative;
+
+import androidx.annotation.NonNull;
+import com.facebook.react.turbomodule.core.interfaces.TurboModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReadableMap;
+
+@ReactModule(name = FTSessionReplayModule.NAME)
+public class FTSessionReplayModule extends NativeFTSessionReplaySpec  {
+  public static final String NAME = FTSessionReplayImpl.NAME;
+  private final FTSessionReplayImpl impl = new FTSessionReplayImpl();
+
+  public FTSessionReplayModule(ReactApplicationContext reactContext) {
+    super(reactContext);
+  }
+
+  @Override
+  public String getName() {
+    return NAME;
+  }
+
+  @Override
+  @ReactMethod
+  public void sessionReplayConfig(ReadableMap context, Promise promise) {
+    impl.sessionReplayConfig(context, promise, getReactApplicationContext());
+  }
+}

package/android/src/oldarch/java/com/ft/sdk/reactnative/FTSessionReplayModule.java

@@ -0,0 +1,25 @@
+package com.ft.sdk.reactnative;
+
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.ReadableMap;
+
+public class FTSessionReplayModule extends ReactContextBaseJavaModule {
+  private final FTSessionReplayImpl impl = new FTSessionReplayImpl();
+
+  public FTSessionReplayModule(ReactApplicationContext reactContext) {
+    super(reactContext);
+  }
+
+  @Override
+  public String getName() {
+    return FTSessionReplayImpl.NAME;
+  }
+
+  @ReactMethod
+  public void sessionReplayConfig(ReadableMap context, Promise promise) {
+    impl.sessionReplayConfig(context, promise, getReactApplicationContext());
+  }
+}

package/android/src/rn69/java/com/ft/sdk/reactnative/sessionreplay/utils/ReactViewBackgroundDrawableUtils.java

@@ -0,0 +1,100 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+package com.ft.sdk.reactnative.sessionreplay.utils;
+
+import android.graphics.drawable.Drawable;
+import android.graphics.drawable.InsetDrawable;
+import android.graphics.drawable.LayerDrawable;
+
+import com.ft.sdk.reactnative.sessionreplay.mappers.Pair;
+import com.ft.sdk.reactnative.utils.ColorUtils;
+import com.facebook.react.uimanager.Spacing;
+import com.facebook.react.views.view.ReactViewBackgroundDrawable;
+import com.ft.sdk.sessionreplay.model.ShapeBorder;
+import com.ft.sdk.sessionreplay.model.ShapeStyle;
+
+public class ReactViewBackgroundDrawableUtils extends DrawableUtils {
+
+    private static final String COLOR_FIELD_NAME = "mColor";
+
+    public ReactViewBackgroundDrawableUtils() {
+        super();
+    }
+
+    @Override
+    public Pair<ShapeStyle, ShapeBorder> resolveShapeAndBorder(
+            Drawable drawable,
+            float opacity,
+            float pixelDensity) {
+        if (!(drawable instanceof ReactViewBackgroundDrawable)) {
+            return new Pair<>(null, null);
+        }
+
+        ReactViewBackgroundDrawable backgroundDrawable = (ReactViewBackgroundDrawable) drawable;
+        ShapeBorder borderProps = resolveBorder(backgroundDrawable, pixelDensity);
+        long cornerRadius = (long) (backgroundDrawable.getFullBorderWidth() / pixelDensity);
+
+        Integer backgroundColor = getBackgroundColor(backgroundDrawable);
+        String colorHexString = null;
+        if (backgroundColor != null) {
+            colorHexString = ColorUtils.formatAsRgba(backgroundColor);
+        } else {
+            return new Pair<>(null, borderProps);
+        }
+
+        ShapeStyle shapeStyle = new ShapeStyle(
+                colorHexString,
+                opacity,
+                cornerRadius
+        );
+
+        return new Pair<>(shapeStyle, borderProps);
+    }
+
+    @Override
+    public Drawable getReactBackgroundFromDrawable(Drawable drawable) {
+        if (drawable instanceof ReactViewBackgroundDrawable) {
+            return drawable;
+        } else if (drawable instanceof InsetDrawable) {
+            return getReactBackgroundFromDrawable(((InsetDrawable) drawable).getDrawable());
+        } else if (drawable instanceof LayerDrawable) {
+            return getDrawableFromLayerDrawable((LayerDrawable) drawable);
+        } else {
+            return null;
+        }
+    }
+
+    private Drawable getDrawableFromLayerDrawable(LayerDrawable layerDrawable) {
+        for (int layerNumber = 0; layerNumber < layerDrawable.getNumberOfLayers(); layerNumber++) {
+            Drawable layer = layerDrawable.getDrawable(layerNumber);
+            if (layer instanceof ReactViewBackgroundDrawable) {
+                return layer;
+            }
+        }
+        return null;
+    }
+
+    private ShapeBorder resolveBorder(
+            ReactViewBackgroundDrawable backgroundDrawable,
+            float pixelDensity) {
+        long borderWidth = (long) (backgroundDrawable.getFullBorderWidth() / pixelDensity);
+        String borderColor = ColorUtils.formatAsRgba(backgroundDrawable.getBorderColor(Spacing.ALL));
+
+        return new ShapeBorder(
+                borderColor,
+                borderWidth
+        );
+    }
+
+    private Integer getBackgroundColor(ReactViewBackgroundDrawable backgroundDrawable) {
+        Object result = reflectionUtils.getDeclaredField(backgroundDrawable, COLOR_FIELD_NAME);
+        if (result instanceof Integer) {
+            return (Integer) result;
+        }
+        return null;
+    }
+
+}

package/android/src/rn75/java/com/ft/sdk/reactnative/sessionreplay/extensions/LengthPercentageExt.java

@@ -0,0 +1,27 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+package com.ft.sdk.reactnative.sessionreplay.extensions;
+
+import com.facebook.react.uimanager.LengthPercentage;
+
+public final class LengthPercentageExt {
+
+    private LengthPercentageExt() {
+        // Utility class, prevent instantiation
+    }
+
+    /**
+     * Gets the radius value from a LengthPercentage, or returns 0f if the LengthPercentage is null.
+     *
+     * @param lengthPercentage the LengthPercentage to resolve, can be null
+     * @param width the width to resolve against
+     * @param height the height to resolve against
+     * @return the resolved radius value, or 0f if lengthPercentage is null
+     */
+    public static float getRadius(LengthPercentage lengthPercentage, float width, float height) {
+        return lengthPercentage != null ? lengthPercentage.resolve(width, height) : 0f;
+    }
+}

package/android/src/rn75/java/com/ft/sdk/reactnative/sessionreplay/utils/ReactViewBackgroundDrawableUtils.java

@@ -0,0 +1,116 @@
+package com.ft.sdk.reactnative.sessionreplay.utils;
+
+import android.graphics.drawable.Drawable;
+import android.graphics.drawable.InsetDrawable;
+import android.graphics.drawable.LayerDrawable;
+
+import com.ft.sdk.reactnative.sessionreplay.extensions.LengthPercentageExt;
+import com.ft.sdk.reactnative.sessionreplay.mappers.Pair;
+import com.ft.sdk.reactnative.utils.ColorUtils;
+import com.facebook.react.common.annotations.UnstableReactNativeAPI;
+import com.facebook.react.uimanager.Spacing;
+import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable;
+import com.ft.sdk.sessionreplay.model.ShapeBorder;
+import com.ft.sdk.sessionreplay.model.ShapeStyle;
+
+public class ReactViewBackgroundDrawableUtils extends DrawableUtils {
+  private static final String COLOR_FIELD_NAME = "mColor";
+
+  private final ReflectionUtils reflectionUtils;
+
+  public ReactViewBackgroundDrawableUtils() {
+    this(new ReflectionUtils());
+  }
+
+  public ReactViewBackgroundDrawableUtils(ReflectionUtils reflectionUtils) {
+    this.reflectionUtils = reflectionUtils;
+  }
+
+  @UnstableReactNativeAPI
+  @Override
+  public Pair<ShapeStyle, ShapeBorder> resolveShapeAndBorder(
+    Drawable drawable,
+    float opacity,
+    float pixelDensity
+  ) {
+    if (!(drawable instanceof CSSBackgroundDrawable)) {
+      return new Pair<>(null, null);
+    }
+    CSSBackgroundDrawable cssDrawable = (CSSBackgroundDrawable) drawable;
+    ShapeBorder borderProps = resolveBorder(cssDrawable, pixelDensity);
+    Integer backgroundColor = getBackgroundColor(cssDrawable);
+    String colorHexString;
+    if (backgroundColor != null) {
+      colorHexString = ColorUtils.formatAsRgba(backgroundColor);
+    } else {
+      return new Pair<>(null, borderProps);
+    }
+    return new Pair<>(
+      new ShapeStyle(
+        colorHexString,
+        opacity,
+        getBorderRadius(cssDrawable)
+      ),
+      borderProps
+    );
+  }
+
+  @UnstableReactNativeAPI
+  @Override
+  public Drawable getReactBackgroundFromDrawable(Drawable drawable) {
+    if (drawable instanceof CSSBackgroundDrawable) {
+      return drawable;
+    } else if (drawable instanceof InsetDrawable) {
+      return getReactBackgroundFromDrawable(((InsetDrawable) drawable).getDrawable());
+    } else if (drawable instanceof LayerDrawable) {
+      return getDrawableFromLayerDrawable((LayerDrawable) drawable);
+    } else {
+      return null;
+    }
+  }
+
+  @UnstableReactNativeAPI
+  private Drawable getDrawableFromLayerDrawable(LayerDrawable layerDrawable) {
+    for (int layerNumber = 0; layerNumber < layerDrawable.getNumberOfLayers(); layerNumber++) {
+      Drawable layer = layerDrawable.getDrawable(layerNumber);
+      if (layer instanceof CSSBackgroundDrawable) {
+        return layer;
+      }
+    }
+    return null;
+  }
+
+  @UnstableReactNativeAPI
+  private float getBorderRadius(CSSBackgroundDrawable drawable) {
+    float width = (float) drawable.getIntrinsicWidth();
+    float height = (float) drawable.getIntrinsicHeight();
+    if (drawable.getBorderRadius().getUniform() != null) {
+      return LengthPercentageExt.getRadius(drawable.getBorderRadius().getUniform(), width, height);
+    } else {
+      return 0f;
+    }
+  }
+
+  @UnstableReactNativeAPI
+  private Integer getBackgroundColor(CSSBackgroundDrawable backgroundDrawable) {
+    Object value = reflectionUtils.getDeclaredField(
+      backgroundDrawable,
+      COLOR_FIELD_NAME
+    );
+    return value instanceof Integer ? (Integer) value : null;
+  }
+
+  @UnstableReactNativeAPI
+  private ShapeBorder resolveBorder(
+    CSSBackgroundDrawable backgroundDrawable,
+    float pixelDensity
+  ) {
+    long borderWidth = (long) (backgroundDrawable.getFullBorderWidth() / pixelDensity);
+    String borderColor = ColorUtils.formatAsRgba(backgroundDrawable.getBorderColor(Spacing.ALL));
+    return new ShapeBorder(
+      borderColor,
+      borderWidth
+    );
+  }
+
+}

package/android/src/rn76/java/com/ft/sdk/reactnative/sessionreplay/extensions/LengthPercentageExt.java

@@ -0,0 +1,38 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+package com.ft.sdk.reactnative.sessionreplay.extensions;
+
+import com.facebook.react.uimanager.LengthPercentage;
+import com.facebook.react.uimanager.style.CornerRadii;
+
+public final class LengthPercentageExt {
+
+    private LengthPercentageExt() {
+        // Utility class, prevent instantiation
+    }
+
+    /**
+     * Gets the average radius value from a LengthPercentage, or returns 0f if the LengthPercentage is null.
+     * The radius is calculated as the average of horizontal and vertical values.
+     *
+     * @param lengthPercentage the LengthPercentage to resolve, can be null
+     * @param width the width to resolve against
+     * @param height the height to resolve against
+     * @return the average radius value, or 0f if lengthPercentage is null
+     */
+    public static float getRadius(LengthPercentage lengthPercentage, float width, float height) {
+      if (lengthPercentage == null) {
+        return 0f;
+      }
+
+      CornerRadii value = lengthPercentage.resolve(width, height);
+      if (value == null) {
+        return 0f;
+      }
+
+      return (value.getHorizontal() + value.getVertical()) / 2f;
+    }
+}

package/android/src/rn76/java/com/ft/sdk/reactnative/sessionreplay/utils/ReactViewBackgroundDrawableUtils.java

@@ -0,0 +1,117 @@
+package com.ft.sdk.reactnative.sessionreplay.utils;
+
+import android.graphics.drawable.Drawable;
+import android.graphics.drawable.InsetDrawable;
+import android.graphics.drawable.LayerDrawable;
+
+import com.ft.sdk.reactnative.sessionreplay.extensions.LengthPercentageExt;
+import com.ft.sdk.reactnative.sessionreplay.mappers.Pair;
+import com.ft.sdk.reactnative.utils.ColorUtils;
+import com.facebook.react.common.annotations.UnstableReactNativeAPI;
+import com.facebook.react.uimanager.Spacing;
+import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable;
+import com.ft.sdk.sessionreplay.model.ShapeBorder;
+import com.ft.sdk.sessionreplay.model.ShapeStyle;
+
+public class ReactViewBackgroundDrawableUtils extends DrawableUtils {
+  private static final String COLOR_FIELD_NAME = "mColor";
+
+  private final ReflectionUtils reflectionUtils;
+
+  public ReactViewBackgroundDrawableUtils() {
+    this(new ReflectionUtils());
+  }
+
+  public ReactViewBackgroundDrawableUtils(ReflectionUtils reflectionUtils) {
+    this.reflectionUtils = reflectionUtils;
+  }
+
+  @UnstableReactNativeAPI
+  @Override
+  public Pair<ShapeStyle, ShapeBorder> resolveShapeAndBorder(
+    Drawable drawable,
+    float opacity,
+    float pixelDensity
+  ) {
+    if (!(drawable instanceof CSSBackgroundDrawable)) {
+      return new Pair<>(null, null);
+    }
+    CSSBackgroundDrawable cssDrawable = (CSSBackgroundDrawable) drawable;
+    ShapeBorder borderProps = resolveBorder(cssDrawable, pixelDensity);
+    Integer backgroundColor = getBackgroundColor(cssDrawable);
+    String colorHexString;
+    if (backgroundColor != null) {
+      colorHexString = ColorUtils.formatAsRgba(backgroundColor);
+    } else {
+      return new Pair<>(null, borderProps);
+    }
+    return new Pair<>(
+      new ShapeStyle(
+        colorHexString,
+        opacity,
+        getBorderRadius(cssDrawable)
+      ),
+      borderProps
+    );
+  }
+
+  @UnstableReactNativeAPI
+  @Override
+  public Drawable getReactBackgroundFromDrawable(Drawable drawable) {
+    if (drawable instanceof CSSBackgroundDrawable) {
+      return drawable;
+    } else if (drawable instanceof InsetDrawable) {
+      return getReactBackgroundFromDrawable(((InsetDrawable) drawable).getDrawable());
+    } else if (drawable instanceof LayerDrawable) {
+      return getDrawableFromLayerDrawable((LayerDrawable) drawable);
+    } else {
+      return null;
+    }
+  }
+
+  @UnstableReactNativeAPI
+  private Drawable getDrawableFromLayerDrawable(LayerDrawable layerDrawable) {
+    for (int layerNumber = 0; layerNumber < layerDrawable.getNumberOfLayers(); layerNumber++) {
+      Drawable layer = layerDrawable.getDrawable(layerNumber);
+      if (layer instanceof CSSBackgroundDrawable) {
+        return layer;
+      }
+    }
+    return null;
+  }
+
+  @UnstableReactNativeAPI
+  private float getBorderRadius(CSSBackgroundDrawable drawable) {
+    float width = (float) drawable.getIntrinsicWidth();
+    float height = (float) drawable.getIntrinsicHeight();
+
+    if (drawable.getBorderRadius().getUniform() != null) {
+      return LengthPercentageExt.getRadius(drawable.getBorderRadius().getUniform(), width, height);
+    } else {
+      return 0f;
+    }
+  }
+
+  @UnstableReactNativeAPI
+  private Integer getBackgroundColor(CSSBackgroundDrawable backgroundDrawable) {
+    Object value = reflectionUtils.getDeclaredField(
+      backgroundDrawable,
+      COLOR_FIELD_NAME
+    );
+    return value instanceof Integer ? (Integer) value : null;
+  }
+
+  @UnstableReactNativeAPI
+  private ShapeBorder resolveBorder(
+    CSSBackgroundDrawable backgroundDrawable,
+    float pixelDensity
+  ) {
+    long borderWidth = (long) (backgroundDrawable.getFullBorderWidth() / pixelDensity);
+    String borderColor = ColorUtils.formatAsRgba(backgroundDrawable.getBorderColor(Spacing.ALL));
+    return new ShapeBorder(
+      borderColor,
+      borderWidth
+    );
+  }
+
+}