After rebuilding on v0.70.0 avatars from Google stopped loading

Description

It worked on v0.68.2, but not work on v0.70.0

This is how it works:

<Image style={{ width: 50, height: 50 }} resizeMode={'cover'}
source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }} />

And that doesn’t work:

<Image style={{ width: 50, height: 50 }} resizeMode={'cover'}
source={{ uri: 'https://lh3.googleusercontent.com/a-/AFdZuco5YkhulxjXcpR-YXEIQZ8r2uc0Ti0di-Bb_fzP=s96-c', }} />

In search of a solution, I tried to use:

• Avatar from ‘react-native-paper’
• Image from react-native
• Fresco
• react-native-fast-image

All solutions failed. Any clue how to resolve this issue? Thanks!

Version

0.70.0

Output of npx react-native info

System: OS: Windows 10 10.0.19043 CPU: (12) x64 Intel® Core™ i7-9750H CPU @ 2.60GHz Memory: 958.02 MB / 7.82 GB Binaries: Node: 16.17.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD npm: 7.18.1 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: Not Found IDEs: Android Studio: Not Found Visual Studio: Not Found Languages: Java: 1.8.0_292 npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.0 => 0.70.0 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

import { Image } from ‘react-native’ <Image style={{ width: 50, height: 50 }} source={{ uri: ‘https://lh3.googleusercontent.com/a-/AFdZuco5YkhulxjXcpR-YXEIQZ8r2uc0Ti0di-Bb_fzP=s96-c’, }} />

Snack, code example, screenshot, or link to a repository

`import React, { useState, useContext } from ‘react’; import { Pressable, View, StyleSheet, Text, Image } from ‘react-native’ import { Surface } from ‘react-native-paper’ import watermelonSync from ‘…/database/watermelonSync’ import UserGroups from ‘…/groups/userGroups’ import { dateToLocal } from ‘…/services’ import { Theme } from ‘…/contexts’ export default ({ user, startWordSelection }) => { const { getColor, currentTint } = useContext(Theme) const [isOpened, setOpened] = useState(false) const [wasSynced, setSynced] = useState(false)

const styles = StyleSheet.create({
    userLink: {
        color: getColor('p', [21, 9, 9]), fontSize: 17,
        paddingLeft: 14, // borderColor: colors.s[10], borderWidth: 1,
    },
    userLinkWrapper: {
        backgroundColor: getColor('p', [8, 27, 31]),
        borderColor: getColor('p', [11, 31, 33]), borderRadius: 11, borderWidth: 1,
        flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center',
        paddingVertical: 9, marginBottom: 14, marginHorizontal: '3%'
    }
})
return <><Pressable onPress={async () => {
    if (user._raw.id == global.deviceSettings.user_id) return //TODO проверить чтоб не себя //TODO ПРОВЕРИТЬ
    if (!wasSynced) watermelonSync(global.db, user)
    setSynced(true)
    setOpened(!isOpened)
}} >
    <Surface style={styles.userLinkWrapper} elevation={currentTint === 2 ? 1 : 5}>
        <Image source={{ uri: 'https://lh3.googleusercontent.com/a-/AFdZuco5YkhulxjXcpR-YXEIQZ8r2uc0Ti0di-Bb_fzP=s96-c', }} style={{ width: 50, height: 50 }} resizeMode={'cover'} />
        <Image source={{ uri: user._raw.photo }} style={{ width: 50, height: 50 }} resizeMode={'cover'} />
        <View style={{ flex: 2 }} >
            <Text style={styles.userLink}>{user.name}</Text>
            <Text style={{ fontSize: 11, paddingLeft: 14, color: getColor('p', [15, 11, 14]) }}>Слов {user._raw.has_words}</Text>
        </View>
        <View style={{
            flex: 1, marginRight: 10, //borderColor: colors.t[10], borderWidth: 1,
            height: '100%', alignItems: 'flex-end',
        }} >
            <DateField title='Визит' date={user.lastVisitAt} />
            <View style={{ flex: 1 }} />
            <DateField title='Присоединился' date={user.createdAt} />
        </View>
    </Surface></Pressable>
    {isOpened && <UserGroups userId={user._raw.id} startWordSelection={startWordSelection} />}
</>

} const DateField = ({ title, date }) => { const { getColor } = useContext(Theme) return <View style={{ flexDirection: ‘row’, bottom: 0, alignItems: ‘flex-end’, }}> <Text style={{ color: getColor(‘p’, [15, 14, 15]), fontSize: 10, textAlign: ‘right’, }}>{title} </Text> <Text style={{ color: getColor(‘p’, [18, 14, 15]), fontSize: 12, textAlign: ‘right’, alignItems: ‘flex-end’ }}>{dateToLocal(date)}</Text> </View> }`

[marvanov]

I found a problem, it’s a sanctions against the country from which the avatars are not loaded. And when checing links to avatars in the browser, they were loaded from cash. My problem is that i live in country with bad politics. To get out of the situation, I will place a script in the backend that will download the avatars to the backend-server and upload them to the application from it Thanks all for participanting!

[umangloria]

I am also facing the same issue. however, I am still on 0.69.5, And I am trying to load images from google books urls. Edit: I am able to fix the issue, On debugging I found that the actual url that Image component is using is http so I manually replaced http with https and images are now loading fine.