Skip to content

Commit 5d75614

Browse files
Inbal-TishM-i-k-e-l
Inbal-Tish
and
M-i-k-e-l
authored
Image - pass width and height to image style (#2384)
* Image - pass width and height to image style * apply only if size prop passed * updating screenshot tests - Avatar and Button * removing 'cover' condition and removing 'style' from example * update Button snapshot tests * Avatar screen - update snapshot tests Co-authored-by: M-i-k-e-l <[email protected]>
1 parent 14a5e70 commit 5d75614

File tree

4 files changed

+78
-19
lines changed

4 files changed

+78
-19
lines changed

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

Lines changed: 40 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -819,7 +819,6 @@ exports[`AvatarScreen renders screen 1`] = `
819819
"width": 50,
820820
}
821821
}
822-
height={50}
823822
onError={[Function]}
824823
source={
825824
Object {
@@ -830,6 +829,10 @@ exports[`AvatarScreen renders screen 1`] = `
830829
Array [
831830
undefined,
832831
undefined,
832+
Object {
833+
"height": 50,
834+
"width": 50,
835+
},
833836
undefined,
834837
undefined,
835838
undefined,
@@ -856,7 +859,6 @@ exports[`AvatarScreen renders screen 1`] = `
856859
]
857860
}
858861
testID="undefined.image"
859-
width={50}
860862
/>
861863
<View
862864
accessibilityLabel="badge"
@@ -1049,7 +1051,6 @@ exports[`AvatarScreen renders screen 1`] = `
10491051
"width": 40,
10501052
}
10511053
}
1052-
height={40}
10531054
onError={[Function]}
10541055
source={
10551056
Object {
@@ -1060,6 +1061,10 @@ exports[`AvatarScreen renders screen 1`] = `
10601061
Array [
10611062
undefined,
10621063
undefined,
1064+
Object {
1065+
"height": 40,
1066+
"width": 40,
1067+
},
10631068
undefined,
10641069
undefined,
10651070
undefined,
@@ -1086,7 +1091,6 @@ exports[`AvatarScreen renders screen 1`] = `
10861091
]
10871092
}
10881093
testID="undefined.image"
1089-
width={40}
10901094
/>
10911095
<View
10921096
accessibilityLabel="badge"
@@ -1290,7 +1294,6 @@ exports[`AvatarScreen renders screen 1`] = `
12901294
accessibilityRole="image"
12911295
accessible={false}
12921296
assetGroup="icons"
1293-
height={60}
12941297
onError={[Function]}
12951298
onLoad={[Function]}
12961299
source={
@@ -1302,6 +1305,10 @@ exports[`AvatarScreen renders screen 1`] = `
13021305
Array [
13031306
undefined,
13041307
undefined,
1308+
Object {
1309+
"height": 60,
1310+
"width": 60,
1311+
},
13051312
undefined,
13061313
undefined,
13071314
undefined,
@@ -1333,7 +1340,6 @@ exports[`AvatarScreen renders screen 1`] = `
13331340
]
13341341
}
13351342
testID="undefined.image"
1336-
width={60}
13371343
/>
13381344
</View>
13391345
</View>
@@ -1460,7 +1466,6 @@ exports[`AvatarScreen renders screen 1`] = `
14601466
"width": 70,
14611467
}
14621468
}
1463-
height={70}
14641469
onError={[Function]}
14651470
source={
14661471
Object {
@@ -1471,6 +1476,10 @@ exports[`AvatarScreen renders screen 1`] = `
14711476
Array [
14721477
undefined,
14731478
undefined,
1479+
Object {
1480+
"height": 70,
1481+
"width": 70,
1482+
},
14741483
undefined,
14751484
undefined,
14761485
undefined,
@@ -1497,7 +1506,6 @@ exports[`AvatarScreen renders screen 1`] = `
14971506
]
14981507
}
14991508
testID="undefined.image"
1500-
width={70}
15011509
/>
15021510
<View
15031511
accessibilityLabel="badge"
@@ -1690,7 +1698,6 @@ exports[`AvatarScreen renders screen 1`] = `
16901698
"width": 60,
16911699
}
16921700
}
1693-
height={60}
16941701
onError={[Function]}
16951702
source={
16961703
Object {
@@ -1701,6 +1708,10 @@ exports[`AvatarScreen renders screen 1`] = `
17011708
Array [
17021709
undefined,
17031710
undefined,
1711+
Object {
1712+
"height": 60,
1713+
"width": 60,
1714+
},
17041715
undefined,
17051716
undefined,
17061717
undefined,
@@ -1727,7 +1738,6 @@ exports[`AvatarScreen renders screen 1`] = `
17271738
]
17281739
}
17291740
testID="undefined.image"
1730-
width={60}
17311741
/>
17321742
<View
17331743
accessibilityLabel="badge"
@@ -1823,6 +1833,10 @@ exports[`AvatarScreen renders screen 1`] = `
18231833
Array [
18241834
null,
18251835
undefined,
1836+
Object {
1837+
"height": undefined,
1838+
"width": undefined,
1839+
},
18261840
undefined,
18271841
undefined,
18281842
undefined,
@@ -1962,7 +1976,6 @@ exports[`AvatarScreen renders screen 1`] = `
19621976
"width": 48,
19631977
}
19641978
}
1965-
height={48}
19661979
onError={[Function]}
19671980
source={
19681981
Object {
@@ -1973,6 +1986,10 @@ exports[`AvatarScreen renders screen 1`] = `
19731986
Array [
19741987
undefined,
19751988
undefined,
1989+
Object {
1990+
"height": 48,
1991+
"width": 48,
1992+
},
19761993
undefined,
19771994
undefined,
19781995
undefined,
@@ -1999,7 +2016,6 @@ exports[`AvatarScreen renders screen 1`] = `
19992016
]
20002017
}
20012018
testID="undefined.image"
2002-
width={48}
20032019
/>
20042020
</View>
20052021
</View>
@@ -2162,7 +2178,6 @@ exports[`AvatarScreen renders screen 1`] = `
21622178
"width": 50,
21632179
}
21642180
}
2165-
height={50}
21662181
onError={[Function]}
21672182
onLoadEnd={[Function]}
21682183
onLoadStart={[Function]}
@@ -2175,6 +2190,10 @@ exports[`AvatarScreen renders screen 1`] = `
21752190
Array [
21762191
undefined,
21772192
undefined,
2193+
Object {
2194+
"height": 50,
2195+
"width": 50,
2196+
},
21782197
undefined,
21792198
undefined,
21802199
undefined,
@@ -2201,7 +2220,6 @@ exports[`AvatarScreen renders screen 1`] = `
22012220
]
22022221
}
22032222
testID="undefined.image"
2204-
width={50}
22052223
/>
22062224
</View>
22072225
</View>
@@ -2364,7 +2382,6 @@ exports[`AvatarScreen renders screen 1`] = `
23642382
"width": 50,
23652383
}
23662384
}
2367-
height={50}
23682385
onError={[Function]}
23692386
onLoadEnd={[Function]}
23702387
onLoadStart={[Function]}
@@ -2377,6 +2394,10 @@ exports[`AvatarScreen renders screen 1`] = `
23772394
Array [
23782395
undefined,
23792396
undefined,
2397+
Object {
2398+
"height": 50,
2399+
"width": 50,
2400+
},
23802401
undefined,
23812402
undefined,
23822403
undefined,
@@ -2403,7 +2424,6 @@ exports[`AvatarScreen renders screen 1`] = `
24032424
]
24042425
}
24052426
testID="undefined.image"
2406-
width={50}
24072427
/>
24082428
</View>
24092429
</View>
@@ -2529,7 +2549,6 @@ exports[`AvatarScreen renders screen 1`] = `
25292549
"width": 50,
25302550
}
25312551
}
2532-
height={50}
25332552
onError={[Function]}
25342553
source={
25352554
Object {
@@ -2540,6 +2559,10 @@ exports[`AvatarScreen renders screen 1`] = `
25402559
Array [
25412560
undefined,
25422561
undefined,
2562+
Object {
2563+
"height": 50,
2564+
"width": 50,
2565+
},
25432566
undefined,
25442567
undefined,
25452568
undefined,
@@ -2566,7 +2589,6 @@ exports[`AvatarScreen renders screen 1`] = `
25662589
]
25672590
}
25682591
testID="undefined.image"
2569-
width={50}
25702592
/>
25712593
</View>
25722594
</View>

