Skip to content

Commit 4ac8788

Browse files
RichardLindhoutRichardLindhout
committed
Fixed dark modus for calendar and improve status bar height on iOS
1 parent 8580f3a commit 4ac8788

File tree

12 files changed

+142
-32
lines changed

12 files changed

+142
-32
lines changed

‎example/ios/Podfile‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ target 'example' do
88

99
use_react_native!(:path => config["reactNativePath"])
1010

11+
1112
target 'exampleTests' do
1213
inherit! :complete
1314
# Pods for testing

‎example/ios/Podfile.lock‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -298,7 +298,7 @@ PODS:
298298
- React-jsi (= 0.63.2)
299299
- RNLocalize (1.4.2):
300300
- React-Core
301-
- RNVectorIcons (7.0.0):
301+
- RNVectorIcons (7.1.0):
302302
- React
303303
- Yoga (1.14.0)
304304
- YogaKit (1.18.1):
@@ -466,10 +466,10 @@ SPEC CHECKSUMS:
466466
React-RCTVibration: 4d2e726957f4087449739b595f107c0d4b6c2d2d
467467
ReactCommon: a0a1edbebcac5e91338371b72ffc66aa822792ce
468468
RNLocalize: 452d4118e338dee1e5ca3fac4d5a11a4ab26a46a
469-
RNVectorIcons: da6fe858f5a65d7bbc3379540a889b0b12aa5976
469+
RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59
470470
Yoga: 7740b94929bbacbddda59bf115b5317e9a161598
471471
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
472472

473-
PODFILE CHECKSUM: 311cf87a4a33d759b7ec994ec3735e03d4ededbf
473+
PODFILE CHECKSUM: 53e4f48bb461ee5c681e56f9585d69e13b985966
474474

475475
COCOAPODS: 1.9.3

‎example/ios/example.xcodeproj/project.pbxproj‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -407,13 +407,41 @@
407407
inputPaths = (
408408
"${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-resources.sh",
409409
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
410+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
411+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
412+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Feather.ttf",
413+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf",
414+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf",
415+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf",
416+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf",
417+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Fontisto.ttf",
418+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Foundation.ttf",
419+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf",
410420
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf",
421+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf",
422+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Octicons.ttf",
423+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
424+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
411425
"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
412426
);
413427
name = "[CP] Copy Pods Resources";
414428
outputPaths = (
415429
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf",
430+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf",
431+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EvilIcons.ttf",
432+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Feather.ttf",
433+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome.ttf",
434+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Brands.ttf",
435+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Regular.ttf",
436+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Solid.ttf",
437+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Fontisto.ttf",
438+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Foundation.ttf",
439+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Ionicons.ttf",
416440
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialCommunityIcons.ttf",
441+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialIcons.ttf",
442+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Octicons.ttf",
443+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
444+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
417445
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
418446
);
419447
runOnlyForDeploymentPostprocessing = 0;
@@ -487,13 +515,41 @@
487515
inputPaths = (
488516
"${PODS_ROOT}/Target Support Files/Pods-example-exampleTests/Pods-example-exampleTests-resources.sh",
489517
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
518+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
519+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
520+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Feather.ttf",
521+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf",
522+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf",
523+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf",
524+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf",
525+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Fontisto.ttf",
526+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Foundation.ttf",
527+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf",
490528
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf",
529+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf",
530+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Octicons.ttf",
531+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
532+
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
491533
"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
492534
);
493535
name = "[CP] Copy Pods Resources";
494536
outputPaths = (
495537
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf",
538+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf",
539+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EvilIcons.ttf",
540+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Feather.ttf",
541+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome.ttf",
542+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Brands.ttf",
543+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Regular.ttf",
544+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Solid.ttf",
545+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Fontisto.ttf",
546+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Foundation.ttf",
547+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Ionicons.ttf",
496548
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialCommunityIcons.ttf",
549+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialIcons.ttf",
550+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Octicons.ttf",
551+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
552+
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
497553
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
498554
);
499555
runOnlyForDeploymentPostprocessing = 0;

‎example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"react-dom": "^16.13.1",
3030
"react-native": "0.63.2",
3131
"react-native-localize": "^1.4.1",
32-
"react-native-vector-icons": "https://github.com/RichardLindhout/react-native-vector-icons",
32+
"react-native-vector-icons": "^7.1.0",
3333
"react-native-web": "^0.0.0-80dae21e2",
3434
"react-scripts": "3.4.3"
3535
},

