Skip to content
This repository was archived by the owner on Feb 25, 2020. It is now read-only.

Commit 8fb0da5

Browse files
satya164satya164
committed
fix: fix broken shadows on card
1 parent ec23b74 commit 8fb0da5

File tree

3 files changed

+50
-32
lines changed

3 files changed

+50
-32
lines changed

‎src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@ Array [
7777
Array [
7878
Object {
7979
"flex": 1,
80-
"overflow": "hidden",
8180
},
8281
undefined,
8382
Object {
@@ -101,7 +100,6 @@ Array [
101100
Array [
102101
Object {
103102
"flex": 1,
104-
"overflow": "hidden",
105103
},
106104
Object {
107105
"transform": Array [
@@ -122,16 +120,18 @@ Array [
122120
Array [
123121
Object {
124122
"backgroundColor": "#fff",
125-
"bottom": 0,
126-
"left": 0,
127123
"position": "absolute",
128124
"shadowColor": "#000",
125+
"shadowOpacity": 0.3,
126+
"shadowRadius": 5,
127+
},
128+
Object {
129+
"bottom": 0,
130+
"left": 0,
129131
"shadowOffset": Object {
130132
"height": 1,
131133
"width": -1,
132134
},
133-
"shadowOpacity": 1,
134-
"shadowRadius": 5,
135135
"top": 0,
136136
"width": 3,
137137
},
@@ -230,7 +230,6 @@ Array [
230230
Array [
231231
Object {
232232
"flex": 1,
233-
"overflow": "hidden",
234233
},
235234
undefined,
236235
Object {
@@ -254,7 +253,6 @@ Array [
254253
Array [
255254
Object {
256255
"flex": 1,
257-
"overflow": "hidden",
258256
},
259257
Object {
260258
"transform": Array [
@@ -275,16 +273,18 @@ Array [
275273
Array [
276274
Object {
277275
"backgroundColor": "#fff",
278-
"bottom": 0,
279-
"left": 0,
280276
"position": "absolute",
281277
"shadowColor": "#000",
278+
"shadowOpacity": 0.3,
279+
"shadowRadius": 5,
280+
},
281+
Object {
282+
"bottom": 0,
283+
"left": 0,
282284
"shadowOffset": Object {
283285
"height": 1,
284286
"width": -1,
285287
},
286-
"shadowOpacity": 1,
287-
"shadowRadius": 5,
288288
"top": 0,
289289
"width": 3,
290290
},

‎src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@ Array [
7777
Array [
7878
Object {
7979
"flex": 1,
80-
"overflow": "hidden",
8180
},
8281
undefined,
8382
Object {
@@ -101,7 +100,6 @@ Array [
101100
Array [
102101
Object {
103102
"flex": 1,
104-
"overflow": "hidden",
105103
},
106104
Object {
107105
"transform": Array [
@@ -122,16 +120,18 @@ Array [
122120
Array [
123121
Object {
124122
"backgroundColor": "#fff",
125-
"bottom": 0,
126-
"left": 0,
127123
"position": "absolute",
128124
"shadowColor": "#000",
125+
"shadowOpacity": 0.3,
126+
"shadowRadius": 5,
127+
},
128+
Object {
129+
"bottom": 0,
130+
"left": 0,
129131
"shadowOffset": Object {
130132
"height": 1,
131133
"width": -1,
132134
},
133-
"shadowOpacity": 1,
134-
"shadowRadius": 5,
135135
"top": 0,
136136
"width": 3,
137137
},
@@ -393,7 +393,6 @@ Array [
393393
Array [
394394
Object {
395395
"flex": 1,
396-
"overflow": "hidden",
397396
},
398397
undefined,
399398
Object {
@@ -417,7 +416,6 @@ Array [
417416
Array [
418417
Object {
419418
"flex": 1,
420-
"overflow": "hidden",
421419
},
422420
Object {
423421
"transform": Array [
@@ -438,16 +436,18 @@ Array [
438436
Array [
439437
Object {
440438
"backgroundColor": "#fff",
441-
"bottom": 0,
442-
"left": 0,
443439
"position": "absolute",
444440
"shadowColor": "#000",
441+
"shadowOpacity": 0.3,
442+
"shadowRadius": 5,
443+
},
444+
Object {
445+
"bottom": 0,
446+
"left": 0,
445447
"shadowOffset": Object {
446448
"height": 1,
447449
"width": -1,
448450
},
449-
"shadowOpacity": 1,
450-
"shadowRadius": 5,
451451
"top": 0,
452452
"width": 3,
453453
},

‎src/views/Stack/Card.tsx‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -520,17 +520,23 @@ export default class Card extends React.Component<Props> {
520520
{...this.gestureActivationCriteria()}
521521
>
522522
<Animated.View style={[styles.container, cardStyle]}>
523-
{shadowEnabled && !transparent ? (
523+
{shadowEnabled && shadowStyle && !transparent ? (
524524
<Animated.View
525-
style={[styles.shadow, shadowStyle]}
525+
style={[
526+
styles.shadow,
527+
direction === 'horizontal'
528+
? styles.shadowHorizontal
529+
: styles.shadowVertical,
530+
shadowStyle,
531+
]}
526532
pointerEvents="none"
527533
/>
528534
) : null}
529535
<PointerEventsView
530536
active={active}
531537
progress={this.props.current}
532538
style={[
533-
styles.container,
539+
styles.content,
534540
transparent ? styles.transparent : styles.opaque,
535541
contentStyle,
536542
]}
@@ -549,23 +555,35 @@ export default class Card extends React.Component<Props> {
549555
const styles = StyleSheet.create({
550556
container: {
551557
flex: 1,
558+
},
559+
content: {
560+
flex: 1,
552561
overflow: 'hidden',
553562
},
554563
overlay: {
555564
...StyleSheet.absoluteFillObject,
556565
backgroundColor: '#000',
557566
},
558567
shadow: {
568+
position: 'absolute',
569+
backgroundColor: '#fff',
570+
shadowRadius: 5,
571+
shadowColor: '#000',
572+
shadowOpacity: 0.3,
573+
},
574+
shadowHorizontal: {
559575
top: 0,
560576
left: 0,
561577
bottom: 0,
562578
width: 3,
563-
position: 'absolute',
564-
backgroundColor: '#fff',
565579
shadowOffset: { width: -1, height: 1 },
566-
shadowRadius: 5,
567-
shadowColor: '#000',
568-
shadowOpacity: 1,
580+
},
581+
shadowVertical: {
582+
top: 0,
583+
left: 0,
584+
right: 0,
585+
height: 3,
586+
shadowOffset: { width: 1, height: -1 },
569587
},
570588
transparent: {
571589
backgroundColor: 'transparent',

0 commit comments

Comments
 (0)