React Native Image component not render image from external url on iOS 14

Question

I upgraded to iOS 14 + XCode-beta Version 12 beta 3 and from that moment React Native Image component not render an image from external URL. On Android, the Image component runs still perfectly.

Here is my code on how I calling an image.

const avatarImageUrl = Config.IMAGE_BASE_URL + this.props.data.avatar;

<Image source={{uri: avatarImageUrl}} style={styles.avatarImage}/>

And this is my Config component:

export default Config = {
    API_BASE_URL: 'link-to-api',
    IMAGE_BASE_URL: 'link-to-api',
    
    // date when Realm database is updated with fresh API data and 
    bundled with app
    BUILD_DATE: '2020-06-18',
};

And styles

avatarImage: {
    flex: 3,
    width: '100%',
    height: '100%',
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    backgroundColor: '#cccccc',
    width: "100%",
    marginLeft: 0,
    marginRight: 0,
  },

It's there anyone who has the same problem with React Native on iOS14?

Thaks

Robert

Can you share styles?

İlker
– İlker

2020-07-28 20:03:46 +00:00
Commented Jul 28, 2020 at 20:03 — İlker
– İlker, Commented Jul 28, 2020 at 20:03
@İlker it's now in the edited post.

Robert Kaločai
– Robert Kaločai

2020-07-29 09:57:25 +00:00
Commented Jul 29, 2020 at 9:57 — Robert Kaločai
– Robert Kaločai, Commented Jul 29, 2020 at 9:57

deep141 · Accepted Answer · 2020-10-21 00:33:53Z

1

You can try few things:

A. Use the following package to fix the issue by running:

npm install --save react-native-fix-image

npx react-native-fix-image

Then rebuild project.

Note: each time after reinstalling node_modules you'll have to run npx react-native-fix-image.

B. Upgrade react-native to V0.63.2 then rebuild the project.

I used solution A.

edited Oct 21, 2020 at 0:33

answered Oct 21, 2020 at 0:27

deep141

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Native Image component not render image from external url on iOS 14

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related