Fastlane frameit screenshots on Android

Question

Using fastlane with frameit and detox to run tests and take screenshots on ios and android devices for my react native application (https://dev.to/jeevankishore/e2e-detox-react-native-161o)

iOS works fine and is able to build, run the simulator, grab screenshots, and frame them with an iPhone 11.

Android builds and grabs the screenshots from the simulator but when I run fastlane frameit it is not framing my android screenshots. I tried a few simulators (pixel 3 xl and 3a) but keep getting:

Unsupported screen size [1440, 2960] for path './screenshots/SCREENSHOT.png' (pixel 3 xl dimensions) and Unsupported screen size [1080, 2220] for path './screenshots/SCREENSHOT.png (pixel 3a dimensions)

Confused because it says in the offsets list for frameit that the pixel 3 xl device is supported? I am finding it difficult to locate information on the supported devices. What I am doing wrong here.

https://fastlane.github.io/frameit-frames/latest/offsets.json

I have run fastlane frameit download_frames

For reference:

.detoxrc.json

  "testRunner": "jest",
  "runnerConfig": "e2e/config.json",
  "configurations": {
    "ios": {
      "type": "ios.simulator",
      "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/APP.app",
      "build": "xcodebuild -workspace ios/APP.xcworkspace -scheme APP -configuration Release  -sdk iphonesimulator -derivedDataPath ios/build",
      "device": {
        "type": "iPhone 11"
      }
    },
    "android.emu.debug": {
      "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk",
      "build": "cd android && ./gradlew app:assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
      "type": "android.emulator",
      "device": {
        "avdName": "Pixel_3_XL_API_29"
      }
    },
    "android.emu.release": {
      "binaryPath": "android/app/build/outputs/apk/release/app-release.apk",
      "build": "cd android && ./gradlew app:assembleRelease assembleAndroidTest -DtestBuildType=release && cd ..",
      "type": "android.emulator",
      "device": {
        "avdName": "Pixel_3_XL_API_29"
      }
    }
  }
}

Framefile.json

{
  "device_frame_version": "latest",
  "default": {
    "background": "./background.jpg",
    "keyword": {
      "font": "../../assets/fonts/Lato-Black.ttf",
      "font_size": 124,
      "font_weight": 900,
      "color": "#FFF"
    },
    "title": {
      "font": "../../assets/fonts/LatoBold.ttf",
      "font_weight": 400,
      "font_size": 36,
      "color": "#D72429"
    },
    "title_min_height": "52%",
    "padding": 50,
    "interline_spacing": -2,
    "show_complete_frame": false,
    "stack_title": true
  },
  "data": [
    {
      "filter": "SCREENSHOT",
      "title": {
        "text": "More text here"
      },
      "keyword": {
        "text": "Text"
      }
    }
  ]
}

Answer 1

I've ran into the same issue and the error occurs because the 'device frames' require a particular screenshot resolution.

If you look at the source for Frameit here: https://github.com/fastlane/fastlane/blob/e874a47c6e2e0e61590a03d3b71e75e5a505d1ce/frameit/lib/frameit/device.rb#L70

# no device detected - show error and return nil
  UI.user_error!("Unsupported screen size #{size} for path '#{path}'")

Further up, there is some logic in that file that gets the dimensions of the width of the screenshot and compares it to the Device dimensions in the file here: https://github.com/fastlane/fastlane/blob/e874a47c6e2e0e61590a03d3b71e75e5a505d1ce/frameit/lib/frameit/device_types.rb#L79

You'll need to check the dimensions of your screenshots and ensure they match a frame within the Devices file.