Android release bug - Does not work with require(...)

[EricLewe]

disclaimer and guidance for devs new to this repo: I believe many of us try to validate OS repos are applicable for our use case before we invest more time in it. 2 vital pieces of information to solve issues in android release is to: (1) specify a higher maxSize, this can solve your issues in release mode if images are very big see #49 , (2) the insight below, an elaborated illustration based on This post

Describe the bug When marking multiple images onto an image without setting filenames the rendering will not behave correctly. I had issues both with scaling and offset x, y not being applied correctly in release build.

To Reproduce Not working

async notWorking() {
      let obtainedUri = require('<RN-repo>/assets/images/background.png') // regularly put in shared code base
      let obtainedUri2 = require('<RN-repo>/assets/images/marker.png') // regularly put in shared code base
      try {
        let path1 = await Marker.markImage({
          src: obtainedUri,
          markerSrc: obtainedUri2, // icon uri
          X: offset.x, // left
          Y: offset.y, // top
          scale: 1, // scale of bg
          markerScale: 1, // scale of icon
          quality: 100, // quality of image
          maxSize: 2048 * 26, // put high to eliminate this source of error, consider minimizing it
          filename: 'temp1',
        })
      }  catch(err) {
        console.error(err);
      }
}

Working

async working() {
      let obtainedUri = await this.castFileToBase64('images/background.png') // file is put  in android assets
      let obtainedUri2 = await this.castFileToBase64('images/marker.png') // file is put in android assets
      try {
        let path1 = await Marker.markImage({
          src: obtainedUri,
          markerSrc: obtainedUri2, // icon uri
          X: offset.x, // left
          Y: offset.y, // top
          scale: 1, // scale of bg
          markerScale: 1, // scale of icon
          quality: 100, // quality of image
          maxSize: 2048 * 26, // put high to eliminate this source of error, consider minimizing it
          filename: 'temp1',
        })
      }  catch(err) {
        console.error(err);
      }
}

Expected behavior Proper scaling and offset on marked images when using require.

Devlopment environment:

• react-native: 0.63.3
• react-native-image-marker : 6.1.0

Smartphone:

• Device: Nokia 6 and Samsung S10
• OS: Android10

Additional context Occurs in release

[reyalpsirc]

I'm also having this issue

[reyalpsirc]

Actually, it works for me. My issue was regarding the Y offset that I had which worked for iOS but not on Android. As soon as I set both X and Y to 0, it worked

[alihusnain252]

hey can you share the code for this.castFileToBase64('images/background.png') method?

[EricLewe]

hey can you share the code for this.castFileToBase64('images/background.png') method?

async castFileToBase64(androidPath: any) {
  return new Promise((resolve, reject) => {
    RNFetchBlob.fs.readFile(RNFetchBlob.fs.asset(androidPath), 'base64').then( content => {
      resolve('data:image/png;base64,' + content);
    })

  });
}

Used RNFetchBlob from 'rn-fetch-blob'