After rebuilding on v0.70.0 avatars from Google stopped loading

This issue has been tracked since 2022-09-15.

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(R) Core(TM) 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 style={{ color: getColor('p', [18, 14, 15]), fontSize: 12, textAlign: 'right', alignItems: 'flex-end' }}>{dateToLocal(date)}

}`

cortinico wrote this answer on 2022-09-15

And that doesn't work:

Can you clarify what do you mean with 'doesn't work'?

marvanov wrote this answer on 2022-09-15

Oh, sorry )
In the place where the avatar should be, - an empty space

marvanov wrote this answer on 2022-09-15

The link to the avatar is standard from Google-sign-in, and obtained using '@react-native-google-signin/google-signin'
(sample: 'https://lh3.googleusercontent.com/a-/AFdZuco5YkhulxjXcpR-YXEIQZ8r2uc0Ti0di-Bb_fzP=s96-c')

danilobuerger wrote this answer on 2022-09-15

Does it work when you move width and height inside the source object?

<Image resizeMode={'cover'}
source={{ uri: 'https://lh3.googleusercontent.com/a-/AFdZuco5YkhulxjXcpR-YXEIQZ8r2uc0Ti0di-Bb_fzP=s96-c', width: 50, height: 50 }} />
marvanov wrote this answer on 2022-09-16

I tried, but the result is the same
The problem is just with avatars from Google-server for sign-in
I tried moving the avatar to another server and it shows up from there
From another server, the same avatar is displayed:
<Image resizeMode={'cover'} source={{ uri: 'https://wordskills.ru/testAvatar.jpg', width: 50, height: 50 }} />
But from Google-server is empty space
<Image source={{ uri: 'https://lh3.googleusercontent.com/a-/AFdZuco5YkhulxjXcpR-YXEIQZ8r2uc0Ti0di-Bb_fzP=s96-c', width: 50, height: 50 }} />

And i updated project to 0.70.1, but that didn't helped too

marvanov wrote this answer on 2022-09-18

I tried deploy bare project on react-native: "0.70.1" and tried this code:
<Image source={{ uri: 'https://lh3.googleusercontent.com/a-/AFdZuco5YkhulxjXcpR-YXEIQZ8r2uc0Ti0di-Bb_fzP=s96-c', width: 50, height: 50 }} />
And Image doesn't display it. This image link is a standart user logo from Google sign-in

umangloria wrote this answer on 2022-09-20

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.

marvanov wrote this answer on 2022-09-21

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!

More Details About Repo
Owner Name facebook
Repo Name react-native
Full Name facebook/react-native
Language JavaScript
Created Date 2015-01-09
Updated Date 2022-10-03
Star Count 105144
Watcher Count 3666
Fork Count 22469
Issue Count 2232

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date