Skip to content

Commit 2cadf61

Browse files
M-i-k-e-lEffanuelethanshar
authored
Avatar - handle SVG image (fix Android crash and red screen) (#2224)
* Avatar - handle SVG image (Android crash and red screen) * Image - handle width and height with ImageBackground * AnimatedImage - move from LayoutAnimation to AnimationStyle (#2223) * AnimatedImage - move from LayoutAnimation to AnimationStyle This is done so we can stop the animation when we choose to (i.e. remove the loader). * Fix snapshots * Added listKey prop to flat list of wheel picker (#2215) * Added listKey prop to flat list of wheel picker * Fix formatting * Change listKey format passed to FlatList Co-authored-by: Ethan Sharabi <[email protected]> * Update snapshot * Remove SvgProps to avoid breaking tsc check Co-authored-by: Juozas Ri <[email protected]> Co-authored-by: Ethan Sharabi <[email protected]>
1 parent 39a4a28 commit 2cadf61

File tree

3 files changed

+33
-3
lines changed

3 files changed

+33
-3
lines changed

‎demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap

+18
Original file line numberDiff line numberDiff line change
@@ -814,6 +814,7 @@ exports[`AvatarScreen renders screen 1`] = `
814814
"width": 50,
815815
}
816816
}
817+
height={50}
817818
onError={[Function]}
818819
source={
819820
Object {
@@ -850,6 +851,7 @@ exports[`AvatarScreen renders screen 1`] = `
850851
]
851852
}
852853
testID="undefined.image"
854+
width={50}
853855
/>
854856
<View
855857
accessibilityLabel="badge"
@@ -1037,6 +1039,7 @@ exports[`AvatarScreen renders screen 1`] = `
10371039
"width": 40,
10381040
}
10391041
}
1042+
height={40}
10401043
onError={[Function]}
10411044
source={
10421045
Object {
@@ -1073,6 +1076,7 @@ exports[`AvatarScreen renders screen 1`] = `
10731076
]
10741077
}
10751078
testID="undefined.image"
1079+
width={40}
10761080
/>
10771081
<View
10781082
accessibilityLabel="badge"
@@ -1271,6 +1275,7 @@ exports[`AvatarScreen renders screen 1`] = `
12711275
accessibilityRole="image"
12721276
accessible={false}
12731277
assetGroup="icons"
1278+
height={60}
12741279
onError={[Function]}
12751280
onLoad={[Function]}
12761281
source={
@@ -1313,6 +1318,7 @@ exports[`AvatarScreen renders screen 1`] = `
13131318
]
13141319
}
13151320
testID="undefined.image"
1321+
width={60}
13161322
/>
13171323
</View>
13181324
</View>
@@ -1439,6 +1445,7 @@ exports[`AvatarScreen renders screen 1`] = `
14391445
"width": 70,
14401446
}
14411447
}
1448+
height={70}
14421449
onError={[Function]}
14431450
source={
14441451
Object {
@@ -1475,6 +1482,7 @@ exports[`AvatarScreen renders screen 1`] = `
14751482
]
14761483
}
14771484
testID="undefined.image"
1485+
width={70}
14781486
/>
14791487
<View
14801488
accessibilityLabel="badge"
@@ -1662,6 +1670,7 @@ exports[`AvatarScreen renders screen 1`] = `
16621670
"width": 60,
16631671
}
16641672
}
1673+
height={60}
16651674
onError={[Function]}
16661675
source={
16671676
Object {
@@ -1698,6 +1707,7 @@ exports[`AvatarScreen renders screen 1`] = `
16981707
]
16991708
}
17001709
testID="undefined.image"
1710+
width={60}
17011711
/>
17021712
<View
17031713
accessibilityLabel="badge"
@@ -1927,6 +1937,7 @@ exports[`AvatarScreen renders screen 1`] = `
19271937
"width": 48,
19281938
}
19291939
}
1940+
height={48}
19301941
onError={[Function]}
19311942
source={
19321943
Object {
@@ -1963,6 +1974,7 @@ exports[`AvatarScreen renders screen 1`] = `
19631974
]
19641975
}
19651976
testID="undefined.image"
1977+
width={48}
19661978
/>
19671979
</View>
19681980
</View>
@@ -2125,6 +2137,7 @@ exports[`AvatarScreen renders screen 1`] = `
21252137
"width": 50,
21262138
}
21272139
}
2140+
height={50}
21282141
onError={[Function]}
21292142
onLoadEnd={[Function]}
21302143
onLoadStart={[Function]}
@@ -2163,6 +2176,7 @@ exports[`AvatarScreen renders screen 1`] = `
21632176
]
21642177
}
21652178
testID="undefined.image"
2179+
width={50}
21662180
/>
21672181
</View>
21682182
</View>
@@ -2325,6 +2339,7 @@ exports[`AvatarScreen renders screen 1`] = `
23252339
"width": 50,
23262340
}
23272341
}
2342+
height={50}
23282343
onError={[Function]}
23292344
onLoadEnd={[Function]}
23302345
onLoadStart={[Function]}
@@ -2363,6 +2378,7 @@ exports[`AvatarScreen renders screen 1`] = `
23632378
]
23642379
}
23652380
testID="undefined.image"
2381+
width={50}
23662382
/>
23672383
</View>
23682384
</View>
@@ -2488,6 +2504,7 @@ exports[`AvatarScreen renders screen 1`] = `
24882504
"width": 50,
24892505
}
24902506
}
2507+
height={50}
24912508
onError={[Function]}
24922509
source={
24932510
Object {
@@ -2524,6 +2541,7 @@ exports[`AvatarScreen renders screen 1`] = `
25242541
]
25252542
}
25262543
testID="undefined.image"
2544+
width={50}
25272545
/>
25282546
</View>
25292547
</View>

