CODEWITHSUNDEEP
imagereact-nativeios14
Robert Kaločai
Robert Kaločai

Reputation: 181

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

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

Upvotes: 0

Views: 812

Answers (1)

deep141
deep141

Reputation: 11

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.

Upvotes: 1

Related Questions