Skip to content

Commit 5ceb813

Browse files
RichardLindhoutRichardLindhout
committed
Improve dark mode + rough implementation of keyboard and picker types
1 parent e6cdf59 commit 5ceb813

File tree

16 files changed

+1292
-1137
lines changed

16 files changed

+1292
-1137
lines changed

‎CONTRIBUTING.md‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -53,19 +53,6 @@ To edit the Objective-C files, open `example/ios/PaperDatesExample.xcworkspace`
5353

5454
To edit the Kotlin files, open `example/android` in Android studio and find the source files at `reactnativepaperdates` under `Android`.
5555

56-
### Commit message convention
57-
58-
We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages:
59-
60-
- `fix`: bug fixes, e.g. fix crash due to deprecated method.
61-
- `feat`: new features, e.g. add new method to the module.
62-
- `refactor`: code refactor, e.g. migrate from class components to hooks.
63-
- `docs`: changes into documentation, e.g. add usage example for the module..
64-
- `test`: adding or updating tests, eg add integration tests using detox.
65-
- `chore`: tooling changes, e.g. change CI config.
66-
67-
Our pre-commit hooks verify that your commit message matches this format when committing.
68-
6956
### Linting and tests
7057

7158
[ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/)

‎example/ios/Podfile.lock‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -296,6 +296,8 @@ PODS:
296296
- React-Core (= 0.63.2)
297297
- React-cxxreact (= 0.63.2)
298298
- React-jsi (= 0.63.2)
299+
- RNLocalize (1.4.2):
300+
- React-Core
299301
- RNVectorIcons (7.0.0):
300302
- React
301303
- Yoga (1.14.0)
@@ -349,6 +351,7 @@ DEPENDENCIES:
349351
- React-RCTText (from `../node_modules/react-native/Libraries/Text`)
350352
- React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
351353
- ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
354+
- RNLocalize (from `../node_modules/react-native-localize`)
352355
- RNVectorIcons (from `../node_modules/react-native-vector-icons`)
353356
- Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
354357

@@ -418,6 +421,8 @@ EXTERNAL SOURCES:
418421
:path: "../node_modules/react-native/Libraries/Vibration"
419422
ReactCommon:
420423
:path: "../node_modules/react-native/ReactCommon"
424+
RNLocalize:
425+
:path: "../node_modules/react-native-localize"
421426
RNVectorIcons:
422427
:path: "../node_modules/react-native-vector-icons"
423428
Yoga:
@@ -460,6 +465,7 @@ SPEC CHECKSUMS:
460465
React-RCTText: 1b6773e776e4b33f90468c20fe3b16ca3e224bb8
461466
React-RCTVibration: 4d2e726957f4087449739b595f107c0d4b6c2d2d
462467
ReactCommon: a0a1edbebcac5e91338371b72ffc66aa822792ce
468+
RNLocalize: 452d4118e338dee1e5ca3fac4d5a11a4ab26a46a
463469
RNVectorIcons: da6fe858f5a65d7bbc3379540a889b0b12aa5976
464470
Yoga: 7740b94929bbacbddda59bf115b5317e9a161598
465471
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

‎example/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
"react-dom": "^16.13.1",
3030
"react-native": "0.63.2",
3131
"react-native-localize": "^1.4.1",
32-
"react-native-paper": "^4.0.1",
3332
"react-native-vector-icons": "https://github.com/RichardLindhout/react-native-vector-icons",
3433
"react-native-web": "^0.0.0-80dae21e2",
3534
"react-scripts": "3.4.3"

‎example/public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
Learn how to configure a non-root public URL by running `npm run build`.
2727
-->
2828
<title>React App</title>
29+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
2930
</head>
3031
<body>
3132
<noscript>You need to enable JavaScript to run this app.</noscript>

‎example/src/App.tsx‎

Lines changed: 74 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,27 @@
11
import * as React from 'react';
2-
import { View } from 'react-native';
3-
import { Title, Button, Provider as PaperProvider } from 'react-native-paper';
2+
import { ScrollView, View } from 'react-native';
3+
import {
4+
Title,
5+
Button,
6+
Text,
7+
Provider as PaperProvider,
8+
Switch,
9+
DefaultTheme,
10+
DarkTheme,
11+
useTheme,
12+
} from 'react-native-paper';
413
import { DatePickerModal } from '../../src';
514
import { Platform } from 'react-native';
615
import TimePicker from '../../src/Time/TimePicker';
716

