├── example
├── .gitattributes
├── app.json
├── babel.config.js
├── android
│ ├── app
│ │ ├── src
│ │ │ ├── main
│ │ │ │ ├── res
│ │ │ │ │ ├── values
│ │ │ │ │ │ ├── strings.xml
│ │ │ │ │ │ └── styles.xml
│ │ │ │ │ ├── mipmap-hdpi
│ │ │ │ │ │ ├── ic_launcher.png
│ │ │ │ │ │ └── ic_launcher_round.png
│ │ │ │ │ ├── mipmap-mdpi
│ │ │ │ │ │ ├── ic_launcher.png
│ │ │ │ │ │ └── ic_launcher_round.png
│ │ │ │ │ ├── mipmap-xhdpi
│ │ │ │ │ │ ├── ic_launcher.png
│ │ │ │ │ │ └── ic_launcher_round.png
│ │ │ │ │ ├── mipmap-xxhdpi
│ │ │ │ │ │ ├── ic_launcher.png
│ │ │ │ │ │ └── ic_launcher_round.png
│ │ │ │ │ └── mipmap-xxxhdpi
│ │ │ │ │ │ ├── ic_launcher.png
│ │ │ │ │ │ └── ic_launcher_round.png
│ │ │ │ ├── java
│ │ │ │ │ └── com
│ │ │ │ │ │ └── example
│ │ │ │ │ │ ├── MainActivity.java
│ │ │ │ │ │ └── MainApplication.java
│ │ │ │ └── AndroidManifest.xml
│ │ │ └── debug
│ │ │ │ ├── AndroidManifest.xml
│ │ │ │ └── java
│ │ │ │ └── com
│ │ │ │ └── example
│ │ │ │ └── ReactNativeFlipper.java
│ │ ├── debug.keystore
│ │ ├── proguard-rules.pro
│ │ ├── build_defs.bzl
│ │ ├── BUCK
│ │ └── build.gradle
│ ├── gradle
│ │ └── wrapper
│ │ │ ├── gradle-wrapper.jar
│ │ │ └── gradle-wrapper.properties
│ ├── settings.gradle
│ ├── build.gradle
│ ├── gradle.properties
│ ├── gradlew.bat
│ └── gradlew
├── ios
│ ├── Example
│ │ ├── Images.xcassets
│ │ │ ├── Contents.json
│ │ │ └── AppIcon.appiconset
│ │ │ │ └── Contents.json
│ │ ├── AppDelegate.h
│ │ ├── main.m
│ │ ├── Info.plist
│ │ ├── AppDelegate.m
│ │ └── LaunchScreen.storyboard
│ ├── Example.xcworkspace
│ │ └── contents.xcworkspacedata
│ ├── ExampleTests
│ │ ├── Info.plist
│ │ └── ExampleTests.m
│ ├── Example-tvOSTests
│ │ └── Info.plist
│ ├── Podfile
│ ├── Example-tvOS
│ │ └── Info.plist
│ ├── Example.xcodeproj
│ │ ├── xcshareddata
│ │ │ └── xcschemes
│ │ │ │ ├── Example.xcscheme
│ │ │ │ └── Example-tvOS.xcscheme
│ │ └── project.pbxproj
│ └── Podfile.lock
├── .buckconfig
├── index.js
├── metro.config.js
├── package.json
├── .gitignore
└── App.js
├── .eslintrc
├── .github
├── images
│ ├── datetimepicker-ios.gif
│ ├── datetimepicker-android.gif
│ └── datetimepicker-ios-inline.png
├── workflows
│ ├── release.yml
│ └── test.yml
├── PULL_REQUEST_TEMPLATE.md
├── ISSUE_TEMPLATE
│ └── BUG_REPORT.md
└── CONTRIBUTING.md
├── src
├── index.js
├── DateTimePickerModal.js
├── utils.js
├── DateTimePickerModal.android.js
├── Modal.js
└── DateTimePickerModal.ios.js
├── .releaserc
├── .gitignore
├── LICENSE.md
├── package.json
├── scripts
└── examples_postinstall.js
├── typings
└── index.d.ts
└── README.md
/example/.gitattributes:
--------------------------------------------------------------------------------
1 | *.pbxproj -text
2 |
--------------------------------------------------------------------------------
/example/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Example",
3 | "displayName": "Example"
4 | }
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["plugin:react-app/recommended", "plugin:prettier/recommended"]
3 | }
4 |
--------------------------------------------------------------------------------
/example/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ["module:metro-react-native-babel-preset"],
3 | };
4 |
--------------------------------------------------------------------------------
/example/android/app/src/main/res/values/strings.xml:
--------------------------------------------------------------------------------
1 |
2 | Example
3 |
4 |
--------------------------------------------------------------------------------
/example/ios/Example/Images.xcassets/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "info" : {
3 | "version" : 1,
4 | "author" : "xcode"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/example/android/app/debug.keystore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-modal-datetime-picker/HEAD/example/android/app/debug.keystore
--------------------------------------------------------------------------------
/.github/images/datetimepicker-ios.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-modal-datetime-picker/HEAD/.github/images/datetimepicker-ios.gif
--------------------------------------------------------------------------------
/example/.buckconfig:
--------------------------------------------------------------------------------
1 |
2 | [android]
3 | target = Google Inc.:Google APIs:23
4 |
5 | [maven_repositories]
6 | central = https://repo1.maven.org/maven2
7 |
--------------------------------------------------------------------------------
/.github/images/datetimepicker-android.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-modal-datetime-picker/HEAD/.github/images/datetimepicker-android.gif
--------------------------------------------------------------------------------
/.github/images/datetimepicker-ios-inline.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-modal-datetime-picker/HEAD/.github/images/datetimepicker-ios-inline.png
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import { DateTimePickerModal } from "./DateTimePickerModal";
2 |
3 | export default DateTimePickerModal;
4 |
5 | export * from "./DateTimePickerModal";
6 |
--------------------------------------------------------------------------------
/example/android/gradle/wrapper/gradle-wrapper.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-modal-datetime-picker/HEAD/example/android/gradle/wrapper/gradle-wrapper.jar
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-modal-datetime-picker/HEAD/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-modal-datetime-picker/HEAD/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-modal-datetime-picker/HEAD/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
1 | import { AppRegistry } from "react-native";
2 | import App from "./App";
3 | import { name as appName } from "./app.json";
4 |
5 | AppRegistry.registerComponent(appName, () => App);
6 |
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-modal-datetime-picker/HEAD/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-modal-datetime-picker/HEAD/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-modal-datetime-picker/HEAD/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-modal-datetime-picker/HEAD/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-modal-datetime-picker/HEAD/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-modal-datetime-picker/HEAD/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-modal-datetime-picker/HEAD/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/example/android/settings.gradle:
--------------------------------------------------------------------------------
1 | rootProject.name = 'Example'
2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
3 | include ':app'
4 |
--------------------------------------------------------------------------------
/.releaserc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": [
3 | "@semantic-release/commit-analyzer",
4 | "@semantic-release/release-notes-generator",
5 | "@semantic-release/npm",
6 | "@semantic-release/github",
7 | "@semantic-release/git"
8 | ]
9 | }
--------------------------------------------------------------------------------
/example/ios/Example/AppDelegate.h:
--------------------------------------------------------------------------------
1 | #import
2 | #import
3 |
4 | @interface AppDelegate : UIResponder
5 |
6 | @property (nonatomic, strong) UIWindow *window;
7 |
8 | @end
9 |
--------------------------------------------------------------------------------
/example/ios/Example/main.m:
--------------------------------------------------------------------------------
1 | #import
2 |
3 | #import "AppDelegate.h"
4 |
5 | int main(int argc, char * argv[]) {
6 | @autoreleasepool {
7 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/example/android/gradle/wrapper/gradle-wrapper.properties:
--------------------------------------------------------------------------------
1 | distributionBase=GRADLE_USER_HOME
2 | distributionPath=wrapper/dists
3 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip
4 | zipStoreBase=GRADLE_USER_HOME
5 | zipStorePath=wrapper/dists
6 |
--------------------------------------------------------------------------------
/src/DateTimePickerModal.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Platform } from "react-native";
3 |
4 | export function DateTimePickerModal() {
5 | React.useEffect(() => {
6 | console.warn(`DateTimePicker is not supported on: ${Platform.OS}`);
7 | }, []);
8 | return null;
9 | }
10 |
--------------------------------------------------------------------------------
/example/ios/Example.xcworkspace/contents.xcworkspacedata:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/example/android/app/src/main/res/values/styles.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/example/metro.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Metro configuration for React Native
3 | * https://github.com/facebook/react-native
4 | *
5 | * @format
6 | */
7 |
8 | module.exports = {
9 | transformer: {
10 | getTransformOptions: async () => ({
11 | transform: {
12 | experimentalImportSupport: false,
13 | inlineRequires: false,
14 | },
15 | }),
16 | },
17 | };
18 |
--------------------------------------------------------------------------------
/example/android/app/src/debug/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/example/android/app/src/main/java/com/example/MainActivity.java:
--------------------------------------------------------------------------------
1 | package com.example;
2 |
3 | import com.facebook.react.ReactActivity;
4 |
5 | public class MainActivity extends ReactActivity {
6 |
7 | /**
8 | * Returns the name of the main component registered from JavaScript. This is used to schedule
9 | * rendering of the component.
10 | */
11 | @Override
12 | protected String getMainComponentName() {
13 | return "Example";
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/example/android/app/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # By default, the flags in this file are appended to flags specified
3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
4 | # You can edit the include path and order by changing the proguardFiles
5 | # directive in build.gradle.
6 | #
7 | # For more details, see
8 | # http://developer.android.com/guide/developing/tools/proguard.html
9 |
10 | # Add any project specific keep options here:
11 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Release
2 | on:
3 | push:
4 | branches:
5 | - master
6 | jobs:
7 | release:
8 | name: Release
9 | runs-on: ubuntu-latest
10 | steps:
11 | - name: Checkout
12 | uses: actions/checkout@v2
13 | - name: Setup Node.js
14 | uses: actions/setup-node@v1
15 | with:
16 | node-version: '13.x'
17 | - name: Install dependencies
18 | run: yarn --pure-lockfile
19 | - name: Release
20 | env:
21 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
22 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
23 | run: npx semantic-release
--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
1 | import { Dimensions, Platform } from "react-native";
2 |
3 | export const isIphoneX = () => {
4 | const { height, width } = Dimensions.get("window");
5 |
6 | return (
7 | Platform.OS === "ios" &&
8 | !Platform.isPad &&
9 | !Platform.isTVOS &&
10 | (height === 780 ||
11 | width === 780 ||
12 | height === 812 ||
13 | width === 812 ||
14 | height === 844 ||
15 | width === 844 ||
16 | height === 852 ||
17 | width === 852 ||
18 | height === 896 ||
19 | width === 896 ||
20 | height === 926 ||
21 | width === 926 ||
22 | height === 932 ||
23 | width === 932)
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/example/android/app/build_defs.bzl:
--------------------------------------------------------------------------------
1 | """Helper definitions to glob .aar and .jar targets"""
2 |
3 | def create_aar_targets(aarfiles):
4 | for aarfile in aarfiles:
5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")]
6 | lib_deps.append(":" + name)
7 | android_prebuilt_aar(
8 | name = name,
9 | aar = aarfile,
10 | )
11 |
12 | def create_jar_targets(jarfiles):
13 | for jarfile in jarfiles:
14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")]
15 | lib_deps.append(":" + name)
16 | prebuilt_jar(
17 | name = name,
18 | binary_jar = jarfile,
19 | )
20 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # OSX
2 | #
3 | .DS_Store
4 |
5 | # Xcode
6 | #
7 | build/
8 | *.pbxuser
9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 | project.xcworkspace
24 |
25 | # Android/IJ
26 | #
27 | *.iml
28 | .idea
29 | .gradle
30 | local.properties
31 |
32 | # node.js
33 | #
34 | node_modules/
35 | npm-debug.log
36 |
37 | # BUCK
38 | buck-out/
39 | \.buckd/
40 | android/app/libs
41 | android/keystores/debug.keystore
42 |
43 | .jsconfig.json
44 | .vscode
45 | jsconfig.json
46 | npm-debug.log.*
47 |
48 | # yarn
49 | yarn-error.log
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # Overview
4 |
5 |
6 |
7 |
8 | # Test Plan
9 |
10 |
11 |
--------------------------------------------------------------------------------
/example/ios/Example/Images.xcassets/AppIcon.appiconset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "idiom" : "iphone",
5 | "size" : "29x29",
6 | "scale" : "2x"
7 | },
8 | {
9 | "idiom" : "iphone",
10 | "size" : "29x29",
11 | "scale" : "3x"
12 | },
13 | {
14 | "idiom" : "iphone",
15 | "size" : "40x40",
16 | "scale" : "2x"
17 | },
18 | {
19 | "idiom" : "iphone",
20 | "size" : "40x40",
21 | "scale" : "3x"
22 | },
23 | {
24 | "idiom" : "iphone",
25 | "size" : "60x60",
26 | "scale" : "2x"
27 | },
28 | {
29 | "idiom" : "iphone",
30 | "size" : "60x60",
31 | "scale" : "3x"
32 | }
33 | ],
34 | "info" : {
35 | "version" : 1,
36 | "author" : "xcode"
37 | }
38 | }
--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
1 | name: Lint & Test
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 | pull_request:
8 | branches:
9 | - master
10 |
11 | jobs:
12 | install:
13 | runs-on: ubuntu-latest
14 | name: Install
15 | steps:
16 | - uses: actions/checkout@v2
17 | - uses: actions/setup-node@v1
18 | with:
19 | node-version: '13.x'
20 | - run: yarn --pure-lockfile
21 | - uses: actions/cache@v1
22 | id: cache-build
23 | with:
24 | path: '.'
25 | key: ${{ github.sha }}
26 |
27 | test:
28 | runs-on: ubuntu-latest
29 | name: Test
30 | needs: install
31 | steps:
32 | - uses: actions/cache@v1
33 | id: restore-build
34 | with:
35 | path: '.'
36 | key: ${{ github.sha }}
37 | - run: yarn test
--------------------------------------------------------------------------------
/example/ios/ExampleTests/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleExecutable
8 | $(EXECUTABLE_NAME)
9 | CFBundleIdentifier
10 | $(PRODUCT_BUNDLE_IDENTIFIER)
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | $(PRODUCT_NAME)
15 | CFBundlePackageType
16 | BNDL
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleSignature
20 | ????
21 | CFBundleVersion
22 | 1
23 |
24 |
25 |
--------------------------------------------------------------------------------
/example/ios/Example-tvOSTests/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleExecutable
8 | $(EXECUTABLE_NAME)
9 | CFBundleIdentifier
10 | $(PRODUCT_BUNDLE_IDENTIFIER)
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | $(PRODUCT_NAME)
15 | CFBundlePackageType
16 | BNDL
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleSignature
20 | ????
21 | CFBundleVersion
22 | 1
23 |
24 |
25 |
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Example",
3 | "version": "0.0.1",
4 | "private": true,
5 | "scripts": {
6 | "start": "react-native start",
7 | "postinstall": "node ../scripts/examples_postinstall.js",
8 | "setup": "rm -rf node_modules ios/Pods && yarn install && cd ios && pod install && yarn copy",
9 | "copy": "rm -rf node_modules/react-native-modal-datetime-picker/src/ && cp -Rv ../src node_modules/react-native-modal-datetime-picker/src"
10 | },
11 | "dependencies": {
12 | "@react-native-community/datetimepicker": "*",
13 | "react": "16.13.1",
14 | "react-native": "0.63.2",
15 | "react-native-modal-datetime-picker": "file:../"
16 | },
17 | "devDependencies": {
18 | "@babel/core": "^7.11.1",
19 | "@babel/runtime": "^7.11.2",
20 | "metro-react-native-babel-preset": "^0.62.0"
21 | },
22 | "jest": {
23 | "preset": "react-native"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/example/ios/Podfile:
--------------------------------------------------------------------------------
1 | require_relative '../node_modules/react-native/scripts/react_native_pods'
2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
3 |
4 | platform :ios, '10.0'
5 |
6 | target 'Example' do
7 | config = use_native_modules!
8 |
9 | use_react_native!(:path => config["reactNativePath"])
10 |
11 | target 'ExampleTests' do
12 | inherit! :complete
13 | # Pods for testing
14 | end
15 |
16 | # Enables Flipper.
17 | #
18 | # Note that if you have use_frameworks! enabled, Flipper will not work and
19 | # you should disable these next few lines.
20 | use_flipper!
21 | post_install do |installer|
22 | flipper_post_install(installer)
23 | end
24 | end
25 |
26 | target 'Example-tvOS' do
27 | # Pods for Example-tvOS
28 |
29 | target 'Example-tvOSTests' do
30 | inherit! :search_paths
31 | # Pods for testing
32 | end
33 | end
34 |
--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
1 | # OSX
2 | #
3 | .DS_Store
4 |
5 | # Xcode
6 | #
7 | build/
8 | *.pbxuser
9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 |
24 | # Android/IntelliJ
25 | #
26 | build/
27 | .idea
28 | .gradle
29 | local.properties
30 | *.iml
31 |
32 | # node.js
33 | #
34 | node_modules/
35 | npm-debug.log
36 | yarn-error.log
37 |
38 | # BUCK
39 | buck-out/
40 | \.buckd/
41 | *.keystore
42 | !debug.keystore
43 |
44 | # fastlane
45 | #
46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47 | # screenshots whenever they are needed.
48 | # For more information about the recommended setup visit:
49 | # https://docs.fastlane.tools/best-practices/source-control/
50 |
51 | */fastlane/report.xml
52 | */fastlane/Preview.html
53 | */fastlane/screenshots
54 |
55 | # Bundle artifact
56 | *.jsbundle
57 |
58 | # CocoaPods
59 | /ios/Pods/
60 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Mazzarolo Matteo
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/example/android/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 |
13 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/example/android/build.gradle:
--------------------------------------------------------------------------------
1 | // Top-level build file where you can add configuration options common to all sub-projects/modules.
2 |
3 | buildscript {
4 | ext {
5 | buildToolsVersion = "29.0.2"
6 | minSdkVersion = 16
7 | compileSdkVersion = 29
8 | targetSdkVersion = 29
9 | }
10 | repositories {
11 | google()
12 | jcenter()
13 | }
14 | dependencies {
15 | classpath("com.android.tools.build:gradle:3.5.3")
16 | // NOTE: Do not place your application dependencies here; they belong
17 | // in the individual module build.gradle files
18 | }
19 | }
20 |
21 | allprojects {
22 | repositories {
23 | mavenLocal()
24 | maven {
25 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
26 | url("$rootDir/../node_modules/react-native/android")
27 | }
28 | maven {
29 | // Android JSC is installed from npm
30 | url("$rootDir/../node_modules/jsc-android/dist")
31 | }
32 |
33 | google()
34 | jcenter()
35 | maven { url 'https://www.jitpack.io' }
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/example/android/gradle.properties:
--------------------------------------------------------------------------------
1 | # Project-wide Gradle settings.
2 |
3 | # IDE (e.g. Android Studio) users:
4 | # Gradle settings configured through the IDE *will override*
5 | # any settings specified in this file.
6 |
7 | # For more details on how to configure your build environment visit
8 | # http://www.gradle.org/docs/current/userguide/build_environment.html
9 |
10 | # Specifies the JVM arguments used for the daemon process.
11 | # The setting is particularly useful for tweaking memory settings.
12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m
13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
14 |
15 | # When configured, Gradle will run in incubating parallel mode.
16 | # This option should only be used with decoupled projects. More details, visit
17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
18 | # org.gradle.parallel=true
19 |
20 | # AndroidX package structure to make it clearer which packages are bundled with the
21 | # Android operating system, and which are packaged with your app's APK
22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn
23 | android.useAndroidX=true
24 | # Automatically convert third-party libraries to use AndroidX
25 | android.enableJetifier=true
26 |
27 | # Version of flipper SDK to use with React Native
28 | FLIPPER_VERSION=0.37.0
29 |
--------------------------------------------------------------------------------
/example/android/app/BUCK:
--------------------------------------------------------------------------------
1 | # To learn about Buck see [Docs](https://buckbuild.com/).
2 | # To run your application with Buck:
3 | # - install Buck
4 | # - `npm start` - to start the packager
5 | # - `cd android`
6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
8 | # - `buck install -r android/app` - compile, install and run application
9 | #
10 |
11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
12 |
13 | lib_deps = []
14 |
15 | create_aar_targets(glob(["libs/*.aar"]))
16 |
17 | create_jar_targets(glob(["libs/*.jar"]))
18 |
19 | android_library(
20 | name = "all-libs",
21 | exported_deps = lib_deps,
22 | )
23 |
24 | android_library(
25 | name = "app-code",
26 | srcs = glob([
27 | "src/main/java/**/*.java",
28 | ]),
29 | deps = [
30 | ":all-libs",
31 | ":build_config",
32 | ":res",
33 | ],
34 | )
35 |
36 | android_build_config(
37 | name = "build_config",
38 | package = "com.example",
39 | )
40 |
41 | android_resource(
42 | name = "res",
43 | package = "com.example",
44 | res = "src/main/res",
45 | )
46 |
47 | android_binary(
48 | name = "app",
49 | keystore = "//android/keystores:debug",
50 | manifest = "src/main/AndroidManifest.xml",
51 | package_type = "debug",
52 | deps = [
53 | ":app-code",
54 | ],
55 | )
56 |
--------------------------------------------------------------------------------
/example/ios/Example-tvOS/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleExecutable
8 | $(EXECUTABLE_NAME)
9 | CFBundleIdentifier
10 | $(PRODUCT_BUNDLE_IDENTIFIER)
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | $(PRODUCT_NAME)
15 | CFBundlePackageType
16 | APPL
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleSignature
20 | ????
21 | CFBundleVersion
22 | 1
23 | LSRequiresIPhoneOS
24 |
25 | NSAppTransportSecurity
26 |
27 | NSExceptionDomains
28 |
29 | localhost
30 |
31 | NSExceptionAllowsInsecureHTTPLoads
32 |
33 |
34 |
35 |
36 | NSLocationWhenInUseUsageDescription
37 |
38 | UILaunchStoryboardName
39 | LaunchScreen
40 | UIRequiredDeviceCapabilities
41 |
42 | armv7
43 |
44 | UISupportedInterfaceOrientations
45 |
46 | UIInterfaceOrientationPortrait
47 | UIInterfaceOrientationLandscapeLeft
48 | UIInterfaceOrientationLandscapeRight
49 |
50 | UIViewControllerBasedStatusBarAppearance
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/example/ios/Example/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleDisplayName
8 | Example
9 | CFBundleExecutable
10 | $(EXECUTABLE_NAME)
11 | CFBundleIdentifier
12 | $(PRODUCT_BUNDLE_IDENTIFIER)
13 | CFBundleInfoDictionaryVersion
14 | 6.0
15 | CFBundleName
16 | $(PRODUCT_NAME)
17 | CFBundlePackageType
18 | APPL
19 | CFBundleShortVersionString
20 | 1.0
21 | CFBundleSignature
22 | ????
23 | CFBundleVersion
24 | 1
25 | LSRequiresIPhoneOS
26 |
27 | NSAppTransportSecurity
28 |
29 | NSAllowsArbitraryLoads
30 |
31 | NSExceptionDomains
32 |
33 | localhost
34 |
35 | NSExceptionAllowsInsecureHTTPLoads
36 |
37 |
38 |
39 |
40 | NSLocationWhenInUseUsageDescription
41 |
42 | UILaunchStoryboardName
43 | LaunchScreen
44 | UIRequiredDeviceCapabilities
45 |
46 | armv7
47 |
48 | UISupportedInterfaceOrientations
49 |
50 | UIInterfaceOrientationPortrait
51 | UIInterfaceOrientationLandscapeLeft
52 | UIInterfaceOrientationLandscapeRight
53 |
54 | UIViewControllerBasedStatusBarAppearance
55 |
56 |
57 |
58 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/BUG_REPORT.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: 🐛 Report a bug
3 | about: Report a reproducible or regression bug.
4 | labels: "bug"
5 | ---
6 |
7 |
9 |
12 |
13 |
14 | ## Environment
15 |
16 |
17 |
18 | ## Platforms
19 |
20 |
21 |
22 | ## Versions
23 |
24 |
25 |
26 | - Android:
27 | - iOS:
28 | - react-native-modal-datetime-picker:
29 | - [react-native-community/datetimepicker](https://github.com/react-native-community/datetimepicker):
30 | - react-native:
31 | - react:
32 |
33 | ## Description
34 |
35 |
36 |
37 | ## Reproducible Demo
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-modal-datetime-picker",
3 | "version": "18.0.0",
4 | "description": "A react-native datetime-picker for Android and iOS",
5 | "main": "src/index.js",
6 | "files": [
7 | "src/",
8 | "typings/"
9 | ],
10 | "typings": "typings/index.d.ts",
11 | "keywords": [
12 | "react-native",
13 | "react",
14 | "native",
15 | "date",
16 | "time",
17 | "picker",
18 | "android",
19 | "ios"
20 | ],
21 | "author": "Mazzarolo Matteo",
22 | "license": "MIT",
23 | "homepage": "https://github.com/mmazzarolo/react-native-modal-datetime-picker",
24 | "repository": {
25 | "type": "git",
26 | "url": "https://github.com/mmazzarolo/react-native-modal-datetime-picker"
27 | },
28 | "scripts": {
29 | "lint": "eslint src",
30 | "lint:fix": "yarn lint --fix",
31 | "test": "yarn run lint",
32 | "release": "yarn semantic-release",
33 | "example:setup": "cd example && yarn setup",
34 | "example:copy": "cd example && yarn copy",
35 | "example:android": "cd example && react-native run-android",
36 | "example:ios": "cd example && react-native run-ios"
37 | },
38 | "dependencies": {
39 | "prop-types": "^15.7.2"
40 | },
41 | "devDependencies": {
42 | "@semantic-release/git": "^9.0.0",
43 | "eslint": "^7.11.0",
44 | "eslint-config-prettier": "^6.12.0",
45 | "eslint-plugin-prettier": "^3.1.4",
46 | "eslint-plugin-react-app": "^6.2.2",
47 | "husky": "^4.3.0",
48 | "lint-staged": "^10.4.0",
49 | "prettier": "^2.1.2",
50 | "semantic-release": "^17.1.2"
51 | },
52 | "peerDependencies": {
53 | "@react-native-community/datetimepicker": ">=6.7.0",
54 | "react-native": ">=0.65.0"
55 | },
56 | "husky": {
57 | "hooks": {
58 | "pre-commit": "lint-staged"
59 | }
60 | },
61 | "lint-staged": {
62 | "*.{js,jsx,ts,tsx}": [
63 | "yarn lint:fix"
64 | ],
65 | "*.json": [
66 | "prettier --write"
67 | ],
68 | "*.md": [
69 | "prettier --write"
70 | ]
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/example/ios/ExampleTests/ExampleTests.m:
--------------------------------------------------------------------------------
1 | #import
2 | #import
3 |
4 | #import
5 | #import
6 |
7 | #define TIMEOUT_SECONDS 600
8 | #define TEXT_TO_LOOK_FOR @"Welcome to React"
9 |
10 | @interface ExampleTests : XCTestCase
11 |
12 | @end
13 |
14 | @implementation ExampleTests
15 |
16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test
17 | {
18 | if (test(view)) {
19 | return YES;
20 | }
21 | for (UIView *subview in [view subviews]) {
22 | if ([self findSubviewInView:subview matching:test]) {
23 | return YES;
24 | }
25 | }
26 | return NO;
27 | }
28 |
29 | - (void)testRendersWelcomeScreen
30 | {
31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController];
32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
33 | BOOL foundElement = NO;
34 |
35 | __block NSString *redboxError = nil;
36 | #ifdef DEBUG
37 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
38 | if (level >= RCTLogLevelError) {
39 | redboxError = message;
40 | }
41 | });
42 | #endif
43 |
44 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
45 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
46 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
47 |
48 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) {
49 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
50 | return YES;
51 | }
52 | return NO;
53 | }];
54 | }
55 |
56 | #ifdef DEBUG
57 | RCTSetLogFunction(RCTDefaultLogFunction);
58 | #endif
59 |
60 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
61 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
62 | }
63 |
64 |
65 | @end
66 |
--------------------------------------------------------------------------------
/example/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { Button, Platform, StyleSheet, Switch, Text, View } from "react-native";
3 | import DateTimePickerModal from "react-native-modal-datetime-picker";
4 |
5 | const App = () => {
6 | const [pickerMode, setPickerMode] = useState(null);
7 | const [inline, setInline] = useState(false);
8 |
9 | const showDatePicker = () => {
10 | setPickerMode("date");
11 | };
12 |
13 | const showTimePicker = () => {
14 | setPickerMode("time");
15 | };
16 |
17 | const showDateTimePicker = () => {
18 | setPickerMode("datetime");
19 | };
20 |
21 | const hidePicker = () => {
22 | setPickerMode(null);
23 | };
24 |
25 | const handleConfirm = (date) => {
26 | // In order to prevent the double-shown popup bug on Android, picker has to be hidden first (https://github.com/react-native-datetimepicker/datetimepicker/issues/54#issuecomment-618776550)
27 | hidePicker();
28 | console.warn("A date has been picked: ", date);
29 | };
30 |
31 | return (
32 |
33 |
34 |
35 |
36 | {Platform.OS === "ios" && (
37 |
38 | Display inline?
39 |
40 |
41 | )}
42 |
49 |
50 | );
51 | };
52 |
53 | const style = StyleSheet.create({
54 | root: {
55 | flex: 1,
56 | justifyContent: "center",
57 | alignItems: "center",
58 | },
59 | inlineSwitchContainer: {
60 | marginTop: 28,
61 | flexDirection: "row",
62 | alignItems: "center",
63 | },
64 | inlineSwitchText: {
65 | fontSize: 18,
66 | marginRight: 8,
67 | },
68 | });
69 |
70 | export default App;
71 |
--------------------------------------------------------------------------------
/example/ios/Example/AppDelegate.m:
--------------------------------------------------------------------------------
1 | #import "AppDelegate.h"
2 |
3 | #import
4 | #import
5 | #import
6 |
7 | #ifdef FB_SONARKIT_ENABLED
8 | #import
9 | #import
10 | #import
11 | #import
12 | #import
13 | #import
14 |
15 | static void InitializeFlipper(UIApplication *application) {
16 | FlipperClient *client = [FlipperClient sharedClient];
17 | SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
18 | [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
19 | [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
20 | [client addPlugin:[FlipperKitReactPlugin new]];
21 | [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
22 | [client start];
23 | }
24 | #endif
25 |
26 | @implementation AppDelegate
27 |
28 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
29 | {
30 | #ifdef FB_SONARKIT_ENABLED
31 | InitializeFlipper(application);
32 | #endif
33 |
34 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
35 | RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
36 | moduleName:@"Example"
37 | initialProperties:nil];
38 |
39 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
40 |
41 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
42 | UIViewController *rootViewController = [UIViewController new];
43 | rootViewController.view = rootView;
44 | self.window.rootViewController = rootViewController;
45 | [self.window makeKeyAndVisible];
46 | return YES;
47 | }
48 |
49 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
50 | {
51 | #if DEBUG
52 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
53 | #else
54 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
55 | #endif
56 | }
57 |
58 | @end
59 |
--------------------------------------------------------------------------------
/src/DateTimePickerModal.android.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState, memo } from "react";
2 | import PropTypes from "prop-types";
3 | import DateTimePicker from "@react-native-community/datetimepicker";
4 |
5 | // Memo workaround for https://github.com/react-native-community/datetimepicker/issues/54
6 | const areEqual = (prevProps, nextProps) => {
7 | return (
8 | prevProps.isVisible === nextProps.isVisible &&
9 | (prevProps.date?.getTime() === nextProps.date?.getTime())
10 | );
11 | };
12 |
13 | const DateTimePickerModal = memo(
14 | ({
15 | date = new Date(),
16 | mode = 'date',
17 | isVisible = false,
18 | onCancel,
19 | onConfirm,
20 | onHide = () => { },
21 | ...otherProps
22 | }) => {
23 | const currentDateRef = useRef(date);
24 | const [currentMode, setCurrentMode] = useState(null);
25 |
26 | useEffect(() => {
27 | if (isVisible && currentMode === null) {
28 | setCurrentMode(mode === 'time' ? 'time' : 'date');
29 | } else if (!isVisible) {
30 | setCurrentMode(null);
31 | }
32 | }, [isVisible, currentMode, mode]);
33 |
34 | if (!isVisible || !currentMode) return null;
35 |
36 | const handleChange = (event, date) => {
37 | if (event.type === 'dismissed') {
38 | onCancel();
39 | onHide(false);
40 | return;
41 | }
42 | let nextDate = date;
43 | if (mode === 'datetime') {
44 | if (currentMode === 'date') {
45 | setCurrentMode('time');
46 | currentDateRef.current = new Date(date);
47 | return;
48 | } else if (currentMode === 'time') {
49 | const year = currentDateRef.current.getFullYear();
50 | const month = currentDateRef.current.getMonth();
51 | const day = currentDateRef.current.getDate();
52 | const hours = date.getHours();
53 | const minutes = date.getMinutes();
54 | nextDate = new Date(year, month, day, hours, minutes);
55 | }
56 | }
57 | onConfirm(nextDate);
58 | onHide(true, nextDate);
59 | };
60 |
61 | return (
62 |
68 | );
69 | },
70 | areEqual
71 | );
72 |
73 | export default DateTimePickerModal;
74 |
75 | DateTimePickerModal.propTypes = {
76 | date: PropTypes.instanceOf(Date),
77 | isVisible: PropTypes.bool,
78 | onCancel: PropTypes.func.isRequired,
79 | onConfirm: PropTypes.func.isRequired,
80 | onHide: PropTypes.func,
81 | maximumDate: PropTypes.instanceOf(Date),
82 | minimumDate: PropTypes.instanceOf(Date),
83 | };
84 |
85 | export { DateTimePickerModal };
--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to react-native-modal-datetime-picker
2 |
3 | Contribution to `react-native-modal-datetime-picker` are warmly welcome!
4 | Before you start, please keep in mind that the goal of this library is to be as consistent as possible with the native behaviour/style guidelines, so **it's highly lickely that we won't accept contributions that introduce customization options that goes against the native guidelines**.
5 |
6 | ## Development Process
7 |
8 | All work on React Native Modal Datetime Picker happens directly on GitHub. Contributors send pull requests which go through a review process.
9 |
10 | > **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
11 |
12 | 1. Fork the repo and create your branch from `master` (a guide on [how to fork a repository](https://help.github.com/articles/fork-a-repo/)).
13 | 2. Run `yarn` to install all required dependencies.
14 | 3. Now you are ready to make your changes!
15 |
16 | ## Tests & Verifications
17 |
18 | Currently we use `eslint` with `prettier` for linting and formatting the code. They are run on CircleCI for all opened pull requests, but you should use them locally when making changes.
19 |
20 | - `yarn lint`: Run `eslint`.
21 | - `yarn lint --fix`: Run `eslint` and automatically fix issues. This is useful for correcting code formatting.
22 |
23 | ## Sending a pull request
24 |
25 | When you're sending a pull request:
26 |
27 | - Prefer small pull requests focused on one change.
28 | - Verify that all tests and validations are passing.
29 | - Follow the pull request template when opening a pull request.
30 |
31 | ## Commit message convention
32 |
33 | We prefix our commit messages with one of the following to signify the kind of change:
34 |
35 | - **build**: Changes that affect the build system or external dependencies.
36 | - **ci**, **chore**: Changes to our CI configuration files and scripts.
37 | - **docs**: Documentation only changes.
38 | - **feat**: A new feature.
39 | - **fix**: A bug fix.
40 | - **perf**: A code change that improves performance.
41 | - **refactor**: A code change that neither fixes a bug nor adds a feature.
42 | - **style**: Changes that do not affect the meaning of the code.
43 | - **test**: Adding missing tests or correcting existing tests.
44 |
45 | ## Release process
46 |
47 | We use [Semantic Release](http://semantic-release.org) to automatically release new versions of the library when changes are merged into master. Using the commit message convention described above, it will detect if we need to release a patch, minor, or major version of the library.
48 |
49 | ## Reporting issues
50 |
51 | You can report issues on our [bug tracker](https://github.com/mmazzarolo/react-native-modal-datetime-picker/issues). Please search for existing issues and follow the issue template when opening an issue.
52 |
--------------------------------------------------------------------------------
/example/android/app/src/main/java/com/example/MainApplication.java:
--------------------------------------------------------------------------------
1 | package com.example;
2 |
3 | import android.app.Application;
4 | import android.content.Context;
5 | import com.facebook.react.PackageList;
6 | import com.facebook.react.ReactApplication;
7 | import com.facebook.react.ReactInstanceManager;
8 | import com.facebook.react.ReactNativeHost;
9 | import com.facebook.react.ReactPackage;
10 | import com.facebook.soloader.SoLoader;
11 | import java.lang.reflect.InvocationTargetException;
12 | import java.util.List;
13 |
14 | public class MainApplication extends Application implements ReactApplication {
15 |
16 | private final ReactNativeHost mReactNativeHost =
17 | new ReactNativeHost(this) {
18 | @Override
19 | public boolean getUseDeveloperSupport() {
20 | return BuildConfig.DEBUG;
21 | }
22 |
23 | @Override
24 | protected List getPackages() {
25 | @SuppressWarnings("UnnecessaryLocalVariable")
26 | List packages = new PackageList(this).getPackages();
27 | // Packages that cannot be autolinked yet can be added manually here, for example:
28 | // packages.add(new MyReactNativePackage());
29 | return packages;
30 | }
31 |
32 | @Override
33 | protected String getJSMainModuleName() {
34 | return "index";
35 | }
36 | };
37 |
38 | @Override
39 | public ReactNativeHost getReactNativeHost() {
40 | return mReactNativeHost;
41 | }
42 |
43 | @Override
44 | public void onCreate() {
45 | super.onCreate();
46 | SoLoader.init(this, /* native exopackage */ false);
47 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
48 | }
49 |
50 | /**
51 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like
52 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
53 | *
54 | * @param context
55 | * @param reactInstanceManager
56 | */
57 | private static void initializeFlipper(
58 | Context context, ReactInstanceManager reactInstanceManager) {
59 | if (BuildConfig.DEBUG) {
60 | try {
61 | /*
62 | We use reflection here to pick up the class that initializes Flipper,
63 | since Flipper library is not available in release mode
64 | */
65 | Class> aClass = Class.forName("com.example.ReactNativeFlipper");
66 | aClass
67 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
68 | .invoke(null, context, reactInstanceManager);
69 | } catch (ClassNotFoundException e) {
70 | e.printStackTrace();
71 | } catch (NoSuchMethodException e) {
72 | e.printStackTrace();
73 | } catch (IllegalAccessException e) {
74 | e.printStackTrace();
75 | } catch (InvocationTargetException e) {
76 | e.printStackTrace();
77 | }
78 | }
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/example/android/gradlew.bat:
--------------------------------------------------------------------------------
1 | @rem
2 | @rem Copyright 2015 the original author or authors.
3 | @rem
4 | @rem Licensed under the Apache License, Version 2.0 (the "License");
5 | @rem you may not use this file except in compliance with the License.
6 | @rem You may obtain a copy of the License at
7 | @rem
8 | @rem https://www.apache.org/licenses/LICENSE-2.0
9 | @rem
10 | @rem Unless required by applicable law or agreed to in writing, software
11 | @rem distributed under the License is distributed on an "AS IS" BASIS,
12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | @rem See the License for the specific language governing permissions and
14 | @rem limitations under the License.
15 | @rem
16 |
17 | @if "%DEBUG%" == "" @echo off
18 | @rem ##########################################################################
19 | @rem
20 | @rem Gradle startup script for Windows
21 | @rem
22 | @rem ##########################################################################
23 |
24 | @rem Set local scope for the variables with windows NT shell
25 | if "%OS%"=="Windows_NT" setlocal
26 |
27 | set DIRNAME=%~dp0
28 | if "%DIRNAME%" == "" set DIRNAME=.
29 | set APP_BASE_NAME=%~n0
30 | set APP_HOME=%DIRNAME%
31 |
32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter.
33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
34 |
35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
37 |
38 | @rem Find java.exe
39 | if defined JAVA_HOME goto findJavaFromJavaHome
40 |
41 | set JAVA_EXE=java.exe
42 | %JAVA_EXE% -version >NUL 2>&1
43 | if "%ERRORLEVEL%" == "0" goto init
44 |
45 | echo.
46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
47 | echo.
48 | echo Please set the JAVA_HOME variable in your environment to match the
49 | echo location of your Java installation.
50 |
51 | goto fail
52 |
53 | :findJavaFromJavaHome
54 | set JAVA_HOME=%JAVA_HOME:"=%
55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe
56 |
57 | if exist "%JAVA_EXE%" goto init
58 |
59 | echo.
60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
61 | echo.
62 | echo Please set the JAVA_HOME variable in your environment to match the
63 | echo location of your Java installation.
64 |
65 | goto fail
66 |
67 | :init
68 | @rem Get command-line arguments, handling Windows variants
69 |
70 | if not "%OS%" == "Windows_NT" goto win9xME_args
71 |
72 | :win9xME_args
73 | @rem Slurp the command line arguments.
74 | set CMD_LINE_ARGS=
75 | set _SKIP=2
76 |
77 | :win9xME_args_slurp
78 | if "x%~1" == "x" goto execute
79 |
80 | set CMD_LINE_ARGS=%*
81 |
82 | :execute
83 | @rem Setup the command line
84 |
85 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
86 |
87 | @rem Execute Gradle
88 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
89 |
90 | :end
91 | @rem End local scope for the variables with windows NT shell
92 | if "%ERRORLEVEL%"=="0" goto mainEnd
93 |
94 | :fail
95 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
96 | rem the _cmd.exe /c_ return code!
97 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
98 | exit /b 1
99 |
100 | :mainEnd
101 | if "%OS%"=="Windows_NT" endlocal
102 |
103 | :omega
104 |
--------------------------------------------------------------------------------
/example/android/app/src/debug/java/com/example/ReactNativeFlipper.java:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | *
This source code is licensed under the MIT license found in the LICENSE file in the root
5 | * directory of this source tree.
6 | */
7 | package com.example;
8 |
9 | import android.content.Context;
10 | import com.facebook.flipper.android.AndroidFlipperClient;
11 | import com.facebook.flipper.android.utils.FlipperUtils;
12 | import com.facebook.flipper.core.FlipperClient;
13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping;
17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
20 | import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
21 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
22 | import com.facebook.react.ReactInstanceManager;
23 | import com.facebook.react.bridge.ReactContext;
24 | import com.facebook.react.modules.network.NetworkingModule;
25 | import okhttp3.OkHttpClient;
26 |
27 | public class ReactNativeFlipper {
28 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
29 | if (FlipperUtils.shouldEnableFlipper(context)) {
30 | final FlipperClient client = AndroidFlipperClient.getInstance(context);
31 |
32 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
33 | client.addPlugin(new ReactFlipperPlugin());
34 | client.addPlugin(new DatabasesFlipperPlugin(context));
35 | client.addPlugin(new SharedPreferencesFlipperPlugin(context));
36 | client.addPlugin(CrashReporterPlugin.getInstance());
37 |
38 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39 | NetworkingModule.setCustomClientBuilder(
40 | new NetworkingModule.CustomClientBuilder() {
41 | @Override
42 | public void apply(OkHttpClient.Builder builder) {
43 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44 | }
45 | });
46 | client.addPlugin(networkFlipperPlugin);
47 | client.start();
48 |
49 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
50 | // Hence we run if after all native modules have been initialized
51 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
52 | if (reactContext == null) {
53 | reactInstanceManager.addReactInstanceEventListener(
54 | new ReactInstanceManager.ReactInstanceEventListener() {
55 | @Override
56 | public void onReactContextInitialized(ReactContext reactContext) {
57 | reactInstanceManager.removeReactInstanceEventListener(this);
58 | reactContext.runOnNativeModulesQueueThread(
59 | new Runnable() {
60 | @Override
61 | public void run() {
62 | client.addPlugin(new FrescoFlipperPlugin());
63 | }
64 | });
65 | }
66 | });
67 | } else {
68 | client.addPlugin(new FrescoFlipperPlugin());
69 | }
70 | }
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/example/ios/Example.xcodeproj/xcshareddata/xcschemes/Example.xcscheme:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
9 |
15 |
21 |
22 |
23 |
24 |
25 |
30 |
31 |
33 |
39 |
40 |
41 |
42 |
43 |
53 |
55 |
61 |
62 |
63 |
64 |
70 |
72 |
78 |
79 |
80 |
81 |
83 |
84 |
87 |
88 |
89 |
--------------------------------------------------------------------------------
/example/ios/Example.xcodeproj/xcshareddata/xcschemes/Example-tvOS.xcscheme:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
9 |
15 |
21 |
22 |
23 |
24 |
25 |
30 |
31 |
33 |
39 |
40 |
41 |
42 |
43 |
53 |
55 |
61 |
62 |
63 |
64 |
70 |
72 |
78 |
79 |
80 |
81 |
83 |
84 |
87 |
88 |
89 |
--------------------------------------------------------------------------------
/scripts/examples_postinstall.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | /*
4 | * Using libraries within examples and linking them within packages.json like:
5 | * "react-native-library-name": "file:../"
6 | * will cause problems with the metro bundler if the example will run via
7 | * `react-native run-[ios|android]`. This will result in an error as the metro
8 | * bundler will find multiple versions for the same module while resolving it.
9 | * The reason for that is that if the library is installed it also copies in the
10 | * example folder itself as well as the node_modules folder of the library
11 | * although their are defined in .npmignore and should be ignored in theory.
12 | *
13 | * This postinstall script removes the node_modules folder as well as all
14 | * entries from the libraries .npmignore file within the examples node_modules
15 | * folder after the library was installed. This should resolve the metro
16 | * bundler issue mentioned above.
17 | *
18 | * It is expected this scripts lives in the libraries root folder within a
19 | * scripts folder. As first parameter the relative path to the libraries
20 | * folder within the example's node_modules folder may be provided.
21 | * This script will determine the path from this project's package.json file
22 | * if no such relative path is provided.
23 | * An example's package.json entry could look like:
24 | * "postinstall": "node ../scripts/examples_postinstall.js node_modules/react-native-library-name/"
25 | */
26 |
27 | "use strict";
28 |
29 | const fs = require("fs");
30 | const path = require("path");
31 |
32 | /// Delete all files and directories for the given path
33 | const removeFileDirectoryRecursively = (fileDirPath) => {
34 | // Remove file
35 | if (!fs.lstatSync(fileDirPath).isDirectory()) {
36 | fs.unlinkSync(fileDirPath);
37 | return;
38 | }
39 |
40 | // Go down the directory an remove each file / directory recursively
41 | fs.readdirSync(fileDirPath).forEach((entry) => {
42 | const entryPath = path.join(fileDirPath, entry);
43 | removeFileDirectoryRecursively(entryPath);
44 | });
45 | fs.rmdirSync(fileDirPath);
46 | };
47 |
48 | /// Remove example/node_modules/react-native-library-name/node_modules directory
49 | const removeLibraryNodeModulesPath = (nodeModulesPath) => {
50 | if (!fs.existsSync(nodeModulesPath)) {
51 | console.log(
52 | `No node_modules found at ${nodeModulesPath}. Skipping delete.`
53 | );
54 | return;
55 | }
56 |
57 | try {
58 | removeFileDirectoryRecursively(nodeModulesPath);
59 | console.log(`Successfully deleted: ${nodeModulesPath}`);
60 | } catch (err) {
61 | console.log(`Error deleting ${nodeModulesPath}: ${err.message}`);
62 | }
63 | };
64 |
65 | /// Remove all entries from the .npmignore within example/node_modules/react-native-library-name/
66 | const removeLibraryNpmIgnorePaths = (npmIgnorePath, libraryNodeModulesPath) => {
67 | if (!fs.existsSync(npmIgnorePath)) {
68 | console.log(
69 | `No .npmignore found at ${npmIgnorePath}. Skipping deleting content.`
70 | );
71 | return;
72 | }
73 |
74 | fs.readFileSync(npmIgnorePath, "utf8")
75 | .split(/\r?\n/)
76 | .forEach((entry) => {
77 | if (entry.length === 0) {
78 | return;
79 | }
80 |
81 | const npmIgnoreLibraryNodeModulesEntryPath = path.resolve(
82 | libraryNodeModulesPath,
83 | entry
84 | );
85 | if (!fs.existsSync(npmIgnoreLibraryNodeModulesEntryPath)) {
86 | return;
87 | }
88 |
89 | try {
90 | removeFileDirectoryRecursively(npmIgnoreLibraryNodeModulesEntryPath);
91 | console.log(
92 | `Successfully deleted: ${npmIgnoreLibraryNodeModulesEntryPath}`
93 | );
94 | } catch (err) {
95 | console.log(
96 | `Error deleting ${npmIgnoreLibraryNodeModulesEntryPath}: ${err.message}`
97 | );
98 | }
99 | });
100 | };
101 |
102 | // Main start sweeping process
103 | (() => {
104 | // Read out dir of example project
105 | const cwd = process.cwd();
106 |
107 | console.log(`Starting postinstall cleanup for ${cwd}`);
108 |
109 | // Resolve the React Native library's path within the example's node_modules directory
110 | const libraryNodeModulesPath =
111 | process.argv.length > 2
112 | ? path.resolve(cwd, process.argv[2])
113 | : path.resolve(cwd, "node_modules", require("../package.json").name);
114 |
115 | console.log("Removing nested node_modules directory...");
116 | const nodeModulesPath = path.resolve(libraryNodeModulesPath, "node_modules");
117 | removeLibraryNodeModulesPath(nodeModulesPath);
118 |
119 | console.log("Processing .npmignore entries...");
120 | const npmIgnorePath = path.resolve(__dirname, "../.npmignore");
121 | removeLibraryNpmIgnorePaths(npmIgnorePath, libraryNodeModulesPath);
122 | })();
123 |
--------------------------------------------------------------------------------
/src/Modal.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import PropTypes from "prop-types";
3 | import {
4 | Animated,
5 | DeviceEventEmitter,
6 | Dimensions,
7 | Easing,
8 | Modal as ReactNativeModal,
9 | StyleSheet,
10 | TouchableWithoutFeedback,
11 | } from "react-native";
12 |
13 | const MODAL_ANIM_DURATION = 300;
14 | const MODAL_BACKDROP_OPACITY = 0.4;
15 |
16 | export class Modal extends Component {
17 | static propTypes = {
18 | onBackdropPress: PropTypes.func,
19 | onHide: PropTypes.func,
20 | isVisible: PropTypes.bool,
21 | contentStyle: PropTypes.any,
22 | };
23 |
24 | static defaultProps = {
25 | onBackdropPress: () => null,
26 | onHide: () => null,
27 | isVisible: false,
28 | };
29 |
30 | state = {
31 | isVisible: this.props.isVisible,
32 | deviceWidth: Dimensions.get("window").width,
33 | deviceHeight: Dimensions.get("window").height,
34 | };
35 |
36 | animVal = new Animated.Value(0);
37 | _isMounted = false;
38 |
39 | static _deviceEventEmitter = null;
40 |
41 | componentDidMount() {
42 | this._isMounted = true;
43 | if (this.state.isVisible) {
44 | this.show();
45 | }
46 | this._deviceEventEmitter = DeviceEventEmitter.addListener(
47 | "didUpdateDimensions",
48 | this.handleDimensionsUpdate
49 | );
50 | }
51 |
52 | componentWillUnmount() {
53 | this._deviceEventEmitter.remove();
54 | this._isMounted = false;
55 | }
56 |
57 | componentDidUpdate(prevProps: ModalPropsType) {
58 | if (this.props.isVisible && !prevProps.isVisible) {
59 | this.show();
60 | } else if (!this.props.isVisible && prevProps.isVisible) {
61 | this.hide();
62 | }
63 | }
64 |
65 | handleDimensionsUpdate = (dimensionsUpdate) => {
66 | const deviceWidth = dimensionsUpdate.window.width;
67 | const deviceHeight = dimensionsUpdate.window.height;
68 | if (
69 | deviceWidth !== this.state.deviceWidth ||
70 | deviceHeight !== this.state.deviceHeight
71 | ) {
72 | this.setState({ deviceWidth, deviceHeight });
73 | }
74 | };
75 |
76 | show = () => {
77 | this.setState({ isVisible: true });
78 | Animated.timing(this.animVal, {
79 | easing: Easing.inOut(Easing.quad),
80 | // Using native driver in the modal makes the content flash
81 | useNativeDriver: false,
82 | duration: MODAL_ANIM_DURATION,
83 | toValue: 1,
84 | }).start();
85 | };
86 |
87 | hide = () => {
88 | Animated.timing(this.animVal, {
89 | easing: Easing.inOut(Easing.quad),
90 | // Using native driver in the modal makes the content flash
91 | useNativeDriver: false,
92 | duration: MODAL_ANIM_DURATION,
93 | toValue: 0,
94 | }).start(() => {
95 | if (this._isMounted) {
96 | this.setState({ isVisible: false }, this.props.onHide);
97 | }
98 | });
99 | };
100 |
101 | render() {
102 | const {
103 | children,
104 | onBackdropPress,
105 | contentStyle,
106 | backdropStyle,
107 | ...otherProps
108 | } = this.props;
109 | const { deviceHeight, deviceWidth, isVisible } = this.state;
110 | const backdropAnimatedStyle = {
111 | opacity: this.animVal.interpolate({
112 | inputRange: [0, 1],
113 | outputRange: [0, MODAL_BACKDROP_OPACITY],
114 | }),
115 | };
116 | const contentAnimatedStyle = {
117 | transform: [
118 | {
119 | translateY: this.animVal.interpolate({
120 | inputRange: [0, 1],
121 | outputRange: [deviceHeight, 0],
122 | extrapolate: "clamp",
123 | }),
124 | },
125 | ],
126 | };
127 | return (
128 |
134 |
135 |
143 |
144 | {isVisible && (
145 |
149 | {children}
150 |
151 | )}
152 |
153 | );
154 | }
155 | }
156 |
157 | const styles = StyleSheet.create({
158 | container: {
159 | position: "absolute",
160 | top: 0,
161 | left: 0,
162 | right: 0,
163 | bottom: 0,
164 | },
165 | backdrop: {
166 | position: "absolute",
167 | top: 0,
168 | bottom: 0,
169 | left: 0,
170 | right: 0,
171 | backgroundColor: "black",
172 | opacity: 0,
173 | },
174 | content: {
175 | flex: 1,
176 | justifyContent: "flex-end",
177 | },
178 | });
179 |
180 | export default Modal;
181 |
--------------------------------------------------------------------------------
/example/ios/Example/LaunchScreen.storyboard:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
25 |
31 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/example/android/gradlew:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 |
3 | #
4 | # Copyright 2015 the original author or authors.
5 | #
6 | # Licensed under the Apache License, Version 2.0 (the "License");
7 | # you may not use this file except in compliance with the License.
8 | # You may obtain a copy of the License at
9 | #
10 | # https://www.apache.org/licenses/LICENSE-2.0
11 | #
12 | # Unless required by applicable law or agreed to in writing, software
13 | # distributed under the License is distributed on an "AS IS" BASIS,
14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 | # See the License for the specific language governing permissions and
16 | # limitations under the License.
17 | #
18 |
19 | ##############################################################################
20 | ##
21 | ## Gradle start up script for UN*X
22 | ##
23 | ##############################################################################
24 |
25 | # Attempt to set APP_HOME
26 | # Resolve links: $0 may be a link
27 | PRG="$0"
28 | # Need this for relative symlinks.
29 | while [ -h "$PRG" ] ; do
30 | ls=`ls -ld "$PRG"`
31 | link=`expr "$ls" : '.*-> \(.*\)$'`
32 | if expr "$link" : '/.*' > /dev/null; then
33 | PRG="$link"
34 | else
35 | PRG=`dirname "$PRG"`"/$link"
36 | fi
37 | done
38 | SAVED="`pwd`"
39 | cd "`dirname \"$PRG\"`/" >/dev/null
40 | APP_HOME="`pwd -P`"
41 | cd "$SAVED" >/dev/null
42 |
43 | APP_NAME="Gradle"
44 | APP_BASE_NAME=`basename "$0"`
45 |
46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
48 |
49 | # Use the maximum available, or set MAX_FD != -1 to use that value.
50 | MAX_FD="maximum"
51 |
52 | warn () {
53 | echo "$*"
54 | }
55 |
56 | die () {
57 | echo
58 | echo "$*"
59 | echo
60 | exit 1
61 | }
62 |
63 | # OS specific support (must be 'true' or 'false').
64 | cygwin=false
65 | msys=false
66 | darwin=false
67 | nonstop=false
68 | case "`uname`" in
69 | CYGWIN* )
70 | cygwin=true
71 | ;;
72 | Darwin* )
73 | darwin=true
74 | ;;
75 | MINGW* )
76 | msys=true
77 | ;;
78 | NONSTOP* )
79 | nonstop=true
80 | ;;
81 | esac
82 |
83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
84 |
85 | # Determine the Java command to use to start the JVM.
86 | if [ -n "$JAVA_HOME" ] ; then
87 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
88 | # IBM's JDK on AIX uses strange locations for the executables
89 | JAVACMD="$JAVA_HOME/jre/sh/java"
90 | else
91 | JAVACMD="$JAVA_HOME/bin/java"
92 | fi
93 | if [ ! -x "$JAVACMD" ] ; then
94 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
95 |
96 | Please set the JAVA_HOME variable in your environment to match the
97 | location of your Java installation."
98 | fi
99 | else
100 | JAVACMD="java"
101 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
102 |
103 | Please set the JAVA_HOME variable in your environment to match the
104 | location of your Java installation."
105 | fi
106 |
107 | # Increase the maximum file descriptors if we can.
108 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
109 | MAX_FD_LIMIT=`ulimit -H -n`
110 | if [ $? -eq 0 ] ; then
111 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
112 | MAX_FD="$MAX_FD_LIMIT"
113 | fi
114 | ulimit -n $MAX_FD
115 | if [ $? -ne 0 ] ; then
116 | warn "Could not set maximum file descriptor limit: $MAX_FD"
117 | fi
118 | else
119 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
120 | fi
121 | fi
122 |
123 | # For Darwin, add options to specify how the application appears in the dock
124 | if $darwin; then
125 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
126 | fi
127 |
128 | # For Cygwin or MSYS, switch paths to Windows format before running java
129 | if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
130 | APP_HOME=`cygpath --path --mixed "$APP_HOME"`
131 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
132 | JAVACMD=`cygpath --unix "$JAVACMD"`
133 |
134 | # We build the pattern for arguments to be converted via cygpath
135 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
136 | SEP=""
137 | for dir in $ROOTDIRSRAW ; do
138 | ROOTDIRS="$ROOTDIRS$SEP$dir"
139 | SEP="|"
140 | done
141 | OURCYGPATTERN="(^($ROOTDIRS))"
142 | # Add a user-defined pattern to the cygpath arguments
143 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then
144 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
145 | fi
146 | # Now convert the arguments - kludge to limit ourselves to /bin/sh
147 | i=0
148 | for arg in "$@" ; do
149 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
150 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option
151 |
152 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition
153 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
154 | else
155 | eval `echo args$i`="\"$arg\""
156 | fi
157 | i=`expr $i + 1`
158 | done
159 | case $i in
160 | 0) set -- ;;
161 | 1) set -- "$args0" ;;
162 | 2) set -- "$args0" "$args1" ;;
163 | 3) set -- "$args0" "$args1" "$args2" ;;
164 | 4) set -- "$args0" "$args1" "$args2" "$args3" ;;
165 | 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
166 | 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
167 | 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
168 | 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
169 | 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
170 | esac
171 | fi
172 |
173 | # Escape application args
174 | save () {
175 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
176 | echo " "
177 | }
178 | APP_ARGS=`save "$@"`
179 |
180 | # Collect all arguments for the java command, following the shell quoting and substitution rules
181 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
182 |
183 | exec "$JAVACMD" "$@"
184 |
--------------------------------------------------------------------------------
/typings/index.d.ts:
--------------------------------------------------------------------------------
1 | // Type definitions for react-native-modal-datetime-picker
2 | // Project: https://github.com/mmazzarolo/react-native-modal-datetime-picker
3 | // Definitions by:
4 | // Kyle Roach
5 | // Michiel De Mey
6 | // TypeScript Version: 3.5
7 |
8 | import * as React from "react";
9 | import { ViewStyle } from "react-native";
10 | import {
11 | IOSNativeProps,
12 | AndroidNativeProps,
13 | } from "@react-native-community/datetimepicker";
14 |
15 | export type CancelButtonStylePropTypes = {
16 | button: {
17 | borderRadius: number,
18 | height: number | string,
19 | marginBottom: number | string,
20 | justifyContent: string,
21 | },
22 | buttonLight: {
23 | backgroundColor: string,
24 | },
25 | buttonDark: {
26 | backgroundColor: string,
27 | },
28 | text: {
29 | padding: number | string,
30 | textAlign: string,
31 | color: string,
32 | fontSize: number,
33 | fontWeight: string,
34 | backgroundColor: string,
35 | },
36 | };
37 |
38 | export type ConfirmButtonStylePropTypes = {
39 | button: {
40 | borderTopWidth: number,
41 | backgroundColor: string,
42 | height: number | string,
43 | justifyContent: string,
44 | },
45 | buttonLight: {
46 | borderColor: string,
47 | },
48 | buttonDark: {
49 | borderColor: string,
50 | },
51 | text: {
52 | textAlign: string,
53 | color: string,
54 | fontSize: number,
55 | fontWeight: string,
56 | backgroundColor: string,
57 | },
58 | };
59 |
60 | export type CancelButtonPropTypes = {
61 | isDarkModeEnabled?: boolean,
62 | cancelButtonTestID?: string,
63 | onPress: () => void,
64 | label: string,
65 | buttonTextColorIOS?: string,
66 | style?: CancelButtonStylePropTypes,
67 | };
68 |
69 | export type ConfirmButtonPropTypes = {
70 | isDarkModeEnabled?: boolean,
71 | confirmButtonTestID?: string,
72 | onPress: () => void,
73 | label: string,
74 | buttonTextColorIOS?: string,
75 | style?: ConfirmButtonStylePropTypes,
76 | };
77 |
78 | export type CustomCancelButtonPropTypes = {
79 | isDarkModeEnabled?: boolean,
80 | onPress: () => void,
81 | label: string,
82 | };
83 |
84 | export type CustomConfirmButtonPropTypes = {
85 | isDarkModeEnabled?: boolean,
86 | onPress: () => void,
87 | label: string,
88 | };
89 |
90 | export type HeaderComponent = React.ComponentType<{
91 | label: string;
92 | }>;
93 |
94 | export type PickerComponent = React.ComponentType;
95 |
96 | export interface DateTimePickerProps {
97 | /**
98 | * iOS buttons text color
99 | *
100 | * Default is '#007ff9'
101 | */
102 | buttonTextColorIOS?: string;
103 |
104 | /**
105 | * The prop to locate cancel button for e2e testing
106 | */
107 | cancelButtonTestID?: string;
108 |
109 | /**
110 | * The prop to locate confirm button for e2e testing
111 | */
112 | confirmButtonTestID?: string;
113 |
114 | /**
115 | * The text on the cancel button on iOS
116 | *
117 | * Default is 'Cancel'
118 | */
119 | cancelTextIOS?: string;
120 |
121 | /**
122 | * The text on the confirm button on iOS
123 | *
124 | * Default is 'Confirm'
125 | */
126 | confirmTextIOS?: string;
127 |
128 | /**
129 | * A custom component for the cancel button on iOS
130 | */
131 | customCancelButtonIOS?: React.FunctionComponent;
132 |
133 | /**
134 | * A custom component for the confirm button on iOS
135 | */
136 | customConfirmButtonIOS?: React.FunctionComponent;
137 |
138 | /**
139 | * A custom component for the title container on iOS
140 | */
141 | customHeaderIOS?: HeaderComponent;
142 |
143 | /**
144 | * A custom component that will replace the default DatePicker on iOS
145 | */
146 | customPickerIOS?: PickerComponent;
147 |
148 | /**
149 | * Style of the backgrop (iOS)
150 | */
151 | backdropStyleIOS?: ViewStyle;
152 |
153 | /**
154 | * Style of the modal content (iOS)
155 | */
156 | modalStyleIOS?: ViewStyle;
157 |
158 | /**
159 | * The style of the picker container (iOS)
160 | */
161 | pickerContainerStyleIOS?: ViewStyle;
162 |
163 | /**
164 | * The style applied to the actual picker component - this can be
165 | * either a native iOS picker or a custom one if `customPickerIOS` was provided
166 | */
167 | pickerComponentStyleIOS?: ViewStyle;
168 |
169 | /**
170 | * Initial selected date/time
171 | *
172 | * Default is a date object from `new Date()`
173 | */
174 | date?: Date;
175 |
176 | /**
177 | * The date picker locale.
178 | */
179 | locale?: string;
180 |
181 | /**
182 | * Toggles the dark mode style of the picker
183 | * If not set, the picker tries to use the color-scheme from the Appearance module, if available.
184 | *
185 | * Default is undefined
186 | */
187 | isDarkModeEnabled?: boolean;
188 |
189 | /**
190 | * Sets the visibility of the picker
191 | *
192 | * Default is false
193 | */
194 | isVisible?: boolean;
195 |
196 | /**
197 | * Sets mode to 24 hour time
198 | * If false, the picker shows an AM/PM chooser on Android
199 | *
200 | * Default is true
201 | */
202 | is24Hour?: boolean;
203 |
204 | /**
205 | * The mode of the picker
206 | *
207 | * Available modes are:
208 | * date - Shows Datepicker
209 | * time - Shows Timepicker
210 | * datetime - Shows a combined Date and Time Picker
211 | *
212 | * Default is 'date'
213 | */
214 | mode?: "date" | "time" | "datetime";
215 |
216 | /**
217 | * Additional modal props for iOS.
218 | *
219 | * See https://reactnative.dev/docs/modal for the available props.
220 | */
221 | modalPropsIOS?: Object;
222 |
223 | /**
224 | * Toggles the time mode on Android between spinner and clock views
225 | *
226 | * Default is 'default' which shows either spinner or clock based on Android version
227 | */
228 | timePickerModeAndroid?: "spinner" | "clock" | "default";
229 |
230 | /**
231 | * Minimum date the picker can go back to
232 | */
233 | minimumDate?: Date;
234 |
235 | /**
236 | * Maximum date the picker can go forward to
237 | */
238 | maximumDate?: Date;
239 |
240 | /**
241 | * enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)
242 | * The interval at which minutes can be selected.
243 | *
244 | * @extends from DatePickerIOSProperties
245 | */
246 | minuteInterval?: 1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30;
247 |
248 | /**
249 | * Timezone offset in minutes.
250 | * By default, the date picker will use the device's timezone. With this parameter, it is possible to force a certain timezone offset.
251 | * For instance, to show times in Pacific Standard Time, pass -7 * 60.
252 | *
253 | * @extends from DatePickerIOSProperties
254 | */
255 | timeZoneOffsetInMinutes?: number;
256 |
257 | /**
258 | * Date change handler.
259 | * This is called when the user changes the date or time in the UI.
260 | * The first and only argument is a Date object representing the new date and time.
261 | */
262 | onChange?(newDate: Date): void;
263 |
264 | /**
265 | * Handler called when the user presses the confirm button
266 | * Passes the current selected date
267 | */
268 | onConfirm(date: Date): void;
269 |
270 | /**
271 | * Handler called when the user presses the cancel button
272 | */
273 | onCancel(): void;
274 |
275 | /**
276 | * Called when the underlying modal finishes its' closing animation
277 | * after Confirm was pressed.
278 | */
279 | onHide?(date: Date): void;
280 |
281 | /**
282 | * Used to locate this view in end-to-end tests.
283 | */
284 | testID?: string;
285 |
286 | /**
287 | * The style of the picker \ (iOS)
288 | */
289 | pickerStyleIOS?: ViewStyle;
290 | }
291 |
292 | type NativePickerProps =
293 | | Omit
294 | | Omit;
295 |
296 | export type ReactNativeModalDateTimePickerProps = DateTimePickerProps &
297 | NativePickerProps;
298 |
299 | export default class DateTimePicker extends React.Component<
300 | ReactNativeModalDateTimePickerProps,
301 | any
302 | > {}
303 |
304 | export const cancelButtonStyles: CancelButtonStylePropTypes;
305 |
306 | export const CancelButton: React.FunctionComponent;
307 |
308 | export const confirmButtonStyles: ConfirmButtonStylePropTypes;
309 |
310 | export const ConfirmButton: React.FunctionComponent;
311 |
--------------------------------------------------------------------------------
/example/android/app/build.gradle:
--------------------------------------------------------------------------------
1 | apply plugin: "com.android.application"
2 |
3 | import com.android.build.OutputFile
4 |
5 | /**
6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
7 | * and bundleReleaseJsAndAssets).
8 | * These basically call `react-native bundle` with the correct arguments during the Android build
9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
10 | * bundle directly from the development server. Below you can see all the possible configurations
11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the
12 | * `apply from: "../../node_modules/react-native/react.gradle"` line.
13 | *
14 | * project.ext.react = [
15 | * // the name of the generated asset file containing your JS bundle
16 | * bundleAssetName: "index.android.bundle",
17 | *
18 | * // the entry file for bundle generation. If none specified and
19 | * // "index.android.js" exists, it will be used. Otherwise "index.js" is
20 | * // default. Can be overridden with ENTRY_FILE environment variable.
21 | * entryFile: "index.android.js",
22 | *
23 | * // https://reactnative.dev/docs/performance#enable-the-ram-format
24 | * bundleCommand: "ram-bundle",
25 | *
26 | * // whether to bundle JS and assets in debug mode
27 | * bundleInDebug: false,
28 | *
29 | * // whether to bundle JS and assets in release mode
30 | * bundleInRelease: true,
31 | *
32 | * // whether to bundle JS and assets in another build variant (if configured).
33 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
34 | * // The configuration property can be in the following formats
35 | * // 'bundleIn${productFlavor}${buildType}'
36 | * // 'bundleIn${buildType}'
37 | * // bundleInFreeDebug: true,
38 | * // bundleInPaidRelease: true,
39 | * // bundleInBeta: true,
40 | *
41 | * // whether to disable dev mode in custom build variants (by default only disabled in release)
42 | * // for example: to disable dev mode in the staging build type (if configured)
43 | * devDisabledInStaging: true,
44 | * // The configuration property can be in the following formats
45 | * // 'devDisabledIn${productFlavor}${buildType}'
46 | * // 'devDisabledIn${buildType}'
47 | *
48 | * // the root of your project, i.e. where "package.json" lives
49 | * root: "../../",
50 | *
51 | * // where to put the JS bundle asset in debug mode
52 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
53 | *
54 | * // where to put the JS bundle asset in release mode
55 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release",
56 | *
57 | * // where to put drawable resources / React Native assets, e.g. the ones you use via
58 | * // require('./image.png')), in debug mode
59 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
60 | *
61 | * // where to put drawable resources / React Native assets, e.g. the ones you use via
62 | * // require('./image.png')), in release mode
63 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
64 | *
65 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means
66 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
67 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle
68 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
69 | * // for example, you might want to remove it from here.
70 | * inputExcludes: ["android/**", "ios/**"],
71 | *
72 | * // override which node gets called and with what additional arguments
73 | * nodeExecutableAndArgs: ["node"],
74 | *
75 | * // supply additional arguments to the packager
76 | * extraPackagerArgs: []
77 | * ]
78 | */
79 |
80 | project.ext.react = [
81 | enableHermes: false, // clean and rebuild if changing
82 | ]
83 |
84 | apply from: "../../node_modules/react-native/react.gradle"
85 |
86 | /**
87 | * Set this to true to create two separate APKs instead of one:
88 | * - An APK that only works on ARM devices
89 | * - An APK that only works on x86 devices
90 | * The advantage is the size of the APK is reduced by about 4MB.
91 | * Upload all the APKs to the Play Store and people will download
92 | * the correct one based on the CPU architecture of their device.
93 | */
94 | def enableSeparateBuildPerCPUArchitecture = false
95 |
96 | /**
97 | * Run Proguard to shrink the Java bytecode in release builds.
98 | */
99 | def enableProguardInReleaseBuilds = false
100 |
101 | /**
102 | * The preferred build flavor of JavaScriptCore.
103 | *
104 | * For example, to use the international variant, you can use:
105 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
106 | *
107 | * The international variant includes ICU i18n library and necessary data
108 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
109 | * give correct results when using with locales other than en-US. Note that
110 | * this variant is about 6MiB larger per architecture than default.
111 | */
112 | def jscFlavor = 'org.webkit:android-jsc:+'
113 |
114 | /**
115 | * Whether to enable the Hermes VM.
116 | *
117 | * This should be set on project.ext.react and mirrored here. If it is not set
118 | * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
119 | * and the benefits of using Hermes will therefore be sharply reduced.
120 | */
121 | def enableHermes = project.ext.react.get("enableHermes", false);
122 |
123 | android {
124 | compileSdkVersion rootProject.ext.compileSdkVersion
125 |
126 | compileOptions {
127 | sourceCompatibility JavaVersion.VERSION_1_8
128 | targetCompatibility JavaVersion.VERSION_1_8
129 | }
130 |
131 | defaultConfig {
132 | applicationId "com.example"
133 | minSdkVersion rootProject.ext.minSdkVersion
134 | targetSdkVersion rootProject.ext.targetSdkVersion
135 | versionCode 1
136 | versionName "1.0"
137 | }
138 | splits {
139 | abi {
140 | reset()
141 | enable enableSeparateBuildPerCPUArchitecture
142 | universalApk false // If true, also generate a universal APK
143 | include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
144 | }
145 | }
146 | signingConfigs {
147 | debug {
148 | storeFile file('debug.keystore')
149 | storePassword 'android'
150 | keyAlias 'androiddebugkey'
151 | keyPassword 'android'
152 | }
153 | }
154 | buildTypes {
155 | debug {
156 | signingConfig signingConfigs.debug
157 | }
158 | release {
159 | // Caution! In production, you need to generate your own keystore file.
160 | // see https://reactnative.dev/docs/signed-apk-android.
161 | signingConfig signingConfigs.debug
162 | minifyEnabled enableProguardInReleaseBuilds
163 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
164 | }
165 | }
166 |
167 | // applicationVariants are e.g. debug, release
168 | applicationVariants.all { variant ->
169 | variant.outputs.each { output ->
170 | // For each separate APK per architecture, set a unique version code as described here:
171 | // https://developer.android.com/studio/build/configure-apk-splits.html
172 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
173 | def abi = output.getFilter(OutputFile.ABI)
174 | if (abi != null) { // null for the universal-debug, universal-release variants
175 | output.versionCodeOverride =
176 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
177 | }
178 |
179 | }
180 | }
181 | }
182 |
183 | dependencies {
184 | implementation fileTree(dir: "libs", include: ["*.jar"])
185 | //noinspection GradleDynamicVersion
186 | implementation "com.facebook.react:react-native:+" // From node_modules
187 |
188 | implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
189 |
190 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
191 | exclude group:'com.facebook.fbjni'
192 | }
193 |
194 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
195 | exclude group:'com.facebook.flipper'
196 | exclude group:'com.squareup.okhttp3', module:'okhttp'
197 | }
198 |
199 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
200 | exclude group:'com.facebook.flipper'
201 | }
202 |
203 | if (enableHermes) {
204 | def hermesPath = "../../node_modules/hermes-engine/android/";
205 | debugImplementation files(hermesPath + "hermes-debug.aar")
206 | releaseImplementation files(hermesPath + "hermes-release.aar")
207 | } else {
208 | implementation jscFlavor
209 | }
210 | }
211 |
212 | // Run this once to be able to run the application with BUCK
213 | // puts all compile dependencies into folder libs for BUCK to use
214 | task copyDownloadableDepsToLibs(type: Copy) {
215 | from configurations.compile
216 | into 'libs'
217 | }
218 |
219 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
220 |
--------------------------------------------------------------------------------
/src/DateTimePickerModal.ios.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import {
4 | StyleSheet,
5 | Text,
6 | TouchableHighlight,
7 | View,
8 | Appearance,
9 | } from "react-native";
10 | import DateTimePicker from "@react-native-community/datetimepicker";
11 | import Modal from "./Modal";
12 | import { isIphoneX } from "./utils";
13 |
14 | export const BACKGROUND_COLOR_LIGHT = "white";
15 | export const BACKGROUND_COLOR_DARK = "#0E0E0E";
16 | export const BORDER_COLOR = "#d5d5d5";
17 | export const BORDER_COLOR_DARK = "#272729";
18 | export const BORDER_RADIUS = 13;
19 | export const BUTTON_FONT_WEIGHT = "normal";
20 | export const BUTTON_FONT_COLOR = "#007ff9";
21 | export const BUTTON_FONT_SIZE = 20;
22 | export const HIGHLIGHT_COLOR_DARK = "#444444";
23 | export const HIGHLIGHT_COLOR_LIGHT = "#ebebeb";
24 |
25 | export class DateTimePickerModal extends React.PureComponent {
26 | static propTypes = {
27 | buttonTextColorIOS: PropTypes.string,
28 | cancelButtonTestID: PropTypes.string,
29 | confirmButtonTestID: PropTypes.string,
30 | cancelTextIOS: PropTypes.string,
31 | confirmTextIOS: PropTypes.string,
32 | customCancelButtonIOS: PropTypes.elementType,
33 | customConfirmButtonIOS: PropTypes.elementType,
34 | customHeaderIOS: PropTypes.elementType,
35 | customPickerIOS: PropTypes.elementType,
36 | date: PropTypes.instanceOf(Date),
37 | modalPropsIOS: PropTypes.any,
38 | modalStyleIOS: PropTypes.any,
39 | isDarkModeEnabled: PropTypes.bool,
40 | isVisible: PropTypes.bool,
41 | pickerContainerStyleIOS: PropTypes.any,
42 | pickerStyleIOS: PropTypes.any,
43 | backdropStyleIOS: PropTypes.any,
44 | pickerComponentStyleIOS: PropTypes.any,
45 | onCancel: PropTypes.func.isRequired,
46 | onConfirm: PropTypes.func.isRequired,
47 | onChange: PropTypes.func,
48 | onHide: PropTypes.func,
49 | maximumDate: PropTypes.instanceOf(Date),
50 | minimumDate: PropTypes.instanceOf(Date),
51 | };
52 |
53 | static defaultProps = {
54 | cancelTextIOS: "Cancel",
55 | confirmTextIOS: "Confirm",
56 | modalPropsIOS: {},
57 | date: new Date(),
58 | isDarkModeEnabled: undefined,
59 | isVisible: false,
60 | pickerContainerStyleIOS: {},
61 | pickerStyleIOS: {},
62 | backdropStyleIOS: {},
63 | pickerComponentStyleIOS: {},
64 | };
65 |
66 | state = {
67 | currentDate: this.props.date,
68 | isPickerVisible: this.props.isVisible,
69 | };
70 |
71 | didPressConfirm = false;
72 |
73 | static getDerivedStateFromProps(props, state) {
74 | if (props.isVisible && !state.isPickerVisible) {
75 | return { currentDate: props.date, isPickerVisible: true };
76 | }
77 | return null;
78 | }
79 |
80 | handleCancel = () => {
81 | this.didPressConfirm = false;
82 | this.props.onCancel();
83 | };
84 |
85 | handleConfirm = () => {
86 | this.didPressConfirm = true;
87 | this.props.onConfirm(this.state.currentDate);
88 | };
89 |
90 | handleHide = () => {
91 | const { onHide } = this.props;
92 | if (onHide) {
93 | onHide(this.didPressConfirm, this.state.currentDate);
94 | }
95 | this.setState({ isPickerVisible: false });
96 | };
97 |
98 | handleChange = (event, date) => {
99 | if (this.props.onChange) {
100 | this.props.onChange(date);
101 | }
102 | this.setState({ currentDate: date });
103 | };
104 |
105 | render() {
106 | const {
107 | cancelButtonTestID,
108 | confirmButtonTestID,
109 | cancelTextIOS,
110 | confirmTextIOS,
111 | customCancelButtonIOS,
112 | customConfirmButtonIOS,
113 | customHeaderIOS,
114 | customPickerIOS,
115 | date,
116 | display,
117 | isDarkModeEnabled,
118 | isVisible,
119 | modalStyleIOS,
120 | modalPropsIOS,
121 | pickerContainerStyleIOS,
122 | pickerStyleIOS,
123 | pickerComponentStyleIOS,
124 | onCancel,
125 | onConfirm,
126 | onChange,
127 | onHide,
128 | backdropStyleIOS,
129 | buttonTextColorIOS,
130 | ...otherProps
131 | } = this.props;
132 | const isAppearanceModuleAvailable = !!(
133 | Appearance && Appearance.getColorScheme
134 | );
135 | const _isDarkModeEnabled =
136 | isDarkModeEnabled === undefined && isAppearanceModuleAvailable
137 | ? Appearance.getColorScheme() === "dark"
138 | : isDarkModeEnabled || false;
139 |
140 | const ConfirmButtonComponent = customConfirmButtonIOS || ConfirmButton;
141 | const CancelButtonComponent = customCancelButtonIOS || CancelButton;
142 | const PickerComponent = customPickerIOS || DateTimePicker;
143 | const HeaderComponent = customHeaderIOS;
144 |
145 | const themedContainerStyle = _isDarkModeEnabled
146 | ? pickerStyles.containerDark
147 | : pickerStyles.containerLight;
148 |
149 | return (
150 |
158 |
165 | {HeaderComponent && }
166 | {!HeaderComponent && display === "inline" && (
167 |
168 | )}
169 |
177 |
199 |
200 |
207 |
208 |
215 |
216 | );
217 | }
218 | }
219 |
220 | const pickerStyles = StyleSheet.create({
221 | modal: {
222 | justifyContent: "flex-end",
223 | margin: 10,
224 | marginBottom: isIphoneX() ? 34 : 10,
225 | },
226 | container: {
227 | borderRadius: BORDER_RADIUS,
228 | marginBottom: 8,
229 | overflow: "hidden",
230 | },
231 | pickerSpinner: {
232 | marginBottom: 8,
233 | },
234 | pickerInline: {
235 | paddingHorizontal: 12,
236 | paddingTop: 14,
237 | },
238 | containerLight: {
239 | backgroundColor: BACKGROUND_COLOR_LIGHT,
240 | },
241 | containerDark: {
242 | backgroundColor: BACKGROUND_COLOR_DARK,
243 | },
244 | });
245 |
246 | export const ConfirmButton = ({
247 | isDarkModeEnabled,
248 | confirmButtonTestID,
249 | onPress,
250 | label,
251 | buttonTextColorIOS,
252 | style = confirmButtonStyles,
253 | }) => {
254 | const themedButtonStyle = isDarkModeEnabled
255 | ? confirmButtonStyles.buttonDark
256 | : confirmButtonStyles.buttonLight;
257 |
258 | const underlayColor = isDarkModeEnabled
259 | ? HIGHLIGHT_COLOR_DARK
260 | : HIGHLIGHT_COLOR_LIGHT;
261 | return (
262 |
271 |
277 | {label}
278 |
279 |
280 | );
281 | };
282 |
283 | export const confirmButtonStyles = StyleSheet.create({
284 | button: {
285 | borderTopWidth: StyleSheet.hairlineWidth,
286 | backgroundColor: "transparent",
287 | height: 57,
288 | justifyContent: "center",
289 | },
290 | buttonLight: {
291 | borderColor: BORDER_COLOR,
292 | },
293 | buttonDark: {
294 | borderColor: BORDER_COLOR_DARK,
295 | },
296 | text: {
297 | textAlign: "center",
298 | color: BUTTON_FONT_COLOR,
299 | fontSize: BUTTON_FONT_SIZE,
300 | fontWeight: BUTTON_FONT_WEIGHT,
301 | backgroundColor: "transparent",
302 | },
303 | });
304 |
305 | export const CancelButton = ({
306 | cancelButtonTestID,
307 | isDarkModeEnabled,
308 | onPress,
309 | label,
310 | buttonTextColorIOS,
311 | style = cancelButtonStyles,
312 | }) => {
313 | const themedButtonStyle = isDarkModeEnabled
314 | ? cancelButtonStyles.buttonDark
315 | : cancelButtonStyles.buttonLight;
316 | const underlayColor = isDarkModeEnabled
317 | ? HIGHLIGHT_COLOR_DARK
318 | : HIGHLIGHT_COLOR_LIGHT;
319 | return (
320 |
329 |
335 | {label}
336 |
337 |
338 | );
339 | };
340 |
341 | export const cancelButtonStyles = StyleSheet.create({
342 | button: {
343 | borderRadius: BORDER_RADIUS,
344 | height: 57,
345 | justifyContent: "center",
346 | },
347 | buttonLight: {
348 | backgroundColor: BACKGROUND_COLOR_LIGHT,
349 | },
350 | buttonDark: {
351 | backgroundColor: BACKGROUND_COLOR_DARK,
352 | },
353 | text: {
354 | padding: 10,
355 | textAlign: "center",
356 | color: BUTTON_FONT_COLOR,
357 | fontSize: BUTTON_FONT_SIZE,
358 | fontWeight: "600",
359 | backgroundColor: "transparent",
360 | },
361 | });
362 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-native-modal-datetime-picker
2 |
3 | [](https://badge.fury.io/js/react-native-modal-datetime-picker)
4 | 
5 |
6 | A declarative cross-platform react-native date and time picker.
7 |
8 |
9 |
10 |
11 |
12 |
13 | This library exposes a cross-platform interface for showing the native date-picker and time-picker inside a modal, providing a unified user and developer experience.
14 |
15 | Under the hood, this library is using [`@react-native-community/datetimepicker`](https://github.com/react-native-community/react-native-datetimepicker).
16 |
17 | ## Setup (for non-Expo projects)
18 |
19 | If your project is not using [Expo](https://expo.io/), install the library and the community date/time picker using npm or yarn:
20 |
21 | ```bash
22 | # using npm
23 | $ npm i react-native-modal-datetime-picker @react-native-community/datetimepicker
24 |
25 | # using yarn
26 | $ yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker
27 | ```
28 |
29 | Please notice that the `@react-native-community/datetimepicker` package is a native module so [**it might require manual linking**](https://github.com/react-native-community/react-native-datetimepicker#getting-started).
30 |
31 | ## Setup (for Expo projects)
32 |
33 | If your project is using [Expo](https://expo.io/), install the library and the community date/time picker using the [Expo CLI](https://docs.expo.io/versions/latest/workflow/expo-cli/):
34 |
35 | ```bash
36 | npx expo install react-native-modal-datetime-picker @react-native-community/datetimepicker
37 | ```
38 |
39 | To ensure the picker theme respects the device theme, you should also configure the appearance styles in your `app.json` this way:
40 |
41 | ```json
42 | {
43 | "expo": {
44 | "userInterfaceStyle": "automatic"
45 | }
46 | }
47 | ```
48 |
49 | Refer to the [Appearance](https://docs.expo.io/versions/latest/sdk/appearance/) documentation on [Expo](https://expo.io/) for more info.
50 |
51 | ## Usage
52 |
53 | ```javascript
54 | import React, { useState } from "react";
55 | import { Button, View } from "react-native";
56 | import DateTimePickerModal from "react-native-modal-datetime-picker";
57 |
58 | const Example = () => {
59 | const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
60 |
61 | const showDatePicker = () => {
62 | setDatePickerVisibility(true);
63 | };
64 |
65 | const hideDatePicker = () => {
66 | setDatePickerVisibility(false);
67 | };
68 |
69 | const handleConfirm = (date) => {
70 | console.warn("A date has been picked: ", date);
71 | hideDatePicker();
72 | };
73 |
74 | return (
75 |
76 |
77 |
83 |
84 | );
85 | };
86 |
87 | export default Example;
88 | ```
89 |
90 | ## Available props
91 |
92 | 👉 Please notice that **all the [`@react-native-community/react-native-datetimepicker`](https://github.com/react-native-community/react-native-datetimepicker) props are supported** as well!
93 |
94 | | Name | Type | Default | Description |
95 | | ------------------------- | --------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
96 | | `buttonTextColorIOS` | string | | The color of the confirm button texts (iOS) |
97 | | `backdropStyleIOS` | style | | The style of the picker backdrop view style (iOS) |
98 | | `cancelButtonTestID` | string | | Used to locate cancel button in end-to-end tests |
99 | | `cancelTextIOS` | string | "Cancel" | The label of the cancel button (iOS) |
100 | | `confirmButtonTestID` | string | | Used to locate confirm button in end-to-end tests |
101 | | `confirmTextIOS` | string | "Confirm" | The label of the confirm button (iOS) |
102 | | `customCancelButtonIOS` | component | | Overrides the default cancel button component (iOS) |
103 | | `customConfirmButtonIOS` | component | | Overrides the default confirm button component (iOS) |
104 | | `customHeaderIOS` | component | | Overrides the default header component (iOS) |
105 | | `customPickerIOS` | component | | Overrides the default native picker component (iOS) |
106 | | `date` | obj | new Date() | Initial selected date/time |
107 | | `isVisible` | bool | false | Show the datetime picker? |
108 | | `isDarkModeEnabled` | bool? | undefined | Forces the picker dark/light mode if set (otherwise fallbacks to the Appearance color scheme) (iOS) |
109 | | `modalPropsIOS` | object | {} | Additional [modal](https://reactnative.dev/docs/modal) props for iOS |
110 | | `modalStyleIOS` | style | | Style of the modal content (iOS) |
111 | | `mode` | string | "date" | Choose between "date", "time", and "datetime" |
112 | | `onCancel` | func | **REQUIRED** | Function called on dismiss |
113 | | `onChange` | func | () => null | Function called when the date changes (with the new date as parameter). |
114 | | `onConfirm` | func | **REQUIRED** | Function called on date or time picked. It returns the date or time as a JavaScript Date object |
115 | | `onHide` | func | () => null | Called after the hide animation |
116 | | `pickerContainerStyleIOS` | style | | The style of the picker container (iOS) |
117 | | `pickerStyleIOS` | style | | The style of the picker component wrapper (iOS) |
118 | | `pickerComponentStyleIOS` | style | | The style applied to the actual picker component - this can be either a native iOS picker or a custom one if `customPickerIOS` was provided |
119 |
120 | ## Frequently Asked Questions
121 |
122 | This repo is only maintained by me, and unfortunately I don't have enough time for dedicated support & question.
123 | If you're experiencing issues, please check the FAQs below.
124 | For questions and support, please start [try starting a discussion](https://github.com/mmazzarolo/react-native-modal-datetime-picker/discussions) or try asking it on [StackOverflow](stackoverflow).
125 | ⚠️ **Please use [the GitHub issues](https://github.com/mmazzarolo/react-native-modal-datetime-picker/issues) only for well-described and reproducible bugs. Question/support issues will be closed.**
126 |
127 | ### The component is not working as expected, what should I do?
128 |
129 | Under the hood `react-native-modal-datetime-picker` uses [`@react-native-community/datetimepicker`](https://github.com/react-native-community/react-native-datetimepicker).
130 | If you're experiencing issues, try swapping `react-native-datetime-picker` with [`@react-native-community/datetimepicker`](https://github.com/react-native-community/react-native-datetimepicker). If the issue persists, check if it has already been reported as a an issue or check the other FAQs.
131 |
132 | ### How can I show the timepicker instead of the datepicker?
133 |
134 | Set the `mode` prop to `time`.
135 | You can also display both the datepicker and the timepicker in one step by setting the `mode` prop to `datetime`.
136 |
137 | ### Why is the initial date not working?
138 |
139 | Please make sure you're using the `date` props (and not the `value` one).
140 |
141 | ### Can I use the new iOS 14 style for the date/time picker?
142 |
143 | Yes!
144 | You can set the `display` prop (that we'll pass down to [`react-native-datetimepicker`](https://github.com/react-native-datetimepicker/datetimepicker)) to `inline` to use the new iOS 14 picker.
145 |
146 |
147 |
148 |
149 |
150 | > Please notice that you should probably avoid using this new style with a time-only picker (so with `mode` set to `time`) because it doesn't suit well this use case.
151 |
152 | ### Why does the picker show up twice on Android?
153 |
154 | This seems to be a known issue of the [`@react-native-community/datetimepicker`](https://github.com/react-native-community/datetimepicker/issues/54). Please see [this thread](https://github.com/react-native-community/datetimepicker/issues/54) for a couple of workarounds. The solution, as described in [this reply](https://github.com/react-native-datetimepicker/datetimepicker/issues/54#issuecomment-618776550) is hiding the modal, **before doing anything else**.
155 |
156 | Example of solution using Input + DatePicker
157 |
158 | The most common approach for solving this issue when using an Input is:
159 |
160 |
Wrap your Input with a "Pressable"/Button (TouchableWithoutFeedback/TouchableOpacity + activeOpacity={1} for example)
161 |
Prevent Input from being focused. You could set editable={false} too for preventing Keyboard opening
162 |
Triggering your hideModal() callback as a first thing inside onConfirm/onCancel callback props