Skip to content

Commit fea88df

Browse files
RichardLindhoutRichardLindhout
committed
feat: use safe-area context fixes #215 
1 parent d678e7c commit fea88df

14 files changed

+525
-582
lines changed

‎package.json‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,25 +51,26 @@
5151
"@react-native-community/eslint-config": "^3.1.0",
5252
"@release-it/conventional-changelog": "^5.1.0",
5353
"@types/color": "^3.0.3",
54-
"@types/jest": "^28.1.8",
55-
"@types/react": "^18.0.17",
56-
"@types/react-native": "^0.69.5",
54+
"@types/jest": "^29.2.4",
55+
"@types/react": "^18.0.26",
56+
"@types/react-native": "^0.70.8",
5757
"babel-loader": "^8.2.5",
5858
"commitlint": "^17.0.3",
5959
"eslint": "^8.22.0",
6060
"eslint-config-prettier": "^8.5.0",
6161
"eslint-plugin-prettier": "^4.2.1",
62-
"expo-cli": "^6.0.5",
62+
"expo-cli": "^6.0.8",
6363
"husky": "^8.0.1",
6464
"jest": "^29.0.0",
6565
"pod-install": "^0.1.38",
6666
"prettier": "^2.7.1",
6767
"react": "^18.2.0",
68-
"react-native": "^0.69.5",
68+
"react-native": "^0.70.6",
6969
"react-native-builder-bob": "^0.18.3",
70-
"react-native-paper": "^5.0.0-rc.6",
70+
"react-native-paper": "^5.0.2",
71+
"react-native-safe-area-context": "^4.4.1",
7172
"release-it": "^15.4.0",
72-
"typescript": "^4.7.4"
73+
"typescript": "^4.9.4"
7374
},
7475
"peerDependencies": {
7576
"react": "*",

‎src/Date/DatePickerModalContentHeader.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
import * as React from 'react'
22
import { View, StyleSheet } from 'react-native'
3-
import { IconButton, Text, useTheme } from 'react-native-paper'
3+
import { IconButton, MD2Theme, Text, useTheme } from 'react-native-paper'
44
import type { ModeType } from './Calendar'
55
import type { LocalState } from './DatePickerModalContent'
66
import { useHeaderTextColor } from '../utils'
77
import Color from 'color'
88
import { getTranslation } from '../translations/utils'
9-
import type {
10-
Fonts,
11-
MD3Typescale,
12-
} from 'react-native-paper/lib/typescript/types'
139

1410
export interface HeaderPickProps {
1511
moreLabel?: string
@@ -71,11 +67,9 @@ export default function DatePickerModalContentHeader(
7167
const color = useHeaderTextColor()
7268
const allowEditing = mode !== 'multiple'
7369

74-
let textFont = (theme.fonts as Fonts)?.medium
75-
76-
if (theme.isV3) {
77-
textFont = (theme.fonts as MD3Typescale)?.bodyLarge
78-
}
70+
let textFont = theme?.isV3
71+
? theme.fonts.bodyLarge
72+
: (theme as any as MD2Theme).fonts.medium
7973

8074
return (
8175
<View style={[styles.header]}>

‎src/Date/DatePickerModalHeader.tsx‎

Lines changed: 42 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import * as React from 'react'
2-
import { Animated, StyleSheet, SafeAreaView } from 'react-native'
2+
import { Animated, StyleSheet } from 'react-native'
33
import { Appbar, Button } from 'react-native-paper'
44

55
import { useHeaderTextColor } from '../utils'
66
import { getTranslation } from '../translations/utils'
7+
import { useSafeAreaInsets } from 'react-native-safe-area-context'
78

89
export interface DatePickerModalHeaderProps {
910
disableSafeTop?: boolean
@@ -22,38 +23,47 @@ export default function DatePickerModalHeader(
2223
const { disableSafeTop, locale, closeIcon = 'close' } = props
2324
const saveLabel = props.saveLabel || getTranslation(locale, 'save')
2425
const color = useHeaderTextColor()
26+
const insets = useSafeAreaInsets()
27+
28+
// safeContent: {
29+
// paddingBottom: 0,
30+
// },
31+
// safeContentNoTop: {
32+
// paddingTop: 0,
33+
// },
34+
2535
return (
26-
<>
27-
<Animated.View style={styles.animated}>
28-
<SafeAreaView
29-
style={[
30-
styles.safeContent,
31-
disableSafeTop && styles.safeContentNoTop,
32-
]}
36+
<Animated.View
37+
style={[
38+
styles.animated,
39+
{
40+
paddingTop: disableSafeTop ? 0 : insets.top,
41+
paddingLeft: insets.left,
42+
paddingRight: insets.right,
43+
},
44+
]}
45+
>
46+
<Appbar style={styles.appbarHeader}>
47+
<Appbar.Action
48+
icon={closeIcon}
49+
accessibilityLabel={getTranslation(locale, 'close')}
50+
onPress={props.onDismiss}
51+
color={color}
52+
testID="react-native-paper-dates-close"
53+
/>
54+
<Appbar.Content title={''} />
55+
<Button
56+
color={color}
57+
textColor={color}
58+
onPress={props.onSave}
59+
disabled={props.saveLabelDisabled || false}
60+
uppercase={props.uppercase || true}
61+
testID="react-native-paper-dates-save"
3362
>
34-
<Appbar style={styles.appbarHeader}>
35-
<Appbar.Action
36-
icon={closeIcon}
37-
accessibilityLabel={getTranslation(locale, 'close')}
38-
onPress={props.onDismiss}
39-
color={color}
40-
testID="react-native-paper-dates-close"
41-
/>
42-
<Appbar.Content title={''} />
43-
<Button
44-
color={color}
45-
textColor={color}
46-
onPress={props.onSave}
47-
disabled={props.saveLabelDisabled || false}
48-
uppercase={props.uppercase || true}
49-
testID="react-native-paper-dates-save"
50-
>
51-
{saveLabel}
52-
</Button>
53-
</Appbar>
54-
</SafeAreaView>
55-
</Animated.View>
56-
</>
63+
{saveLabel}
64+
</Button>
65+
</Appbar>
66+
</Animated.View>
5767
)
5868
}
5969

@@ -62,15 +72,9 @@ const styles = StyleSheet.create({
6272
flex: 1,
6373
},
6474
animated: {
65-
paddingBottom: 0,
6675
elevation: 4,
6776
},
68-
safeContent: {
69-
paddingBottom: 0,
70-
},
71-
safeContentNoTop: {
72-
paddingTop: 0,
73-
},
77+
7478
header: {
7579
height: 75,
7680
alignItems: 'center',

‎src/Date/DatePickerModalHeaderBackground.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
import { Animated, SafeAreaView, StyleSheet } from 'react-native'
1+
import { Animated, StyleSheet } from 'react-native'
22
import * as React from 'react'
33
import { useHeaderBackgroundColor } from '../utils'
4+
import { useSafeAreaInsets } from 'react-native-safe-area-context'
45

56
export default function DatePickerModalHeaderBackground({
67
children,
78
}: {
89
children: any
910
}) {
1011
const backgroundColor = useHeaderBackgroundColor()
11-
12+
const insets = useSafeAreaInsets()
1213
return (
1314
<Animated.View
1415
style={[
1516
styles.animated,
1617
{
1718
backgroundColor,
19+
paddingTop: insets.top,
20+
paddingLeft: insets.left,
21+
paddingRight: insets.right,
1822
},
1923
]}
2024
>
21-
<SafeAreaView style={styles.safeContent}>{children}</SafeAreaView>
25+
{children}
2226
</Animated.View>
2327
)
2428
}
2529

2630
const styles = StyleSheet.create({
2731
animated: {
28-
paddingBottom: 0,
2932
elevation: 4,
3033
},
31-
safeContent: {
32-
paddingBottom: 0,
33-
},
3434
})

‎src/Date/Day.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
import * as React from 'react'
2-
import { Theme, Text, TouchableRipple } from 'react-native-paper'
2+
import { MD2Theme, Text, TouchableRipple } from 'react-native-paper'
33
import { StyleSheet, View } from 'react-native'
44
import DayRange from './DayRange'
55
import { daySize } from './dateUtils'
6-
import type {
7-
Fonts,
8-
MD3Typescale,
9-
} from 'react-native-paper/lib/typescript/types'
6+
7+
import type { PaperTheme } from '../utils'
108

119
function EmptyDayPure() {
1210
return <View style={styles.empty} />
1311
}
1412
export const EmptyDay = React.memo(EmptyDayPure)
1513

1614
function Day(props: {
17-
theme: Theme
15+
theme: PaperTheme
1816
textColorOnPrimary: string
1917
day: number
2018
month: number
@@ -58,11 +56,9 @@ function Day(props: {
5856
const textColor =
5957
selected || (inRange && theme.dark) ? textColorOnPrimary : undefined
6058

61-
let textFont = (theme.fonts as Fonts)?.medium
62-
63-
if (theme.isV3) {
64-
textFont = (theme.fonts as MD3Typescale)?.bodyMedium
65-
}
59+
let textFont = theme?.isV3
60+
? theme.fonts.bodyMedium
61+
: (theme as any as MD2Theme).fonts.medium
6662

6763
return (
6864
<View style={[styles.root, disabled && styles.disabled]}>

‎src/Date/DayName.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
11
import * as React from 'react'
22
import { StyleSheet, View } from 'react-native'
3-
import { Text, Theme, useTheme } from 'react-native-paper'
4-
import type {
5-
Fonts,
6-
MD3Typescale,
7-
} from 'react-native-paper/lib/typescript/types'
3+
import { MD2Theme, Text, useTheme } from 'react-native-paper'
84

95
function DayName({ label }: { label: string }) {
10-
const theme: Theme = useTheme()
6+
const theme = useTheme()
117

12-
let textFont = (theme.fonts as Fonts)?.medium
13-
14-
if (theme.isV3) {
15-
textFont = (theme.fonts as MD3Typescale)?.bodyMedium
16-
}
8+
let textFont = theme?.isV3
9+
? theme.fonts.bodyMedium
10+
: (theme as any as MD2Theme).fonts.medium
1711

1812
return (
1913
<View style={styles.dayName}>

‎src/Date/Month.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import * as React from 'react'
22
import { StyleSheet, View } from 'react-native'
3-
import { IconButton, Text, useTheme, TouchableRipple } from 'react-native-paper'
3+
import {
4+
IconButton,
5+
Text,
6+
useTheme,
7+
TouchableRipple,
8+
MD2Theme,
9+
} from 'react-native-paper'
410
import Day, { EmptyDay } from './Day'
511

612
import {
@@ -29,10 +35,6 @@ import type {
2935
} from './Calendar'
3036
import { dayNamesHeight } from './DayNames'
3137
import { useTextColorOnPrimary } from '../utils'
32-
import type {
33-
Fonts,
34-
MD3Typescale,
35-
} from 'react-native-paper/lib/typescript/types'
3638

3739
interface BaseMonthProps {
3840
locale: undefined | string
@@ -248,11 +250,9 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
248250
date,
249251
])
250252

251-
let textFont = (theme.fonts as Fonts)?.medium
252-
253-
if (theme.isV3) {
254-
textFont = (theme.fonts as MD3Typescale)?.bodyMedium
255-
}
253+
let textFont = theme?.isV3
254+
? theme.fonts.bodyMedium
255+
: (theme as any as MD2Theme).fonts.medium
256256

257257
return (
258258
<View style={[styles.month, { height: getMonthHeight(scrollMode, index) }]}>

‎src/Date/YearPicker.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import * as React from 'react'
22
import { FlatList, StyleSheet, View } from 'react-native'
3-
import { Text, TouchableRipple, useTheme } from 'react-native-paper'
4-
import type {
5-
Fonts,
6-
MD3Typescale,
7-
} from 'react-native-paper/lib/typescript/types'
3+
import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'
84
import { range } from '../utils'
95

106
const ITEM_HEIGHT = 62
@@ -79,11 +75,9 @@ function YearPure({
7975
}) {
8076
const theme = useTheme()
8177

82-
let textFont = (theme.fonts as Fonts)?.medium
83-
84-
if (theme.isV3) {
85-
textFont = (theme.fonts as MD3Typescale)?.bodyLarge
86-
}
78+
let textFont = theme?.isV3
79+
? theme.fonts.bodyLarge
80+
: (theme as any as MD2Theme).fonts.medium
8781

8882
return (
8983
<View style={styles.year}>

‎src/Time/AmPmSwitcher.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import * as React from 'react'
22
import { View, StyleSheet } from 'react-native'
3-
import { Text, Theme, TouchableRipple, useTheme } from 'react-native-paper'
3+
import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'
44
import { useMemo } from 'react'
55
import Color from 'color'
66
import { useSwitchColors } from './timeUtils'
77
import { DisplayModeContext } from './TimePicker'
8-
import type {
9-
Fonts,
10-
MD3Typescale,
11-
} from 'react-native-paper/lib/typescript/types'
128

139
export default function AmPmSwitcher({
1410
onChange,
@@ -79,14 +75,12 @@ function SwitchButton({
7975
selected: boolean
8076
disabled: boolean
8177
}) {
82-
const theme: Theme = useTheme()
78+
const theme = useTheme()
8379
const { backgroundColor, color } = useSwitchColors(selected)
8480

85-
let textFont = (theme.fonts as Fonts)?.medium
86-
87-
if (theme.isV3) {
88-
textFont = (theme.fonts as MD3Typescale)?.bodyMedium
89-
}
81+
let textFont = theme?.isV3
82+
? theme.fonts.bodyMedium
83+
: (theme as any as MD2Theme).fonts.medium
9084

9185
return (
9286
<TouchableRipple

0 commit comments

Comments
 (0)