React-native-code-push: MapView.Marker Image resizes 3x bigger after CodePush

[GonzaloRecioG]

Steps to Reproduce

1. Have a <MapView.marker /> (react-native-maps) and pass an image as a prop:
   image={require("ourproject/src/images/1.png")}

Expected Behavior

Images should maintain same size with and without Codepush update.

Actual Behavior

After Codepush update the MapView images get resized like 3-4x times bigger.

_See screenshots comparison:_
Fresh release without CodePush: 👇

CodePush update: 👇

Environment

• react-native-code-push version: 5.3.2
• react-native version: 0.55 (tested also on 0.50.4)
• iOS/Android/Windows version: Tested on different iOS and Android, same problem.
• Does this reproduce on a debug build or release build?
  Happens on Staging + Production
• Does this reproduce on a simulator, or only on a physical device?
  Both

Thanks! Would be awesome to know how to fix this.

[alexandergoncharov]

Hi @GonzaloRecioG

Thanks for reporting!
Could you please provide some test project with reproducing issue with repo steps? This would really help to understand the reason of the issue and find approach for fixing it.

Thanks,
Alexander

[GonzaloRecioG]

Hi @alexandergoncharov ! thanks for answering.

Unfortunately, we're not able to create a test project (configure react-native-maps + configure react-native-code-push with new keys etc) since it will take several hours and we don't that time right now.

The issue is related only with the prop image of the <MapView.Marker/>, since other local images on the project are not resizing.

Until is fixed, is there any way to 'ignore' assets or certain code to not be updated via code-push? Because we can't use code-push since it makes Maps unusable and we really want to use it.

Thanks again @alexandergoncharov and team!

[GonzaloRecioG]

If it helps: we found that if we pass an <Image/> as a children of the Marker, code-push update doesn't change the size afterwards. The only problem is when using image prop on the marker.

Unfortunately we can not use this since react-native-maps has a known bug that on Android if you pass an <Image/> as a children of the Marker, it doesn't render it, it only works with the image prop.

So we can only use the image prop for rendering marker custom images. Thanks!

[KasparasGud]

+1.
This issue along with the react-native-maps android bug makes code-push not usable for now with projects that use react-native-maps.
Any workarounds warmly welcomed

[alexandergoncharov]

Hi @GonzaloRecioG ,
Sorry for long delay.

About ignoring assets: I'm not sure about ignoring but You can use code-push release command with setting path to file/folder which you would like to release.
For more info please check docs: https://github.com/Microsoft/code-push/tree/master/cli#releasing-updates-general

Thanks,
Alexander

[poojapi]

We are facing same issue.

[NickToropov]