‎src/components/avatar/index.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import Image, {ImageProps} from '../image';
2222
import AnimatedImage from '../animatedImage';
2323
import * as AvatarHelper from '../../helpers/AvatarHelper';
2424
import {useThemeProps} from '../../hooks';
25+
import {isSvg} from '../../utils/imageUtils';
2526

2627
export enum BadgePosition {
2728
TOP_RIGHT = 'TOP_RIGHT',
@@ -303,7 +304,8 @@ const Avatar = forwardRef<any, AvatarProps>((props: AvatarProps, ref: React.Forw
303304
const hasImage = !_.isUndefined(_source);
304305

305306
if (hasImage) {
306-
const ImageContainer = animate ? AnimatedImage : Image;
307+
// Looks like reanimated does not support SVG
308+
const ImageContainer = animate && !isSvg(_source) ? AnimatedImage : Image;
307309
return (
308310
<ImageContainer
309311
style={_imageStyle}
@@ -312,6 +314,8 @@ const Avatar = forwardRef<any, AvatarProps>((props: AvatarProps, ref: React.Forw
312314
onLoadEnd={onImageLoadEnd}
313315
onError={onImageLoadError}
314316
testID={`${testID}.image`}
317+
width={size}
318+
height={size}
315319
containerStyle={_baseContainerStyle}
316320
{...imageProps}
317321
/>

‎src/components/image/index.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,14 @@ export type ImageProps = RNImageProps &
8585
* view; i.e. animation related crashes on Android.
8686
*/
8787
useBackgroundContainer?: boolean;
88+
/**
89+
* The image width
90+
*/
91+
width?: string | number;
92+
/**
93+
* The image height
94+
*/
95+
height?: string | number;
8896
};
8997

9098
type Props = ImageProps & ForwardRefInjectedProps & BaseComponentInjectedProps;
@@ -184,11 +192,11 @@ class Image extends PureComponent<Props, State> {
184192
};
185193

186194
renderImageWithContainer = () => {
187-
const {style, cover, modifiers} = this.props;
195+
const {style, cover, modifiers, width, height} = this.props;
188196
const {margins} = modifiers;
189197

190198
return (
191-
<View style={[margins, style, styles.errorImageContainer, cover && styles.coverImage]}>
199+
<View style={[{width, height}, margins, style, styles.errorImageContainer, cover && styles.coverImage]}>
192200
{this.renderImage(true)}
193201
</View>
194202
);

0 commit comments

Comments
 (0)