After rebuilding on v0.70.0 avatars from Google stopped loading

This issue has been created 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-07
Star Count 105180
Watcher Count 3671
Fork Count 22481
Issue Count 2230

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
При переключении маркеров выскакивает ошибка 2 2021-08-26 2022-07-10
kcov integration question issue. 2 2021-07-09 2022-09-26
Support larger QR-Codes 10 2021-07-06 2022-08-15
Trying to get in touch regarding a security issue 1 2021-08-13 2022-10-03
Can seem to build static linked binaries 4 2018-09-25 2022-09-15
Jenkins marian-regression-tests #655 failed 2 2021-12-16 2022-08-23
Consider binding `void*` as `number` 0 2022-05-22 2022-07-10
Missing typescript definitions for functions that accept `current` - style references 0 2022-05-22 2022-08-28
[New Model] <Jia2022LAS-AT> 4 2022-03-22 2022-08-21
ChoParquetWriter.Write(IDataReader dr) duplicates the last IDataReader result in resulting Parquet file 3 2022-05-10 2022-09-02
CSV Append Putting New Record Next to Previous Last Record, No End of Line Added 2 2022-04-24 2022-09-02
Toolkit Doesn't Detect UnSupported C# Version or Doesn't work on C# 8 7 2022-08-10 2022-09-10
[BUG] Guide Bonus Section: Connect to Zeus outdated 4 2022-02-13 2022-08-31
Basic example Remix 1.3.3 project fails to render with "Error: Invalid hook call" error message 5 2022-03-26 2022-09-06
Error while laoding shared libraries: libtinfow.so.6 7 2018-08-19 2022-09-03
Split into a "cavalib" library for use in other applications? 12 2019-02-02 2022-10-02
Share comparison in ASCII table 0 2019-06-13 2022-09-19
🐛 TimePicker rebuild 0 2022-07-25 2022-09-10
"results as zip" not respecting the redirect to indexer setting 0 2021-10-04 2022-10-02
[Question] ModuleNotFoundError: No module named 'pandera' when inside FastAPI 2 2021-09-10 2022-09-28
GraphQL client type provider arguments explanation 1 2021-03-12 2022-09-13
今天突然启动不了了,不知道是什么原因 1 2021-11-06 2022-01-15
Vue 3 conditional rendering 1 2022-04-30 2022-09-26
Always store full channel positions after each channel add/remove/position change 0 2022-03-10 2022-09-27
Restructure access tokens into its own table 0 2022-03-15 2022-07-23
Few improvements on OAuth2GenericAuthenticator 0 2022-07-11 2022-09-18
Numeric precision should not be 131089 1 2021-06-23 2022-09-25
ReactorEventStorageEngine 1 2020-09-21 2022-08-15
Any way to get full referrers? 2 2021-12-10 2022-10-03
datetime instance is changed when used in function argument ... 1 2022-05-26 2022-08-29
[Gallery][Android] NavigationBar-Top Header(Close Icon, Bell, Share and Search Icon) is missing for sample page. 1 2022-05-17 2022-10-02
[Bug]: Closed tab reopens at the top of tab tray 4 2021-08-03 2022-10-02
Excel duplicates and replaces formulas within a column. 7 2021-09-01 2022-09-15
api.Document.caretPositionFromPoint - my Safari and Chrome browsers can use that function but the compatibility list says they can't 1 2022-08-24 2022-09-04
There are two extra pricing tiers in the list when creating an advanced web app 3 2021-05-07 2022-09-11
Invariant Violation: ART has been removed from React Native 4 2020-10-01 2022-09-24
[Discussion] Form Highlights & Section Messages. 5 2022-05-10 2022-10-05
Require explicit assignment of prog arrays in `LoadAndAssign` 0 2021-08-05 2022-09-29
Initial connect failure does not allow reuse of object 0 2021-10-12 2022-09-26
NullPointerException in Xerces when Match.transform() doesn't produce any nodes 0 2019-09-19 2022-09-07
AWS::RDS::DBProxy - Auth entries as separate resource 2 2021-04-30 2022-10-07
Is there any sample for virtual audio cable driver? 1 2022-01-25 2022-09-27
480i no longer working under fkms 5 2021-09-17 2022-09-25
advancedsettings.xml setting cleanonupdate no longer works 0 2022-08-03 2022-08-27
Custom season name not appearing 0 2022-08-05 2022-08-27
unable to login 9 2021-06-01 2022-01-22
vue.runtime.esm.js:2872 Uncaught (in promise) TypeError: Cannot read properties of null (reading '$vnode') 1 2022-09-14 2022-09-30
Docs example uses access(String) with authorizeHttpRequests() 1 2022-05-27 2022-09-15
if we give 2 for thread parameter, will it select both the threads from same core of cpu? 1 2021-12-08 2022-09-30
"The connection is closed" errors in System.Data.SqlClient - Async operations 2 2022-02-23 2022-10-02