‎example/src/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { AppRegistry } from 'react-native';
22
import App from './App';
33
import { name as appName } from '../app.json';
4-
4+
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
5+
Icon.loadFont();
56
AppRegistry.registerComponent(appName, () => App);

‎example/yarn.lock‎

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8528,11 +8528,36 @@ lodash.flow@^3.5.0:
85288528
resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
85298529
integrity sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=
85308530

8531+
lodash.frompairs@^4.0.1:
8532+
version "4.0.1"
8533+
resolved "https://registry.yarnpkg.com/lodash.frompairs/-/lodash.frompairs-4.0.1.tgz#bc4e5207fa2757c136e573614e9664506b2b1bd2"
8534+
integrity sha1-vE5SB/onV8E25XNhTpZkUGsrG9I=
8535+
8536+
lodash.isequal@^4.5.0:
8537+
version "4.5.0"
8538+
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
8539+
integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
8540+
8541+
lodash.isstring@^4.0.1:
8542+
version "4.0.1"
8543+
resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
8544+
integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=
8545+
85318546
lodash.memoize@^4.1.2:
85328547
version "4.1.2"
85338548
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
85348549
integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
85358550

8551+
lodash.omit@^4.5.0:
8552+
version "4.5.0"
8553+
resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
8554+
integrity sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA=
8555+
8556+
lodash.pick@^4.4.0:
8557+
version "4.4.0"
8558+
resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
8559+
integrity sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=
8560+
85368561
lodash.sortby@^4.7.0:
85378562
version "4.7.0"
85388563
resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -11233,11 +11258,17 @@ react-native-localize@^1.4.1:
1123311258
resolved "https://registry.yarnpkg.com/react-native-localize/-/react-native-localize-1.4.2.tgz#92fc7bb76fa0381c7297b7fa66ee3af0a9bc165e"
1123411259
integrity sha512-LAUFsgcVHHJkU6AYjEDi9e6fJfahrep4IBXPNREKzG9uvHhjXno0Lv8TKNRMzrx6wGntpM/1bxs5pSTstpKllg==
1123511260

11236-
"react-native-vector-icons@https://github.com/RichardLindhout/react-native-vector-icons":
11237-
version "7.0.0"
11238-
resolved "https://github.com/RichardLindhout/react-native-vector-icons#491e9ba431ef6b9cbfecf2410e933bf4e9e86409"
11239-
dependencies:
11240-
lodash "^4.17.15"
11261+
react-native-vector-icons@^7.1.0:
11262+
version "7.1.0"
11263+
resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-7.1.0.tgz#145487d617b2a81d395d2cf64e6e065fcab3a454"
11264+
integrity sha512-V2a1zJ4i+kS8O4j183gIwX14St9AxxXabxwYpFBgRhvr2NDXyFcjHDEAgrOYYlt2W57e20aN1tBDU/I+wn9WtQ==
11265+
dependencies:
11266+
lodash.frompairs "^4.0.1"
11267+
lodash.isequal "^4.5.0"
11268+
lodash.isstring "^4.0.1"
11269+
lodash.omit "^4.5.0"
11270+
lodash.pick "^4.4.0"
11271+
lodash.template "^4.5.0"
1124111272
prop-types "^15.7.2"
1124211273
yargs "^15.0.2"
1124311274