Hi guys,
I reproduced similar issue and was able to fix it by adding @2x and @3x images (as discussed in https://github.com/react-community/react-native-maps/issues/725).

directory structure after adding images:

projectRoot
└ images
  ├ img.png
  ├ [email protected]
  └ [email protected]

For more info about react-native images please check docs: https://facebook.github.io/react-native/docs/images.html

Please, try the solution and let us know if it was helpful.

[PackZhang]

I have got into the same trouble

• react-native-code-push: 5.3.2 (tested also on 5.3.3, 5.2.1)
• react-native: 0.55.4
  

[NickToropov]

Hi @PackZhang, did you try the solution with adding @2x and @3X images as I described here

[PackZhang]

@NickToropov
Thanks for reporting!
I've added @2x and @3X images. it's not helpful.

[NickToropov]

@PackZhang could you please provide us with sample app that reproduces the issue?

[NickToropov]

Hi guys, @PackZhang, @GonzaloRecioG, can anyone create a sample app that reproduces this issue?

[phatlaunchdeck]

I confirm myself having the exact same problem when pushing to Production.

And yes I do have the proper @2x and @3x image files.

Any help would be very much appreciated :D

[NickToropov]

Hi all! I've created a demo app - Issue1276.zip
Please try to play with it:

• extract the zip and go to Issue1276 folder,
• run yarn,
• insert your own YOUR_GOOGLE_MAPS_API_KEY and reactNativeCodePush_androidDeploymentKey keys,
• run react-native run-android or build release apk and install it on device
• publish changes with code-push release-react <AppName> android and update the app on device with Press to sync link.

Expected: image on map should retain its sizes

Please, let me know if the issue is reproduced on the demo or make changes in it to reproduce the issue.

[keung7251]

+1

[NickToropov]

Hi guys, @PackZhang, @GonzaloRecioG, could you let me know if you have a chance to look at my comment above

[phatlaunchdeck]

Hi all! I've created a demo app - Issue1276.zip
Please try to play with it:

@NickToropov Does this one work for iOS as well? Because I copied your code over my project and it still produce the same error on Production of iOS.

[NickToropov]

@phatlaunchdeck, I tested on Android as @GonzaloRecioG specified that issue is reproduced on both Android and iOS. Will test it with iOS and come back a bit later.

[NickToropov]

Hi guys! try to use the following workaround:

class MapMarker extends Component {
  state = {
    initialRender: true
  }
  render() {
    return (
      <MapView.Marker 
        coordinate={this.props.coordinate}>
        <Image
          source={this.props.source}
          onLayout={() => this.setState({ initialRender: false })}
          key={`${this.state.initialRender}`}
        />
      </MapView.Marker>
    )
  }
}

...
<MapView>
  <MapMarker
    coordinate={{
      latitude: 37.78825,
      longitude: -122.4324
    }}
    source={require('./images/1.png')}/>
</MapView>

It should work for both iOS and Android.

Please let me know if it works for you.

[NickToropov]

Hi all, I'll close this issue for now as there is no activity here. If anyone still faces the issue and suggested workaround doesn't solve the problem please reopen this one.

[phatlaunchdeck]

Hi @NickToropov , I tried the above solution with Image component you gave us. It did work on Android but only in Debug mode, not Release.

[deehuey]

Hey, just did a fresh reinstall of our application, and am getting this issue as well.

    "react-native": "0.56.0-rc.3",
    "react-native-maps": "0.21.0",
    "react-native-code-push": "5.3.5",

This is definitely a new bug as it did not happen before our rebuild. I have confirmed i have @2x and @3x respective resolutions of the marker images.

[deehuey]

Okay, so in this thread I see a few people report they have issues with Android-production-only Image marker fix not working.

Now first lemme say I don't like this solution, and hope that this isn't the accepted fix, but a solution that works for me:

In the production build, Android doesn't seem to know that the files are being referenced as source for the marker images when inside a marker component.

        <Image source={require('./icons/emptypin.png')} style={{ width: 0, height: 0 }} />
        <Image source={require('./icons/greenpin.png')} style={{ width: 0, height: 0 }} />
        <Image source={require('./icons/youarehere.png')} style={{ width: 0, height: 0 }} />

Putting every marker we used as a regular ol' image in the app near our map view (anywhere really) gets the job done on Production Android build.

Then on my marker components I was able to reference them as usual:

      <Marker onPress={this.handlePress} coordinate={coordinate}>
        <ImageBackground style={{ width: 30, height: 30 }} source={icons[active ? 'active' : 'inactive']}>
          <Text style={styles.text} white={!active}>{children}</Text>
        </ImageBackground>
      </Marker>

Both the ImageBackground component and the Image component seemed to work 👌

[sercanov]

I also having this problem with following usage;

<MapView.Marker image={require('Assets/Images/pin.png')} />

"react-native-code-push": "^5.3.5"

[sercanov]

Any development or workarounds ?

I tried with bundling manually without assets and releasing update with --update-contents-path but that removed all images from app.

[EvianZhow]

Might related to images' resizeMode: 'center' property. Encountered this issue and removed this style props work for me.

[yuri-kulikov]

Hi @GonzaloRecioG, @sercanov, @deehuey,
I've created a simple app to reproduce the issue _(only iOS side)_: simpleMap.zip
And then I've tried to use one workaround from another similar issue, and it works!

My Steps to reproduce:

1. Unzip the archive
2. cd ./simpleMap
3. yarn
4. cd ios
5. pod install
6. code-push app add simpleMap-ios ios react-native
7. Copy the Staging deployment key and paste it in /simpleMap/ios/simpleMap/Info.plist:
   XML <key>CodePushDeploymentKey</key> <string>PUT_YOUR_DEPLOYMENT_KEY_HERE</string>
8. Open /simpleMap/ios/simpleMap.xcworkspace with Xcode
9. Go to Edit Scheme..., change Build Configuration to Release
10. Go to the project settings and set the Signing team in simpleMap and simpleMapTests targets
11. Run the project
    (_Optional_) If you have this problem:
    Error: Cannot find module '@babel/runtime/helpers/builtin/interopRequireDefault'
    you can fix it by this:
    Shell cd /simpleMap/ yarn add @babel/runtime
12. If everything is ok you'll see map with a marker (_normal size_) on it.
13. Made a change in App.js
<Text style={styles.welcome}>Simple Map v2</Text>
14. code-push release-react simpleMap-ios ios
15. Click on the button Press to sync
16. Press Install in dialog, app will be reloaded. Marker is huge now!

Solution:

1. Go to /simpleMap/node_modules/react-native/React/Base/RCTUtils.m
2. Replace _(line ~715)_:
   Objective-C image = [UIImage imageWithData:fileData];
   with the following:
   Objective-C CGFloat scale = 1.0; if ([[imageURL absoluteString] hasSuffix: @"@3x.png"]) { scale = 3.0; } else if ([[imageURL absoluteString] hasSuffix: @"@2x.png"]) { scale = 2.0; } image = [UIImage imageWithData:fileData scale: scale];
   _(It works only for .png)_
3. Run the app again
4. Made a change in App.js
<Text style={styles.welcome}>Simple Map v3</Text>
5. code-push release-react simpleMap-ios ios
6. Click on the button Press to sync
7. Press Install in dialog, app will be reloaded.
   Marker is normal now!

Can you guys try this solution and reply if it helped?

[sercanov]

Hi @yuri-kulikov

I tried the solution and it worked perfectly. Thanks. Is there any open PR or discussion on react-native side ?

P.S. I also used patch-package to simplify the patching process

[yuri-kulikov]

Hi @sercanov,
Sadly we couldn’t find any similar issues in the react-native repo, and we are also unable to reproduce this bug without codepush in order to create an issue in their repo.

[NickToropov]

Hi guys! I'm going to close this issue for now as it's not related to CodePush and there is a workaround provided by @yuri-kulikov.

[MichielDeMey]

Hey guys, a fix has been merged into master in the React Native project.
(cfr. https://github.com/facebook/react-native/issues/22383 & https://github.com/facebook/react-native/pull/23446)

You can create a patch file from the following diff: https://patch-diff.githubusercontent.com/raw/facebook/react-native/pull/23446.diff