8-
function App() {
17+
function App({
18+
onToggleDarkMode,
19+
dark,
20+
}: {
21+
onToggleDarkMode: () => any;
22+
dark: boolean;
23+
}) {
24+
const theme = useTheme();
925
const [rangeOpen, setRangeOpen] = React.useState(false);
1026
const [singleOpen, setSingleOpen] = React.useState(false);
1127
const onDismissRange = React.useCallback(() => {
@@ -25,12 +41,18 @@ function App() {
2541
}, []);
2642

2743
return (
28-
<View style={{ alignItems: 'center', backgroundColor: '#FCFCFC', flex: 1 }}>
44+
<ScrollView
45+
style={{
46+
backgroundColor: theme.colors.background,
47+
flex: 1,
48+
}}
49+
contentInsetAdjustmentBehavior="always"
50+
>
2951
<View
3052
style={{
3153
width: '100%',
32-
maxWidth: 350,
33-
backgroundColor: '#fff',
54+
maxWidth: 450,
55+
backgroundColor: theme.colors.surface,
3456
shadowColor: '#000',
3557
shadowOffset: {
3658
width: 0,
@@ -40,9 +62,44 @@ function App() {
4062
shadowRadius: 3.84,
4163
elevation: 5,
4264
padding: 24,
65+
alignSelf: 'center',
66+
flex: 1,
4367
}}
4468
>
4569
<Title>Examples</Title>
70+
<View style={{ flexDirection: 'row', marginTop: 24 }}>
71+
<Text>Dark mode</Text>
72+
<View style={{ flex: 1 }} />
73+
<Switch value={dark} onValueChange={onToggleDarkMode} />
74+
</View>
75+
<View
76+
style={{
77+
backgroundColor: theme.colors.primary,
78+
width: 50,
79+
height: 50,
80+
}}
81+
/>
82+
<View
83+
style={{
84+
backgroundColor: theme.colors.accent,
85+
width: 50,
86+
height: 50,
87+
}}
88+
/>
89+
<View
90+
style={{
91+
backgroundColor: theme.colors.background,
92+
width: 50,
93+
height: 50,
94+
}}
95+
/>
96+
<View
97+
style={{
98+
backgroundColor: theme.colors.surface,
99+
width: 50,
100+
height: 50,
101+
}}
102+
/>
46103

47104
<View style={{ flexDirection: 'row', marginTop: 24 }}>
48105
<Button
@@ -84,23 +141,22 @@ function App() {
84141
label={'Select date'} // optional
85142
/>
86143

87-
<TimePicker />
88-
{Platform.OS === 'web' ? (
89-
<style type="text/css">{`
90-
@font-face {
91-
font-family: 'MaterialCommunityIcons';
92-
src: url(${require('react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf')}) format('truetype');
93-
}
94-
`}</style>
95-
) : null}
144+
<View style={{ alignItems: 'center', marginTop: 24 }}>
145+
<TimePicker />
146+
</View>
96147
</View>
97-
</View>
148+
</ScrollView>
98149
);
99150
}
100151

101152
export default function AppWithProviders() {
153+
const [dark, setDark] = React.useState(false);
154+
const onToggleDarkMode = () => {
155+
setDark((prev) => !prev);
156+
};
157+
102158
return (
103-
<PaperProvider>
159+
<PaperProvider theme={dark ? DarkTheme : DefaultTheme}>
104160
<React.Fragment>
105161
{Platform.OS === 'web' ? (
106162
<style type="text/css">{`
@@ -110,7 +166,7 @@ export default function AppWithProviders() {
110166
}
111167
`}</style>
112168
) : null}
113-
<App />
169+
<App onToggleDarkMode={onToggleDarkMode} dark={dark} />
114170
</React.Fragment>
115171
</PaperProvider>
116172
);

0 commit comments

Comments
 (0)