MapView.Marker Image resizes 3x bigger after CodePush #1276

gonzaloreciog · 2018-05-10T12:23:26Z

Steps to Reproduce

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.

The text was updated successfully, but these errors were encountered:

alexandergoncharov-zz · 2018-05-10T15:36:49Z

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 · 2018-05-11T07:37:26Z

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 · 2018-05-11T12:55:59Z

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 · 2018-05-12T20:02:53Z

+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-zz · 2018-05-15T15:33:05Z

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

parthsad · 2018-05-18T12:52:08Z

We are facing same issue.

NickToropov · 2018-05-18T13:27:07Z

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

directory structure after adding images:

projectRoot
└ images
  ├ img.png
  ├ img@2x.png
  └ img@3x.png

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 · 2018-05-23T12:52:21Z

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 · 2018-05-23T14:59:07Z

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

PackZhang · 2018-05-24T02:16:52Z

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

NickToropov · 2018-05-24T10:16:38Z

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

NickToropov · 2018-05-29T07:06:58Z

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

phatlaunchdeck · 2018-05-31T23:04:31Z

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 · 2018-06-04T09:32:45Z

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 · 2018-06-12T09:52:42Z

+1

NickToropov · 2018-06-13T10:42:16Z

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

phatlaunchdeck · 2018-06-13T10:44:59Z

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 · 2018-06-13T11:19:41Z

@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 · 2018-06-18T12:06:39Z

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 · 2018-06-25T07:45:53Z

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 · 2018-06-27T06:42:49Z

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 · 2018-07-04T17:32:15Z

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 · 2018-07-04T18:46:47Z

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 · 2018-07-07T14:24:16Z

I also having this problem with following usage;

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

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

sercanov · 2018-07-09T15:58:43Z

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 · 2018-07-20T08:31:38Z

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

yuri-kulikov · 2018-09-26T13:43:28Z

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:

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

Solution:

Go to /simpleMap/node_modules/react-native/React/Base/RCTUtils.m

Replace (line ~715):

image = [UIImage imageWithData:fileData];

with the following:

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)

Run the app again
Made a change in App.js
<Text style={styles.welcome}>Simple Map v3</Text>
code-push release-react simpleMap-ios ios
Click on the button Press to sync
Press Install in dialog, app will be reloaded.
Marker is normal now!

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

sercanov · 2018-10-08T07:29:19Z

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 · 2018-10-11T12:57:35Z

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 · 2018-11-09T07:35:52Z

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 · 2019-02-15T10:55:59Z

