Skip to content

Commit c0474bb

Browse files
davepackbrentvatne
davepack
authored and
brentvatne
committed
SafeAreaView padding from style prop (react-navigation#2889)
* SafeAreaView now adds padding from style object. If height is specified, inset padding is added to height. * Header now only accepts headerStyle prop, backgroundColor works as expected. * TabBarBottom now only accepts style prop, backgroundColor works as expected. Fixes top inset bug. * Update snapshot. * Add clarifying comment. * Support padding with percentage.
1 parent 29ae6f4 commit c0474bb

File tree

10 files changed

+234
-222
lines changed

10 files changed

+234
-222
lines changed

‎docs/api/navigators/StackNavigator.md

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -135,10 +135,6 @@ Style object for the header
135135

136136
Style object for the title component
137137

138-
### `headerBackgroundColor`
139-
140-
Color string that overrides default background color.
141-
142138
#### `headerBackTitleStyle`
143139

144140
Style object for the back title

‎docs/api/navigators/TabNavigator.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,6 @@ Several options get passed to the underlying router to modify navigation logic:
106106
- `inactiveBackgroundColor` - Background color of the inactive tab.
107107
- `showLabel` - Whether to show label for tab, default is true.
108108
- `style` - Style object for the tab bar.
109-
- `backgroundColor` - Color string that overrides default backgroundColor.
110109
- `labelStyle` - Style object for the tab label.
111110
- `tabStyle` - Style object for the tab.
112111
- `allowFontScaling` - Whether label font should scale to respect Text Size accessibility settings, default is true.

‎src/TypeDefinition.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -360,7 +360,6 @@ export type NavigationStackScreenOptions = {|
360360
headerPressColorAndroid?: string,
361361
headerRight?: React.Node,
362362
headerStyle?: ViewStyleProp,
363-
headerBackgroundColor?: string,
364363
gesturesEnabled?: boolean,
365364
gestureResponseDistance?: { vertical?: number, horizontal?: number },
366365
|};

‎src/navigators/__tests__/__snapshots__/DrawerNavigator-test.js.snap

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -94,15 +94,12 @@ exports[`DrawerNavigator renders successfully 1`] = `
9494
<View
9595
onLayout={[Function]}
9696
style={
97-
Array [
98-
undefined,
99-
Object {
100-
"paddingBottom": 0,
101-
"paddingLeft": 0,
102-
"paddingRight": 0,
103-
"paddingTop": 20,
104-
},
105-
]
97+
Object {
98+
"paddingBottom": 0,
99+
"paddingLeft": 0,
100+
"paddingRight": 0,
101+
"paddingTop": 20,
102+
}
106103
}
107104
>
108105
<View
@@ -142,17 +139,13 @@ exports[`DrawerNavigator renders successfully 1`] = `
142139
<View
143140
onLayout={[Function]}
144141
style={
145-
Array [
146-
Object {
147-
"backgroundColor": "rgba(0, 0, 0, .04)",
148-
},
149-
Object {
150-
"paddingBottom": 0,
151-
"paddingLeft": 0,
152-
"paddingRight": 0,
153-
"paddingTop": 20,
154-
},
155-
]
142+
Object {
143+
"backgroundColor": "rgba(0, 0, 0, .04)",
144+
"paddingBottom": 0,
145+
"paddingLeft": 0,
146+
"paddingRight": 0,
147+
"paddingTop": 20,
148+
}
156149
}
157150
>
158151
<View

‎src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap

Lines changed: 102 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -75,77 +75,65 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
7575
/>
7676
</View>
7777
<View
78-
onLayout={[Function]}
79-
style={
80-
Array [
81-
Array [
82-
Object {
83-
"borderBottomColor": "rgba(0, 0, 0, .3)",
84-
"borderBottomWidth": 0.5,
85-
},
86-
Object {
87-
"backgroundColor": "#F7F7F7",
88-
},
89-
],
90-
Object {
91-
"paddingBottom": 0,
92-
"paddingLeft": 0,
93-
"paddingRight": 0,
94-
"paddingTop": 20,
78+
cardStyle={undefined}
79+
collapsable={undefined}
80+
getScreenDetails={[Function]}
81+
headerMode={undefined}
82+
index={0}
83+
layout={
84+
Object {
85+
"height": 0,
86+
"initHeight": 0,
87+
"initWidth": 0,
88+
"isMeasured": false,
89+
"width": 0,
90+
}
91+
}
92+
mode="float"
93+
navigation={
94+
Object {
95+
"dispatch": [Function],
96+
"goBack": [Function],
97+
"navigate": [Function],
98+
"setParams": [Function],
99+
"state": Object {
100+
"index": 0,
101+
"routes": Array [
102+
Object {
103+
"key": "Init-id-0-1",
104+
"routeName": "Home",
105+
},
106+
],
95107
},
96-
]
108+
}
109+
}
110+
router={
111+
Object {
112+
"getActionForPathAndParams": [Function],
113+
"getComponentForRouteName": [Function],
114+
"getComponentForState": [Function],
115+
"getPathAndParamsForState": [Function],
116+
"getScreenConfig": [Function],
117+
"getScreenOptions": [Function],
118+
"getStateForAction": [Function],
119+
}
97120
}
121+
transitionConfig={undefined}
98122
>
99123
<View
100-
cardStyle={undefined}
101-
collapsable={undefined}
102-
getScreenDetails={[Function]}
103-
headerMode={undefined}
104-
index={0}
105-
layout={
106-
Object {
107-
"height": 0,
108-
"initHeight": 0,
109-
"initWidth": 0,
110-
"isMeasured": false,
111-
"width": 0,
112-
}
113-
}
114-
mode="float"
115-
navigation={
116-
Object {
117-
"dispatch": [Function],
118-
"goBack": [Function],
119-
"navigate": [Function],
120-
"setParams": [Function],
121-
"state": Object {
122-
"index": 0,
123-
"routes": Array [
124-
Object {
125-
"key": "Init-id-0-1",
126-
"routeName": "Home",
127-
},
128-
],
129-
},
130-
}
131-
}
132-
router={
133-
Object {
134-
"getActionForPathAndParams": [Function],
135-
"getComponentForRouteName": [Function],
136-
"getComponentForState": [Function],
137-
"getPathAndParamsForState": [Function],
138-
"getScreenConfig": [Function],
139-
"getScreenOptions": [Function],
140-
"getStateForAction": [Function],
141-
}
142-
}
124+
onLayout={[Function]}
143125
style={
144126
Object {
145-
"height": 44,
127+
"backgroundColor": "#F7F7F7",
128+
"borderBottomColor": "rgba(0, 0, 0, .3)",
129+
"borderBottomWidth": 0.5,
130+
"height": 64,
131+
"paddingBottom": 0,
132+
"paddingLeft": 0,
133+
"paddingRight": 0,
134+
"paddingTop": 20,
146135
}
147136
}
148-
transitionConfig={undefined}
149137
>
150138
<View
151139
style={
@@ -315,77 +303,65 @@ exports[`StackNavigator renders successfully 1`] = `
315303
/>
316304
</View>
317305
<View
318-
onLayout={[Function]}
319-
style={
320-
Array [
321-
Array [
322-
Object {
323-
"borderBottomColor": "rgba(0, 0, 0, .3)",
324-
"borderBottomWidth": 0.5,
325-
},
326-
Object {
327-
"backgroundColor": "#F7F7F7",
328-
},
329-
],
330-
Object {
331-
"paddingBottom": 0,
332-
"paddingLeft": 0,
333-
"paddingRight": 0,
334-
"paddingTop": 20,
306+
cardStyle={undefined}
307+
collapsable={undefined}
308+
getScreenDetails={[Function]}
309+
headerMode={undefined}
310+
index={0}
311+
layout={
312+
Object {
313+
"height": 0,
314+
"initHeight": 0,
315+
"initWidth": 0,
316+
"isMeasured": false,
317+
"width": 0,
318+
}
319+
}
320+
mode="float"
321+
navigation={
322+
Object {
323+
"dispatch": [Function],
324+
"goBack": [Function],
325+
"navigate": [Function],
326+
"setParams": [Function],
327+
"state": Object {
328+
"index": 0,
329+
"routes": Array [
330+
Object {
331+
"key": "Init-id-0-0",
332+
"routeName": "Home",
333+
},
334+
],
335335
},
336-
]
336+
}
337+
}
338+
router={
339+
Object {
340+
"getActionForPathAndParams": [Function],
341+
"getComponentForRouteName": [Function],
342+
"getComponentForState": [Function],
343+
"getPathAndParamsForState": [Function],
344+
"getScreenConfig": [Function],
345+
"getScreenOptions": [Function],
346+
"getStateForAction": [Function],
347+
}
337348
}
349+
transitionConfig={undefined}
338350
>
339351
<View
340-
cardStyle={undefined}
341-
collapsable={undefined}
342-
getScreenDetails={[Function]}
343-
headerMode={undefined}
344-
index={0}
345-
layout={
346-
Object {
347-
"height": 0,
348-
"initHeight": 0,
349-
"initWidth": 0,
350-
"isMeasured": false,
351-
"width": 0,
352-
}
353-
}
354-
mode="float"
355-
navigation={
356-
Object {
357-
"dispatch": [Function],
358-
"goBack": [Function],
359-
"navigate": [Function],
360-
"setParams": [Function],
361-
"state": Object {
362-
"index": 0,
363-
"routes": Array [
364-
Object {
365-
"key": "Init-id-0-0",
366-
"routeName": "Home",
367-
},
368-
],
369-
},
370-
}
371-
}
372-
router={
373-
Object {
374-
"getActionForPathAndParams": [Function],
375-
"getComponentForRouteName": [Function],
376-
"getComponentForState": [Function],
377-
"getPathAndParamsForState": [Function],
378-
"getScreenConfig": [Function],
379-
"getScreenOptions": [Function],
380-
"getStateForAction": [Function],
381-
}
382-
}
352+
onLayout={[Function]}
383353
style={
384354
Object {
385-
"height": 44,
355+
"backgroundColor": "#F7F7F7",
356+
"borderBottomColor": "rgba(0, 0, 0, .3)",
357+
"borderBottomWidth": 0.5,
358+
"height": 64,
359+
"paddingBottom": 0,
360+
"paddingLeft": 0,
361+
"paddingRight": 0,
362+
"paddingTop": 20,
386363
}
387364
}
388-
transitionConfig={undefined}
389365
>
390366
<View
391367
style={

‎src/navigators/__tests__/__snapshots__/TabNavigator-test.js.snap

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -65,33 +65,21 @@ exports[`TabNavigator renders successfully 1`] = `
6565
</View>
6666
</View>
6767
<View
68-
onLayout={[Function]}
69-
style={
70-
Array [
71-
Array [
72-
Object {
73-
"borderTopColor": "rgba(0, 0, 0, .3)",
74-
"borderTopWidth": 0.5,
75-
},
76-
Object {
77-
"backgroundColor": "#F7F7F7",
78-
},
79-
],
80-
Object {
81-
"paddingBottom": 0,
82-
"paddingLeft": 0,
83-
"paddingRight": 0,
84-
"paddingTop": 20,
85-
},
86-
]
87-
}
68+
collapsable={undefined}
8869
>
8970
<View
90-
collapsable={undefined}
71+
onLayout={[Function]}
9172
style={
9273
Object {
74+
"backgroundColor": "#F7F7F7",
75+
"borderTopColor": "rgba(0, 0, 0, .3)",
76+
"borderTopWidth": 0.5,
9377
"flexDirection": "row",
9478
"height": 49,
79+
"paddingBottom": 0,
80+
"paddingLeft": 0,
81+
"paddingRight": 0,
82+
"paddingTop": 0,
9583
}
9684
}
9785
>

0 commit comments

Comments
 (0)