‎demo/src/screens/componentScreens/ImageScreen.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,9 @@ class ImageScreen extends Component<{}, State> {
121121
cover={cover}
122122
overlayType={overlayType !== 'none' ? overlayType : undefined}
123123
overlayIntensity={overlayIntensity}
124-
style={!cover && {width: DEFAULT_SIZE, height: DEFAULT_SIZE}}
124+
// style={!cover && {width: DEFAULT_SIZE, height: DEFAULT_SIZE}}
125+
width={!cover ? DEFAULT_SIZE : undefined}
126+
height={!cover ? DEFAULT_SIZE : undefined}
125127
customOverlayContent={this.renderOverlayContent()}
126128
{...{[`margin-${margin}`]: true}}
127129
/>

‎src/components/button/__tests__/__snapshots__/index.spec.js.snap

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -900,6 +900,10 @@ exports[`Button container size should have no padding of button is an icon butto
900900
Array [
901901
undefined,
902902
undefined,
903+
Object {
904+
"height": undefined,
905+
"width": undefined,
906+
},
903907
undefined,
904908
undefined,
905909
undefined,
@@ -1814,6 +1818,10 @@ exports[`Button icon should apply color on icon 1`] = `
18141818
Array [
18151819
undefined,
18161820
undefined,
1821+
Object {
1822+
"height": undefined,
1823+
"width": undefined,
1824+
},
18171825
undefined,
18181826
undefined,
18191827
undefined,
@@ -1871,6 +1879,10 @@ exports[`Button icon should apply color on icon 2`] = `
18711879
Array [
18721880
undefined,
18731881
undefined,
1882+
Object {
1883+
"height": undefined,
1884+
"width": undefined,
1885+
},
18741886
undefined,
18751887
undefined,
18761888
undefined,
@@ -1928,6 +1940,10 @@ exports[`Button icon should include custom iconStyle provided as a prop 1`] = `
19281940
Array [
19291941
undefined,
19301942
undefined,
1943+
Object {
1944+
"height": undefined,
1945+
"width": undefined,
1946+
},
19311947
undefined,
19321948
undefined,
19331949
undefined,
@@ -1990,6 +2006,10 @@ exports[`Button icon should return icon style according to different variations
19902006
Array [
19912007
undefined,
19922008
undefined,
2009+
Object {
2010+
"height": undefined,
2011+
"width": undefined,
2012+
},
19932013
undefined,
19942014
undefined,
19952015
undefined,
@@ -2047,6 +2067,10 @@ exports[`Button icon should return icon style according to different variations
20472067
Array [
20482068
undefined,
20492069
undefined,
2070+
Object {
2071+
"height": undefined,
2072+
"width": undefined,
2073+
},
20502074
undefined,
20512075
undefined,
20522076
undefined,
@@ -2109,6 +2133,10 @@ exports[`Button icon should return icon style according to different variations
21092133
Array [
21102134
undefined,
21112135
undefined,
2136+
Object {
2137+
"height": undefined,
2138+
"width": undefined,
2139+
},
21122140
undefined,
21132141
undefined,
21142142
undefined,
@@ -3111,6 +3139,10 @@ exports[`Button labelColor should return undefined color if this is an icon butt
31113139
Array [
31123140
undefined,
31133141
undefined,
3142+
Object {
3143+
"height": undefined,
3144+
"width": undefined,
3145+
},
31143146
undefined,
31153147
undefined,
31163148
undefined,

‎src/components/image/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,8 @@ class Image extends PureComponent<Props, State> {
208208
const {
209209
tintColor,
210210
style,
211+
width,
212+
height,
211213
supportRTL,
212214
cover,
213215
aspectRatio,
@@ -228,6 +230,7 @@ class Image extends PureComponent<Props, State> {
228230
style={[
229231
tintColor && {tintColor},
230232
shouldFlipRTL && styles.rtlFlipped,
233+
{width, height},
231234
cover && styles.coverImage,
232235
this.isGif() && styles.gifImage,
233236
aspectRatio && {aspectRatio},

0 commit comments

Comments
 (0)