Hey guys, a fix has been merged into master in the React Native project.
(cfr. facebook/react-native#22383 & facebook/react-native#23446)

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

alexandergoncharov-zz assigned NickToropov May 18, 2018

alexandergoncharov-zz added the bug label May 21, 2018

NickToropov added the waiting-for-clarification label Jun 4, 2018

NickToropov closed this as completed Jun 25, 2018

NickToropov added resolved external and removed waiting-for-clarification labels Jun 25, 2018

NickToropov removed the resolved label Jun 27, 2018

NickToropov reopened this Jun 27, 2018

davidhellsing mentioned this issue Sep 7, 2018

Image component inside Custom Markers and Callouts in Android react-native-maps/react-native-maps#1870

Closed

NickToropov closed this as completed Nov 9, 2018

ascherkus mentioned this issue Nov 22, 2018

Regression: iOS images loaded from filesystem don't respect scaling factor in filename facebook/react-native#22383

Closed

MichielDeMey unassigned NickToropov Feb 15, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MapView.Marker Image resizes 3x bigger after CodePush #1276

MapView.Marker Image resizes 3x bigger after CodePush #1276

gonzaloreciog commented May 10, 2018 •

edited

Loading

alexandergoncharov-zz commented May 10, 2018

gonzaloreciog commented May 11, 2018

gonzaloreciog commented May 11, 2018

KasparasGud commented May 12, 2018

alexandergoncharov-zz commented May 15, 2018

parthsad commented May 18, 2018

NickToropov commented May 18, 2018 •

edited

Loading

PackZhang commented May 23, 2018 •

edited

Loading

NickToropov commented May 23, 2018

PackZhang commented May 24, 2018 •

edited

Loading

NickToropov commented May 24, 2018

NickToropov commented May 29, 2018

phatlaunchdeck commented May 31, 2018

NickToropov commented Jun 4, 2018 •

edited

Loading

keung7251 commented Jun 12, 2018

NickToropov commented Jun 13, 2018

phatlaunchdeck commented Jun 13, 2018 •

edited

Loading

NickToropov commented Jun 13, 2018

NickToropov commented Jun 18, 2018 •

edited

Loading

NickToropov commented Jun 25, 2018

phatlaunchdeck commented Jun 27, 2018 •

edited

Loading

deehuey commented Jul 4, 2018

deehuey commented Jul 4, 2018

sercanov commented Jul 7, 2018

sercanov commented Jul 9, 2018

evianzhow commented Jul 20, 2018 •

edited

Loading

yuri-kulikov commented Sep 26, 2018 •

edited

Loading

sercanov commented Oct 8, 2018

yuri-kulikov commented Oct 11, 2018

NickToropov commented Nov 9, 2018

MichielDeMey commented Feb 15, 2019

MapView.Marker Image resizes 3x bigger after CodePush #1276

MapView.Marker Image resizes 3x bigger after CodePush #1276

Comments

gonzaloreciog commented May 10, 2018 • edited Loading

Steps to Reproduce

Expected Behavior

Actual Behavior

Environment

alexandergoncharov-zz commented May 10, 2018

gonzaloreciog commented May 11, 2018

gonzaloreciog commented May 11, 2018

KasparasGud commented May 12, 2018

alexandergoncharov-zz commented May 15, 2018

parthsad commented May 18, 2018

NickToropov commented May 18, 2018 • edited Loading

PackZhang commented May 23, 2018 • edited Loading

NickToropov commented May 23, 2018

PackZhang commented May 24, 2018 • edited Loading

NickToropov commented May 24, 2018

NickToropov commented May 29, 2018

phatlaunchdeck commented May 31, 2018

NickToropov commented Jun 4, 2018 • edited Loading

keung7251 commented Jun 12, 2018

NickToropov commented Jun 13, 2018

phatlaunchdeck commented Jun 13, 2018 • edited Loading

NickToropov commented Jun 13, 2018

NickToropov commented Jun 18, 2018 • edited Loading

NickToropov commented Jun 25, 2018

phatlaunchdeck commented Jun 27, 2018 • edited Loading

deehuey commented Jul 4, 2018

deehuey commented Jul 4, 2018

sercanov commented Jul 7, 2018

sercanov commented Jul 9, 2018

evianzhow commented Jul 20, 2018 • edited Loading

yuri-kulikov commented Sep 26, 2018 • edited Loading

My Steps to reproduce:

Solution:

sercanov commented Oct 8, 2018

yuri-kulikov commented Oct 11, 2018

NickToropov commented Nov 9, 2018

MichielDeMey commented Feb 15, 2019

gonzaloreciog commented May 10, 2018 •

edited

Loading

NickToropov commented May 18, 2018 •

edited

Loading

PackZhang commented May 23, 2018 •

edited

Loading

PackZhang commented May 24, 2018 •

edited

Loading

NickToropov commented Jun 4, 2018 •

edited

Loading

phatlaunchdeck commented Jun 13, 2018 •

edited

Loading

NickToropov commented Jun 18, 2018 •

edited

Loading

phatlaunchdeck commented Jun 27, 2018 •

edited

Loading

evianzhow commented Jul 20, 2018 •

edited

Loading

yuri-kulikov commented Sep 26, 2018 •

edited

Loading