‎src/Date/Calendar.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,12 @@ function Calendar(props: CalendarSingleProps | CalendarRangeProps) {
5757

5858
const theme = useTheme()
5959

60-
const selectColor = useMemo<string>(
61-
() => Color(theme.colors.primary).lighten(0.9).hex(),
62-
[theme]
63-
)
60+
const selectColor = useMemo<string>(() => {
61+
if (theme.dark) {
62+
return Color(theme.colors.primary).hex()
63+
}
64+
return Color(theme.colors.primary).lighten(0.9).hex()
65+
}, [theme])
6466

6567
const detectedScrollMode = mode === 'range' ? 'vertical' : 'horizontal'
6668
const scrollMode = props.scrollMode ? props.scrollMode : detectedScrollMode

‎src/Date/DatePickerModal.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import AnimatedCrossView from './AnimatedCrossView'
1313

1414
import DatePickerModalHeader, { HeaderPickProps } from './DatePickerModalHeader'
1515
import CalendarEdit from './CalendarEdit'
16+
import { useTheme } from 'react-native-paper'
1617

1718
interface DatePickerModalProps extends HeaderPickProps, BaseCalendarProps {
1819
mode: ModeType
@@ -48,6 +49,7 @@ interface DatePickerModalSingleProps
4849
export function DatePickerModal(
4950
props: DatePickerModalRangeProps | DatePickerModalSingleProps
5051
) {
52+
const theme = useTheme()
5153
const dimensions = useWindowDimensions()
5254
const { visible, onDismiss, mode, onChange, onConfirm } = props
5355
const anyProps = props as any
@@ -98,14 +100,14 @@ export function DatePickerModal(
98100
visible={visible}
99101
onRequestClose={onDismiss}
100102
presentationStyle="overFullScreen"
101-
statusBarTranslucent
102103
>
103104
<>
104105
<View style={[StyleSheet.absoluteFill, styles.modalBackground]} />
105106
<View style={[StyleSheet.absoluteFill, styles.modalRoot]}>
106107
<View
107108
style={[
108109
styles.modalContent,
110+
{ backgroundColor: theme.colors.surface },
109111
dimensions.width > 650 ? styles.modalContentBig : null,
110112
]}
111113
>
@@ -167,7 +169,6 @@ const styles = StyleSheet.create({
167169
},
168170
modalContent: {
169171
flex: 1,
170-
backgroundColor: '#fff',
171172
},
172173
modalContentBig: {
173174
maxWidth: 600,

‎src/Date/DatePickerModalHeader.tsx‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { View, StyleSheet, StatusBar } from 'react-native'
2+
import { View, StyleSheet, StatusBar, SafeAreaView } from 'react-native'
33
import { Appbar, Button, IconButton, Text, useTheme } from 'react-native-paper'
44
import { ModeType } from './Calendar'
55
import { LocalState } from './DatePickerModal'
@@ -38,31 +38,41 @@ export default function DatePickerModalHeader(props: HeaderProps) {
3838
[theme]
3939
)
4040

41-
// TODO: fix statusbar height
41+
const backgroundColor =
42+
theme.dark && theme.mode === 'adaptive'
43+
? theme.colors.surface
44+
: theme.colors.primary
45+
4246
return (
4347
<>
44-
<StatusBar transparent={true} barStyle={'light-content'} />
48+
<StatusBar translucent={true} barStyle={'light-content'} />
4549
<View
4650
style={[
47-
styles.statusbar,
4851
{
4952
height: StatusBar.currentHeight,
5053
backgroundColor: statusBarColor,
5154
},
5255
]}
5356
/>
54-
<Appbar style={styles.appbarHeader}>
55-
<Appbar.Action icon="close" onPress={props.onDismiss} />
56-
<Appbar.Content title={''} />
57-
<Button color={'#fff'} onPress={props.onSave}>
58-
{saveLabel}
59-
</Button>
60-
</Appbar>
57+
<SafeAreaView
58+
style={{
59+
backgroundColor,
60+
paddingBottom: 0,
61+
}}
62+
>
63+
<Appbar style={[styles.appbarHeader, { backgroundColor }]}>
64+
<Appbar.Action icon="close" onPress={props.onDismiss} />
65+
<Appbar.Content title={''} />
66+
<Button color={'#fff'} onPress={props.onSave}>
67+
{saveLabel}
68+
</Button>
69+
</Appbar>
70+
</SafeAreaView>
6171
<View
6272
style={[
6373
styles.header,
6474
{
65-
backgroundColor: theme.colors.primary,
75+
backgroundColor,
6676
},
6777
]}
6878
>
@@ -160,5 +170,6 @@ const styles = StyleSheet.create({
160170
},
161171
appbarHeader: {
162172
elevation: 0,
173+
// alignItems:'center'
163174
},
164175
})

‎src/Date/Day.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { Text, TouchableRipple } from 'react-native-paper'
2+
import { Text, TouchableRipple, useTheme } from 'react-native-paper'
33
import { StyleSheet, View } from 'react-native'
44
import DayRange from './DayRange'
55
import { daySize } from './dateUtils'
@@ -36,6 +36,8 @@ function Day(props: {
3636
isToday,
3737
} = props
3838

39+
const theme = useTheme()
40+
3941
const onPress = React.useCallback(() => {
4042
onPressDate(new Date(year, month, day))
4143
}, [onPressDate, year, month, day])
@@ -54,7 +56,7 @@ function Day(props: {
5456
onPress={onPress}
5557
style={[
5658
styles.button,
57-
{ backgroundColor: inRange ? selectColor : '#fff' },
59+
{ backgroundColor: inRange ? selectColor : theme.colors.surface },
5860
// hovered && styles.buttonHovered,
5961
]}
6062
>

0 commit comments

Comments
 (0)