├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── demo-play.gif ├── example ├── .bundle │ └── config ├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── App.tsx ├── Gemfile ├── __tests__ │ └── App.test.tsx ├── android │ ├── app │ │ ├── build.gradle │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── example │ │ │ │ └── ReactNativeFlipper.java │ │ │ ├── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── example │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ │ ├── drawable │ │ │ │ └── rn_edit_text_material.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 │ │ │ │ └── values │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ │ └── release │ │ │ └── java │ │ │ └── com │ │ │ └── example │ │ │ └── ReactNativeFlipper.java │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── index.js ├── ios │ ├── .xcode.env │ ├── Podfile │ ├── example.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── example.xcscheme │ ├── example │ │ ├── AppDelegate.h │ │ ├── AppDelegate.mm │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── main.m │ └── exampleTests │ │ ├── Info.plist │ │ └── exampleTests.m ├── jest.config.js ├── metro.config.js ├── package-lock.json ├── package.json ├── src │ ├── CalendarList.tsx │ ├── Day.tsx │ ├── Month.tsx │ ├── Week.tsx │ ├── index.tsx │ └── utils │ │ ├── data.ts │ │ └── locale.ts ├── tsconfig.json └── yarn.lock ├── package-lock.json ├── package.json ├── src ├── CalendarList.tsx ├── Day.tsx ├── Month.tsx ├── Week.tsx ├── index.tsx └── utils │ ├── data.ts │ └── locale.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .vscode/ 3 | dist/ 4 | .DS_Store 5 | 6 | # node.js 7 | node_modules/ 8 | npm-debug.log 9 | yarn-error.log 10 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | 2 | .vscode/ 3 | 4 | # node.js 5 | node_modules/ 6 | npm-debug.log 7 | yarn-error.log 8 | 9 | example/ 10 | demo-play.gif 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright © 2020 Junhyeok Heo 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # :point_up_2: react-native-calendar-range-picker 2 | 3 | ![platforms](https://img.shields.io/badge/platforms-Android%20|%20iOS-brightgreen.svg) 4 | [![npm](https://img.shields.io/npm/v/react-native-calendar-range-picker.svg)](https://www.npmjs.com/package/react-native-calendar-range-picker) 5 | [![npm](https://img.shields.io/npm/dt/react-native-calendar-range-picker.svg)](https://www.npmjs.com/package/react-native-calendar-range-picker) 6 | 7 | A Simple react native calendar picker using Hooks. 8 | 9 | ![demo-play](https://user-images.githubusercontent.com/41982439/76744452-9da90f80-67b7-11ea-9aca-1590ebbf3d11.gif) 10 | 11 | ## Install 12 | 13 | ``` 14 | yarn add react-native-calendar-range-picker 15 | ``` 16 | 17 | or 18 | 19 | ``` 20 | npm install react-native-calendar-range-picker --save 21 | ``` 22 | 23 | ## Usage 24 | 25 | ### Select date range 26 | 27 | ```jsx 28 | import Calendar from "react-native-calendar-range-picker"; 29 | 30 | 31 | console.log({ startDate, endDate })} 35 | /> 36 | ; 37 | ``` 38 | 39 | ### Select single date 40 | 41 | ```jsx 42 | 43 | console.log(date)} 47 | /> 48 | 49 | ``` 50 | 51 | ## Props 52 | 53 | Common props you may want to specify include: 54 | 55 | | Properties | PropType | Description | 56 | | --------------------- | -------------------- | ------------------------------------------------------------------------------------------------------- | 57 | | `onChange` | `func` | (**Required**) Handler which gets executed on day press including date data.(start, end or single date) | 58 | | `singleSelectMode` | `boolean` | Only select single date. (default = false) | 59 | | `pastYearRange` | `number` | Amount of months allowed to scroll to the past. (default = 1) | 60 | | `futureYearRange` | `number` | Amount of months allowed to scroll to the future. (default = 2) | 61 | | `locale` | `object` | Can be localized by adding custom locales to locale object. | 62 | | `startDate` | `string(YYYY-MM-DD)` | Initially visible start date. | 63 | | `endDate` | `string(YYYY-MM-DD)` | Initially visible end date. | 64 | | `initialNumToRender` | `number` | FlatList initialNumToRender prop.(to protect slow initial render)(default = 7) | 65 | | `flatListProps` | `FlatList Props` | FlatList all props. | 66 | | `isMonthFirst` | `boolean` | Switch year and month order. (2024 April -> April 2024) | 67 | | `disabledBeforeToday` | `boolean` | Disable select day before today. | 68 | | `disabledAfterToday` | `boolean` | Disable select day after today. | 69 | | `style` | `object` | Customize style. | 70 | 71 | ### Locale 72 | 73 | ```jsx 74 | const CUSTOM_LOCALE = { 75 | monthNames: [ 76 | 'January', 77 | 'February', 78 | 'March', 79 | 'April', 80 | 'May', 81 | 'June', 82 | 'July', 83 | 'August', 84 | 'September', 85 | 'October', 86 | 'November', 87 | 'December', 88 | ], 89 | dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 90 | today: 'Today', 91 | year: '', // letter behind year number -> 2024{year} 92 | } 93 | 94 | ; 98 | ``` 99 | 100 | ### Customize Style 101 | 102 | ```jsx 103 | ; 123 | ``` 124 | 125 | ## License 126 | 127 | MIT 128 | -------------------------------------------------------------------------------- /demo-play.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huurray/react-native-calendar-range-picker/80911ba02df809a96fae4bbe89737c0959f7c973/demo-play.gif -------------------------------------------------------------------------------- /example/.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /example/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native', 4 | }; 5 | -------------------------------------------------------------------------------- /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 | ios/.xcode.env.local 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | *.hprof 33 | .cxx/ 34 | *.keystore 35 | !debug.keystore 36 | 37 | # node.js 38 | # 39 | node_modules/ 40 | npm-debug.log 41 | yarn-error.log 42 | 43 | # fastlane 44 | # 45 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 46 | # screenshots whenever they are needed. 47 | # For more information about the recommended setup visit: 48 | # https://docs.fastlane.tools/best-practices/source-control/ 49 | 50 | **/fastlane/report.xml 51 | **/fastlane/Preview.html 52 | **/fastlane/screenshots 53 | **/fastlane/test_output 54 | 55 | # Bundle artifact 56 | *.jsbundle 57 | 58 | # Ruby / CocoaPods 59 | /ios/Pods/ 60 | /vendor/bundle/ 61 | 62 | # Temporary files created by Metro to check the health of the file watcher 63 | .metro-health-check* 64 | 65 | # testing 66 | /coverage 67 | -------------------------------------------------------------------------------- /example/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSameLine: true, 4 | bracketSpacing: false, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /example/App.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import { 3 | SafeAreaView, 4 | TouchableOpacity, 5 | View, 6 | Text, 7 | StatusBar, 8 | } from 'react-native'; 9 | 10 | import Calendar from './src'; 11 | 12 | interface Params { 13 | startDate: string | null; 14 | endDate: string | null; 15 | } 16 | const App = () => { 17 | const [startDate, setStartDate]: any = useState(null); 18 | const [endDate, setEndDate]: any = useState(null); 19 | 20 | function handleSubmit() { 21 | console.log(startDate, endDate); 22 | } 23 | 24 | function handleChange({startDate, endDate}: Params) { 25 | if (startDate && !endDate) { 26 | setStartDate(startDate); 27 | setEndDate(null); 28 | return; 29 | } 30 | if (startDate && endDate) { 31 | setStartDate(startDate); 32 | setEndDate(endDate); 33 | return; 34 | } 35 | if (endDate) { 36 | setStartDate({startDate}); 37 | } 38 | } 39 | 40 | return ( 41 | <> 42 | 43 | 44 | 53 | 54 | Cancel 55 | 56 | 61 | {startDate ? {startDate} : null} 62 | {endDate ? ~ {endDate} : null} 63 | 64 | 65 | 66 | Confirm 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | ); 76 | }; 77 | 78 | export default App; 79 | -------------------------------------------------------------------------------- /example/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby ">= 2.6.10" 5 | 6 | gem 'cocoapods', '~> 1.13' 7 | gem 'activesupport', '>= 6.1.7.3', '< 7.1.0' 8 | -------------------------------------------------------------------------------- /example/__tests__/App.test.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: import explicitly to use the types shiped with jest. 10 | import {it} from '@jest/globals'; 11 | 12 | // Note: test renderer must be required after react-native. 13 | import renderer from 'react-test-renderer'; 14 | 15 | it('renders correctly', () => { 16 | renderer.create(); 17 | }); 18 | -------------------------------------------------------------------------------- /example/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | apply plugin: "com.facebook.react" 3 | 4 | /** 5 | * This is the configuration block to customize your React Native Android app. 6 | * By default you don't need to apply any configuration, just uncomment the lines you need. 7 | */ 8 | react { 9 | /* Folders */ 10 | // The root of your project, i.e. where "package.json" lives. Default is '..' 11 | // root = file("../") 12 | // The folder where the react-native NPM package is. Default is ../node_modules/react-native 13 | // reactNativeDir = file("../node_modules/react-native") 14 | // The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen 15 | // codegenDir = file("../node_modules/@react-native/codegen") 16 | // The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js 17 | // cliFile = file("../node_modules/react-native/cli.js") 18 | 19 | /* Variants */ 20 | // The list of variants to that are debuggable. For those we're going to 21 | // skip the bundling of the JS bundle and the assets. By default is just 'debug'. 22 | // If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants. 23 | // debuggableVariants = ["liteDebug", "prodDebug"] 24 | 25 | /* Bundling */ 26 | // A list containing the node command and its flags. Default is just 'node'. 27 | // nodeExecutableAndArgs = ["node"] 28 | // 29 | // The command to run when bundling. By default is 'bundle' 30 | // bundleCommand = "ram-bundle" 31 | // 32 | // The path to the CLI configuration file. Default is empty. 33 | // bundleConfig = file(../rn-cli.config.js) 34 | // 35 | // The name of the generated asset file containing your JS bundle 36 | // bundleAssetName = "MyApplication.android.bundle" 37 | // 38 | // The entry file for bundle generation. Default is 'index.android.js' or 'index.js' 39 | // entryFile = file("../js/MyApplication.android.js") 40 | // 41 | // A list of extra flags to pass to the 'bundle' commands. 42 | // See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle 43 | // extraPackagerArgs = [] 44 | 45 | /* Hermes Commands */ 46 | // The hermes compiler command to run. By default it is 'hermesc' 47 | // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc" 48 | // 49 | // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map" 50 | // hermesFlags = ["-O", "-output-source-map"] 51 | } 52 | 53 | /** 54 | * Set this to true to Run Proguard on Release builds to minify the Java bytecode. 55 | */ 56 | def enableProguardInReleaseBuilds = false 57 | 58 | /** 59 | * The preferred build flavor of JavaScriptCore (JSC) 60 | * 61 | * For example, to use the international variant, you can use: 62 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` 63 | * 64 | * The international variant includes ICU i18n library and necessary data 65 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 66 | * give correct results when using with locales other than en-US. Note that 67 | * this variant is about 6MiB larger per architecture than default. 68 | */ 69 | def jscFlavor = 'org.webkit:android-jsc:+' 70 | 71 | android { 72 | ndkVersion rootProject.ext.ndkVersion 73 | 74 | compileSdkVersion rootProject.ext.compileSdkVersion 75 | 76 | namespace "com.example" 77 | defaultConfig { 78 | applicationId "com.example" 79 | minSdkVersion rootProject.ext.minSdkVersion 80 | targetSdkVersion rootProject.ext.targetSdkVersion 81 | versionCode 1 82 | versionName "1.0" 83 | } 84 | signingConfigs { 85 | debug { 86 | storeFile file('debug.keystore') 87 | storePassword 'android' 88 | keyAlias 'androiddebugkey' 89 | keyPassword 'android' 90 | } 91 | } 92 | buildTypes { 93 | debug { 94 | signingConfig signingConfigs.debug 95 | } 96 | release { 97 | // Caution! In production, you need to generate your own keystore file. 98 | // see https://reactnative.dev/docs/signed-apk-android. 99 | signingConfig signingConfigs.debug 100 | minifyEnabled enableProguardInReleaseBuilds 101 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 102 | } 103 | } 104 | } 105 | 106 | dependencies { 107 | // The version of react-native is set by the React Native Gradle Plugin 108 | implementation("com.facebook.react:react-android") 109 | 110 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") 111 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { 112 | exclude group:'com.squareup.okhttp3', module:'okhttp' 113 | } 114 | 115 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") 116 | if (hermesEnabled.toBoolean()) { 117 | implementation("com.facebook.react:hermes-android") 118 | } else { 119 | implementation jscFlavor 120 | } 121 | } 122 | 123 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) 124 | -------------------------------------------------------------------------------- /example/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huurray/react-native-calendar-range-picker/80911ba02df809a96fae4bbe89737c0959f7c973/example/android/app/debug.keystore -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /example/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /example/android/app/src/debug/java/com/example/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Meta Platforms, Inc. and 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.sharedpreferences.SharedPreferencesFlipperPlugin; 21 | import com.facebook.react.ReactInstanceEventListener; 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 | /** 28 | * Class responsible of loading Flipper inside your React Native application. This is the debug 29 | * flavor of it. Here you can add your own plugins and customize the Flipper setup. 30 | */ 31 | public class ReactNativeFlipper { 32 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 33 | if (FlipperUtils.shouldEnableFlipper(context)) { 34 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 35 | 36 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 37 | client.addPlugin(new DatabasesFlipperPlugin(context)); 38 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 39 | client.addPlugin(CrashReporterPlugin.getInstance()); 40 | 41 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 42 | NetworkingModule.setCustomClientBuilder( 43 | new NetworkingModule.CustomClientBuilder() { 44 | @Override 45 | public void apply(OkHttpClient.Builder builder) { 46 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 47 | } 48 | }); 49 | client.addPlugin(networkFlipperPlugin); 50 | client.start(); 51 | 52 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 53 | // Hence we run if after all native modules have been initialized 54 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 55 | if (reactContext == null) { 56 | reactInstanceManager.addReactInstanceEventListener( 57 | new ReactInstanceEventListener() { 58 | @Override 59 | public void onReactContextInitialized(ReactContext reactContext) { 60 | reactInstanceManager.removeReactInstanceEventListener(this); 61 | reactContext.runOnNativeModulesQueueThread( 62 | new Runnable() { 63 | @Override 64 | public void run() { 65 | client.addPlugin(new FrescoFlipperPlugin()); 66 | } 67 | }); 68 | } 69 | }); 70 | } else { 71 | client.addPlugin(new FrescoFlipperPlugin()); 72 | } 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/example/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.example; 2 | 3 | import com.facebook.react.ReactActivity; 4 | import com.facebook.react.ReactActivityDelegate; 5 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; 6 | import com.facebook.react.defaults.DefaultReactActivityDelegate; 7 | 8 | public class MainActivity extends ReactActivity { 9 | 10 | /** 11 | * Returns the name of the main component registered from JavaScript. This is used to schedule 12 | * rendering of the component. 13 | */ 14 | @Override 15 | protected String getMainComponentName() { 16 | return "example"; 17 | } 18 | 19 | /** 20 | * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link 21 | * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React 22 | * (aka React 18) with two boolean flags. 23 | */ 24 | @Override 25 | protected ReactActivityDelegate createReactActivityDelegate() { 26 | return new DefaultReactActivityDelegate( 27 | this, 28 | getMainComponentName(), 29 | // If you opted-in for the New Architecture, we enable the Fabric Renderer. 30 | DefaultNewArchitectureEntryPoint.getFabricEnabled()); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/example/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.example; 2 | 3 | import android.app.Application; 4 | import com.facebook.react.PackageList; 5 | import com.facebook.react.ReactApplication; 6 | import com.facebook.react.ReactNativeHost; 7 | import com.facebook.react.ReactPackage; 8 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; 9 | import com.facebook.react.defaults.DefaultReactNativeHost; 10 | import com.facebook.soloader.SoLoader; 11 | import java.util.List; 12 | 13 | public class MainApplication extends Application implements ReactApplication { 14 | 15 | private final ReactNativeHost mReactNativeHost = 16 | new DefaultReactNativeHost(this) { 17 | @Override 18 | public boolean getUseDeveloperSupport() { 19 | return BuildConfig.DEBUG; 20 | } 21 | 22 | @Override 23 | protected List getPackages() { 24 | @SuppressWarnings("UnnecessaryLocalVariable") 25 | List packages = new PackageList(this).getPackages(); 26 | // Packages that cannot be autolinked yet can be added manually here, for example: 27 | // packages.add(new MyReactNativePackage()); 28 | return packages; 29 | } 30 | 31 | @Override 32 | protected String getJSMainModuleName() { 33 | return "index"; 34 | } 35 | 36 | @Override 37 | protected boolean isNewArchEnabled() { 38 | return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; 39 | } 40 | 41 | @Override 42 | protected Boolean isHermesEnabled() { 43 | return BuildConfig.IS_HERMES_ENABLED; 44 | } 45 | }; 46 | 47 | @Override 48 | public ReactNativeHost getReactNativeHost() { 49 | return mReactNativeHost; 50 | } 51 | 52 | @Override 53 | public void onCreate() { 54 | super.onCreate(); 55 | SoLoader.init(this, /* native exopackage */ false); 56 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 57 | // If you opted-in for the New Architecture, we load the native entry point for this app. 58 | DefaultNewArchitectureEntryPoint.load(); 59 | } 60 | ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 21 | 22 | 23 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huurray/react-native-calendar-range-picker/80911ba02df809a96fae4bbe89737c0959f7c973/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huurray/react-native-calendar-range-picker/80911ba02df809a96fae4bbe89737c0959f7c973/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huurray/react-native-calendar-range-picker/80911ba02df809a96fae4bbe89737c0959f7c973/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huurray/react-native-calendar-range-picker/80911ba02df809a96fae4bbe89737c0959f7c973/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huurray/react-native-calendar-range-picker/80911ba02df809a96fae4bbe89737c0959f7c973/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huurray/react-native-calendar-range-picker/80911ba02df809a96fae4bbe89737c0959f7c973/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huurray/react-native-calendar-range-picker/80911ba02df809a96fae4bbe89737c0959f7c973/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huurray/react-native-calendar-range-picker/80911ba02df809a96fae4bbe89737c0959f7c973/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huurray/react-native-calendar-range-picker/80911ba02df809a96fae4bbe89737c0959f7c973/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huurray/react-native-calendar-range-picker/80911ba02df809a96fae4bbe89737c0959f7c973/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | example 3 | 4 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /example/android/app/src/release/java/com/example/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Meta Platforms, Inc. and 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.react.ReactInstanceManager; 11 | 12 | /** 13 | * Class responsible of loading Flipper inside your React Native application. This is the release 14 | * flavor of it so it's empty as we don't want to load Flipper. 15 | */ 16 | public class ReactNativeFlipper { 17 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 18 | // Do nothing as we don't want to initialize Flipper on Release. 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /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 = "33.0.0" 6 | minSdkVersion = 21 7 | compileSdkVersion = 33 8 | targetSdkVersion = 33 9 | 10 | // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP. 11 | ndkVersion = "23.1.7779620" 12 | } 13 | repositories { 14 | google() 15 | mavenCentral() 16 | } 17 | dependencies { 18 | classpath("com.android.tools.build:gradle") 19 | classpath("com.facebook.react:react-native-gradle-plugin") 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /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: -Xmx512m -XX:MaxMetaspaceSize=256m 13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m 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.182.0 29 | 30 | # Use this property to specify which architecture you want to build. 31 | # You can also override it from the CLI using 32 | # ./gradlew -PreactNativeArchitectures=x86_64 33 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 34 | 35 | # Use this property to enable support to the new architecture. 36 | # This will allow you to use TurboModules and the Fabric render in 37 | # your application. You should enable this flag either if you want 38 | # to write custom TurboModules/Fabric components OR use libraries that 39 | # are providing them. 40 | newArchEnabled=false 41 | 42 | # Use this property to enable or disable the Hermes JS engine. 43 | # If set to false, you will be using JSC instead. 44 | hermesEnabled=true 45 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huurray/react-native-calendar-range-picker/80911ba02df809a96fae4bbe89737c0959f7c973/example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.1-all.zip 4 | networkTimeout=10000 5 | zipStoreBase=GRADLE_USER_HOME 6 | zipStorePath=wrapper/dists 7 | -------------------------------------------------------------------------------- /example/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # 4 | # Copyright © 2015-2021 the original 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 POSIX generated by Gradle. 22 | # 23 | # Important for running: 24 | # 25 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is 26 | # noncompliant, but you have some other compliant shell such as ksh or 27 | # bash, then to run this script, type that shell name before the whole 28 | # command line, like: 29 | # 30 | # ksh Gradle 31 | # 32 | # Busybox and similar reduced shells will NOT work, because this script 33 | # requires all of these POSIX shell features: 34 | # * functions; 35 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», 36 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»; 37 | # * compound commands having a testable exit status, especially «case»; 38 | # * various built-in commands including «command», «set», and «ulimit». 39 | # 40 | # Important for patching: 41 | # 42 | # (2) This script targets any POSIX shell, so it avoids extensions provided 43 | # by Bash, Ksh, etc; in particular arrays are avoided. 44 | # 45 | # The "traditional" practice of packing multiple parameters into a 46 | # space-separated string is a well documented source of bugs and security 47 | # problems, so this is (mostly) avoided, by progressively accumulating 48 | # options in "$@", and eventually passing that to Java. 49 | # 50 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, 51 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; 52 | # see the in-line comments for details. 53 | # 54 | # There are tweaks for specific operating systems such as AIX, CygWin, 55 | # Darwin, MinGW, and NonStop. 56 | # 57 | # (3) This script is generated from the Groovy template 58 | # https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt 59 | # within the Gradle project. 60 | # 61 | # You can find Gradle at https://github.com/gradle/gradle/. 62 | # 63 | ############################################################################## 64 | 65 | # Attempt to set APP_HOME 66 | 67 | # Resolve links: $0 may be a link 68 | app_path=$0 69 | 70 | # Need this for daisy-chained symlinks. 71 | while 72 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path 73 | [ -h "$app_path" ] 74 | do 75 | ls=$( ls -ld "$app_path" ) 76 | link=${ls#*' -> '} 77 | case $link in #( 78 | /*) app_path=$link ;; #( 79 | *) app_path=$APP_HOME$link ;; 80 | esac 81 | done 82 | 83 | # This is normally unused 84 | # shellcheck disable=SC2034 85 | APP_BASE_NAME=${0##*/} 86 | APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit 87 | 88 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 89 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 90 | 91 | # Use the maximum available, or set MAX_FD != -1 to use that value. 92 | MAX_FD=maximum 93 | 94 | warn () { 95 | echo "$*" 96 | } >&2 97 | 98 | die () { 99 | echo 100 | echo "$*" 101 | echo 102 | exit 1 103 | } >&2 104 | 105 | # OS specific support (must be 'true' or 'false'). 106 | cygwin=false 107 | msys=false 108 | darwin=false 109 | nonstop=false 110 | case "$( uname )" in #( 111 | CYGWIN* ) cygwin=true ;; #( 112 | Darwin* ) darwin=true ;; #( 113 | MSYS* | MINGW* ) msys=true ;; #( 114 | NONSTOP* ) nonstop=true ;; 115 | esac 116 | 117 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 118 | 119 | 120 | # Determine the Java command to use to start the JVM. 121 | if [ -n "$JAVA_HOME" ] ; then 122 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 123 | # IBM's JDK on AIX uses strange locations for the executables 124 | JAVACMD=$JAVA_HOME/jre/sh/java 125 | else 126 | JAVACMD=$JAVA_HOME/bin/java 127 | fi 128 | if [ ! -x "$JAVACMD" ] ; then 129 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 130 | 131 | Please set the JAVA_HOME variable in your environment to match the 132 | location of your Java installation." 133 | fi 134 | else 135 | JAVACMD=java 136 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 137 | 138 | Please set the JAVA_HOME variable in your environment to match the 139 | location of your Java installation." 140 | fi 141 | 142 | # Increase the maximum file descriptors if we can. 143 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then 144 | case $MAX_FD in #( 145 | max*) 146 | # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked. 147 | # shellcheck disable=SC3045 148 | MAX_FD=$( ulimit -H -n ) || 149 | warn "Could not query maximum file descriptor limit" 150 | esac 151 | case $MAX_FD in #( 152 | '' | soft) :;; #( 153 | *) 154 | # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked. 155 | # shellcheck disable=SC3045 156 | ulimit -n "$MAX_FD" || 157 | warn "Could not set maximum file descriptor limit to $MAX_FD" 158 | esac 159 | fi 160 | 161 | # Collect all arguments for the java command, stacking in reverse order: 162 | # * args from the command line 163 | # * the main class name 164 | # * -classpath 165 | # * -D...appname settings 166 | # * --module-path (only if needed) 167 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. 168 | 169 | # For Cygwin or MSYS, switch paths to Windows format before running java 170 | if "$cygwin" || "$msys" ; then 171 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) 172 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) 173 | 174 | JAVACMD=$( cygpath --unix "$JAVACMD" ) 175 | 176 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 177 | for arg do 178 | if 179 | case $arg in #( 180 | -*) false ;; # don't mess with options #( 181 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath 182 | [ -e "$t" ] ;; #( 183 | *) false ;; 184 | esac 185 | then 186 | arg=$( cygpath --path --ignore --mixed "$arg" ) 187 | fi 188 | # Roll the args list around exactly as many times as the number of 189 | # args, so each arg winds up back in the position where it started, but 190 | # possibly modified. 191 | # 192 | # NB: a `for` loop captures its iteration list before it begins, so 193 | # changing the positional parameters here affects neither the number of 194 | # iterations, nor the values presented in `arg`. 195 | shift # remove old arg 196 | set -- "$@" "$arg" # push replacement arg 197 | done 198 | fi 199 | 200 | # Collect all arguments for the java command; 201 | # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of 202 | # shell script including quotes and variable substitutions, so put them in 203 | # double quotes to make sure that they get re-expanded; and 204 | # * put everything else in single quotes, so that it's not re-expanded. 205 | 206 | set -- \ 207 | "-Dorg.gradle.appname=$APP_BASE_NAME" \ 208 | -classpath "$CLASSPATH" \ 209 | org.gradle.wrapper.GradleWrapperMain \ 210 | "$@" 211 | 212 | # Stop when "xargs" is not available. 213 | if ! command -v xargs >/dev/null 2>&1 214 | then 215 | die "xargs is not available" 216 | fi 217 | 218 | # Use "xargs" to parse quoted args. 219 | # 220 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed. 221 | # 222 | # In Bash we could simply go: 223 | # 224 | # readarray ARGS < <( xargs -n1 <<<"$var" ) && 225 | # set -- "${ARGS[@]}" "$@" 226 | # 227 | # but POSIX shell has neither arrays nor command substitution, so instead we 228 | # post-process each arg (as a line of input to sed) to backslash-escape any 229 | # character that might be a shell metacharacter, then use eval to reverse 230 | # that process (while maintaining the separation between arguments), and wrap 231 | # the whole thing up as a single "set" statement. 232 | # 233 | # This will of course break if any of these variables contains a newline or 234 | # an unmatched quote. 235 | # 236 | 237 | eval "set -- $( 238 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | 239 | xargs -n1 | 240 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | 241 | tr '\n' ' ' 242 | )" '"$@"' 243 | 244 | exec "$JAVACMD" "$@" 245 | -------------------------------------------------------------------------------- /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 | @rem This is normally unused 30 | set APP_BASE_NAME=%~n0 31 | set APP_HOME=%DIRNAME% 32 | 33 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 34 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 35 | 36 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 37 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 38 | 39 | @rem Find java.exe 40 | if defined JAVA_HOME goto findJavaFromJavaHome 41 | 42 | set JAVA_EXE=java.exe 43 | %JAVA_EXE% -version >NUL 2>&1 44 | if %ERRORLEVEL% equ 0 goto execute 45 | 46 | echo. 47 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 48 | echo. 49 | echo Please set the JAVA_HOME variable in your environment to match the 50 | echo location of your Java installation. 51 | 52 | goto fail 53 | 54 | :findJavaFromJavaHome 55 | set JAVA_HOME=%JAVA_HOME:"=% 56 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 57 | 58 | if exist "%JAVA_EXE%" goto execute 59 | 60 | echo. 61 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 62 | echo. 63 | echo Please set the JAVA_HOME variable in your environment to match the 64 | echo location of your Java installation. 65 | 66 | goto fail 67 | 68 | :execute 69 | @rem Setup the command line 70 | 71 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 72 | 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if %ERRORLEVEL% equ 0 goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | set EXIT_CODE=%ERRORLEVEL% 85 | if %EXIT_CODE% equ 0 set EXIT_CODE=1 86 | if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE% 87 | exit /b %EXIT_CODE% 88 | 89 | :mainEnd 90 | if "%OS%"=="Windows_NT" endlocal 91 | 92 | :omega 93 | -------------------------------------------------------------------------------- /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 | includeBuild('../node_modules/@react-native/gradle-plugin') 5 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "displayName": "example" 4 | } 5 | -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | import App from './App'; 7 | import {name as appName} from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /example/ios/.xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /example/ios/Podfile: -------------------------------------------------------------------------------- 1 | # Resolve react_native_pods.rb with node to allow for hoisting 2 | require Pod::Executable.execute_command('node', ['-p', 3 | 'require.resolve( 4 | "react-native/scripts/react_native_pods.rb", 5 | {paths: [process.argv[1]]}, 6 | )', __dir__]).strip 7 | 8 | platform :ios, min_ios_version_supported 9 | prepare_react_native_project! 10 | 11 | # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set. 12 | # because `react-native-flipper` depends on (FlipperKit,...) that will be excluded 13 | # 14 | # To fix this you can also exclude `react-native-flipper` using a `react-native.config.js` 15 | # ```js 16 | # module.exports = { 17 | # dependencies: { 18 | # ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}), 19 | # ``` 20 | flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled 21 | 22 | linkage = ENV['USE_FRAMEWORKS'] 23 | if linkage != nil 24 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 25 | use_frameworks! :linkage => linkage.to_sym 26 | end 27 | 28 | target 'example' do 29 | config = use_native_modules! 30 | 31 | # Flags change depending on the env values. 32 | flags = get_default_flags() 33 | 34 | use_react_native!( 35 | :path => config[:reactNativePath], 36 | # Hermes is now enabled by default. Disable by setting this flag to false. 37 | :hermes_enabled => flags[:hermes_enabled], 38 | :fabric_enabled => flags[:fabric_enabled], 39 | # Enables Flipper. 40 | # 41 | # Note that if you have use_frameworks! enabled, Flipper will not work and 42 | # you should disable the next line. 43 | :flipper_configuration => flipper_config, 44 | # An absolute path to your application root. 45 | :app_path => "#{Pod::Config.instance.installation_root}/.." 46 | ) 47 | 48 | target 'exampleTests' do 49 | inherit! :complete 50 | # Pods for testing 51 | end 52 | 53 | post_install do |installer| 54 | # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 55 | react_native_post_install( 56 | installer, 57 | config[:reactNativePath], 58 | :mac_catalyst_enabled => false 59 | ) 60 | __apply_Xcode_12_5_M1_post_install_workaround(installer) 61 | end 62 | end 63 | -------------------------------------------------------------------------------- /example/ios/example.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 54; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 00E356F31AD99517003FC87E /* exampleTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* exampleTests.m */; }; 11 | 0C80B921A6F3F58F76C31292 /* libPods-example.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5DCACB8F33CDC322A6C60F78 /* libPods-example.a */; }; 12 | 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; }; 13 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 14 | 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 15 | 7699B88040F8A987B510C191 /* libPods-example-exampleTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 19F6CBCC0A4E27FBF8BF4A61 /* libPods-example-exampleTests.a */; }; 16 | 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; }; 17 | /* End PBXBuildFile section */ 18 | 19 | /* Begin PBXContainerItemProxy section */ 20 | 00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = { 21 | isa = PBXContainerItemProxy; 22 | containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */; 23 | proxyType = 1; 24 | remoteGlobalIDString = 13B07F861A680F5B00A75B9A; 25 | remoteInfo = example; 26 | }; 27 | /* End PBXContainerItemProxy section */ 28 | 29 | /* Begin PBXFileReference section */ 30 | 00E356EE1AD99517003FC87E /* exampleTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = exampleTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; }; 31 | 00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 32 | 00E356F21AD99517003FC87E /* exampleTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = exampleTests.m; sourceTree = ""; }; 33 | 13B07F961A680F5B00A75B9A /* example.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = example.app; sourceTree = BUILT_PRODUCTS_DIR; }; 34 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = example/AppDelegate.h; sourceTree = ""; }; 35 | 13B07FB01A68108700A75B9A /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; name = AppDelegate.mm; path = example/AppDelegate.mm; sourceTree = ""; }; 36 | 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = example/Images.xcassets; sourceTree = ""; }; 37 | 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = example/Info.plist; sourceTree = ""; }; 38 | 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = example/main.m; sourceTree = ""; }; 39 | 19F6CBCC0A4E27FBF8BF4A61 /* libPods-example-exampleTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-example-exampleTests.a"; sourceTree = BUILT_PRODUCTS_DIR; }; 40 | 3B4392A12AC88292D35C810B /* Pods-example.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example.debug.xcconfig"; path = "Target Support Files/Pods-example/Pods-example.debug.xcconfig"; sourceTree = ""; }; 41 | 5709B34CF0A7D63546082F79 /* Pods-example.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example.release.xcconfig"; path = "Target Support Files/Pods-example/Pods-example.release.xcconfig"; sourceTree = ""; }; 42 | 5B7EB9410499542E8C5724F5 /* Pods-example-exampleTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example-exampleTests.debug.xcconfig"; path = "Target Support Files/Pods-example-exampleTests/Pods-example-exampleTests.debug.xcconfig"; sourceTree = ""; }; 43 | 5DCACB8F33CDC322A6C60F78 /* libPods-example.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-example.a"; sourceTree = BUILT_PRODUCTS_DIR; }; 44 | 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = example/LaunchScreen.storyboard; sourceTree = ""; }; 45 | 89C6BE57DB24E9ADA2F236DE /* Pods-example-exampleTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example-exampleTests.release.xcconfig"; path = "Target Support Files/Pods-example-exampleTests/Pods-example-exampleTests.release.xcconfig"; sourceTree = ""; }; 46 | ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; 47 | /* End PBXFileReference section */ 48 | 49 | /* Begin PBXFrameworksBuildPhase section */ 50 | 00E356EB1AD99517003FC87E /* Frameworks */ = { 51 | isa = PBXFrameworksBuildPhase; 52 | buildActionMask = 2147483647; 53 | files = ( 54 | 7699B88040F8A987B510C191 /* libPods-example-exampleTests.a in Frameworks */, 55 | ); 56 | runOnlyForDeploymentPostprocessing = 0; 57 | }; 58 | 13B07F8C1A680F5B00A75B9A /* Frameworks */ = { 59 | isa = PBXFrameworksBuildPhase; 60 | buildActionMask = 2147483647; 61 | files = ( 62 | 0C80B921A6F3F58F76C31292 /* libPods-example.a in Frameworks */, 63 | ); 64 | runOnlyForDeploymentPostprocessing = 0; 65 | }; 66 | /* End PBXFrameworksBuildPhase section */ 67 | 68 | /* Begin PBXGroup section */ 69 | 00E356EF1AD99517003FC87E /* exampleTests */ = { 70 | isa = PBXGroup; 71 | children = ( 72 | 00E356F21AD99517003FC87E /* exampleTests.m */, 73 | 00E356F01AD99517003FC87E /* Supporting Files */, 74 | ); 75 | path = exampleTests; 76 | sourceTree = ""; 77 | }; 78 | 00E356F01AD99517003FC87E /* Supporting Files */ = { 79 | isa = PBXGroup; 80 | children = ( 81 | 00E356F11AD99517003FC87E /* Info.plist */, 82 | ); 83 | name = "Supporting Files"; 84 | sourceTree = ""; 85 | }; 86 | 13B07FAE1A68108700A75B9A /* example */ = { 87 | isa = PBXGroup; 88 | children = ( 89 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */, 90 | 13B07FB01A68108700A75B9A /* AppDelegate.mm */, 91 | 13B07FB51A68108700A75B9A /* Images.xcassets */, 92 | 13B07FB61A68108700A75B9A /* Info.plist */, 93 | 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */, 94 | 13B07FB71A68108700A75B9A /* main.m */, 95 | ); 96 | name = example; 97 | sourceTree = ""; 98 | }; 99 | 2D16E6871FA4F8E400B85C8A /* Frameworks */ = { 100 | isa = PBXGroup; 101 | children = ( 102 | ED297162215061F000B7C4FE /* JavaScriptCore.framework */, 103 | 5DCACB8F33CDC322A6C60F78 /* libPods-example.a */, 104 | 19F6CBCC0A4E27FBF8BF4A61 /* libPods-example-exampleTests.a */, 105 | ); 106 | name = Frameworks; 107 | sourceTree = ""; 108 | }; 109 | 832341AE1AAA6A7D00B99B32 /* Libraries */ = { 110 | isa = PBXGroup; 111 | children = ( 112 | ); 113 | name = Libraries; 114 | sourceTree = ""; 115 | }; 116 | 83CBB9F61A601CBA00E9B192 = { 117 | isa = PBXGroup; 118 | children = ( 119 | 13B07FAE1A68108700A75B9A /* example */, 120 | 832341AE1AAA6A7D00B99B32 /* Libraries */, 121 | 00E356EF1AD99517003FC87E /* exampleTests */, 122 | 83CBBA001A601CBA00E9B192 /* Products */, 123 | 2D16E6871FA4F8E400B85C8A /* Frameworks */, 124 | BBD78D7AC51CEA395F1C20DB /* Pods */, 125 | ); 126 | indentWidth = 2; 127 | sourceTree = ""; 128 | tabWidth = 2; 129 | usesTabs = 0; 130 | }; 131 | 83CBBA001A601CBA00E9B192 /* Products */ = { 132 | isa = PBXGroup; 133 | children = ( 134 | 13B07F961A680F5B00A75B9A /* example.app */, 135 | 00E356EE1AD99517003FC87E /* exampleTests.xctest */, 136 | ); 137 | name = Products; 138 | sourceTree = ""; 139 | }; 140 | BBD78D7AC51CEA395F1C20DB /* Pods */ = { 141 | isa = PBXGroup; 142 | children = ( 143 | 3B4392A12AC88292D35C810B /* Pods-example.debug.xcconfig */, 144 | 5709B34CF0A7D63546082F79 /* Pods-example.release.xcconfig */, 145 | 5B7EB9410499542E8C5724F5 /* Pods-example-exampleTests.debug.xcconfig */, 146 | 89C6BE57DB24E9ADA2F236DE /* Pods-example-exampleTests.release.xcconfig */, 147 | ); 148 | path = Pods; 149 | sourceTree = ""; 150 | }; 151 | /* End PBXGroup section */ 152 | 153 | /* Begin PBXNativeTarget section */ 154 | 00E356ED1AD99517003FC87E /* exampleTests */ = { 155 | isa = PBXNativeTarget; 156 | buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "exampleTests" */; 157 | buildPhases = ( 158 | A55EABD7B0C7F3A422A6CC61 /* [CP] Check Pods Manifest.lock */, 159 | 00E356EA1AD99517003FC87E /* Sources */, 160 | 00E356EB1AD99517003FC87E /* Frameworks */, 161 | 00E356EC1AD99517003FC87E /* Resources */, 162 | C59DA0FBD6956966B86A3779 /* [CP] Embed Pods Frameworks */, 163 | F6A41C54EA430FDDC6A6ED99 /* [CP] Copy Pods Resources */, 164 | ); 165 | buildRules = ( 166 | ); 167 | dependencies = ( 168 | 00E356F51AD99517003FC87E /* PBXTargetDependency */, 169 | ); 170 | name = exampleTests; 171 | productName = exampleTests; 172 | productReference = 00E356EE1AD99517003FC87E /* exampleTests.xctest */; 173 | productType = "com.apple.product-type.bundle.unit-test"; 174 | }; 175 | 13B07F861A680F5B00A75B9A /* example */ = { 176 | isa = PBXNativeTarget; 177 | buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "example" */; 178 | buildPhases = ( 179 | C38B50BA6285516D6DCD4F65 /* [CP] Check Pods Manifest.lock */, 180 | FD10A7F022414F080027D42C /* Start Packager */, 181 | 13B07F871A680F5B00A75B9A /* Sources */, 182 | 13B07F8C1A680F5B00A75B9A /* Frameworks */, 183 | 13B07F8E1A680F5B00A75B9A /* Resources */, 184 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */, 185 | 00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */, 186 | E235C05ADACE081382539298 /* [CP] Copy Pods Resources */, 187 | ); 188 | buildRules = ( 189 | ); 190 | dependencies = ( 191 | ); 192 | name = example; 193 | productName = example; 194 | productReference = 13B07F961A680F5B00A75B9A /* example.app */; 195 | productType = "com.apple.product-type.application"; 196 | }; 197 | /* End PBXNativeTarget section */ 198 | 199 | /* Begin PBXProject section */ 200 | 83CBB9F71A601CBA00E9B192 /* Project object */ = { 201 | isa = PBXProject; 202 | attributes = { 203 | LastUpgradeCheck = 1210; 204 | TargetAttributes = { 205 | 00E356ED1AD99517003FC87E = { 206 | CreatedOnToolsVersion = 6.2; 207 | TestTargetID = 13B07F861A680F5B00A75B9A; 208 | }; 209 | 13B07F861A680F5B00A75B9A = { 210 | LastSwiftMigration = 1120; 211 | }; 212 | }; 213 | }; 214 | buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "example" */; 215 | compatibilityVersion = "Xcode 12.0"; 216 | developmentRegion = en; 217 | hasScannedForEncodings = 0; 218 | knownRegions = ( 219 | en, 220 | Base, 221 | ); 222 | mainGroup = 83CBB9F61A601CBA00E9B192; 223 | productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */; 224 | projectDirPath = ""; 225 | projectRoot = ""; 226 | targets = ( 227 | 13B07F861A680F5B00A75B9A /* example */, 228 | 00E356ED1AD99517003FC87E /* exampleTests */, 229 | ); 230 | }; 231 | /* End PBXProject section */ 232 | 233 | /* Begin PBXResourcesBuildPhase section */ 234 | 00E356EC1AD99517003FC87E /* Resources */ = { 235 | isa = PBXResourcesBuildPhase; 236 | buildActionMask = 2147483647; 237 | files = ( 238 | ); 239 | runOnlyForDeploymentPostprocessing = 0; 240 | }; 241 | 13B07F8E1A680F5B00A75B9A /* Resources */ = { 242 | isa = PBXResourcesBuildPhase; 243 | buildActionMask = 2147483647; 244 | files = ( 245 | 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */, 246 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 247 | ); 248 | runOnlyForDeploymentPostprocessing = 0; 249 | }; 250 | /* End PBXResourcesBuildPhase section */ 251 | 252 | /* Begin PBXShellScriptBuildPhase section */ 253 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = { 254 | isa = PBXShellScriptBuildPhase; 255 | buildActionMask = 2147483647; 256 | files = ( 257 | ); 258 | inputPaths = ( 259 | "$(SRCROOT)/.xcode.env.local", 260 | "$(SRCROOT)/.xcode.env", 261 | ); 262 | name = "Bundle React Native code and images"; 263 | outputPaths = ( 264 | ); 265 | runOnlyForDeploymentPostprocessing = 0; 266 | shellPath = /bin/sh; 267 | shellScript = "set -e\n\nWITH_ENVIRONMENT=\"../node_modules/react-native/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"../node_modules/react-native/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT $REACT_NATIVE_XCODE\"\n"; 268 | }; 269 | 00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */ = { 270 | isa = PBXShellScriptBuildPhase; 271 | buildActionMask = 2147483647; 272 | files = ( 273 | ); 274 | inputFileListPaths = ( 275 | "${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-frameworks-${CONFIGURATION}-input-files.xcfilelist", 276 | ); 277 | name = "[CP] Embed Pods Frameworks"; 278 | outputFileListPaths = ( 279 | "${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-frameworks-${CONFIGURATION}-output-files.xcfilelist", 280 | ); 281 | runOnlyForDeploymentPostprocessing = 0; 282 | shellPath = /bin/sh; 283 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-frameworks.sh\"\n"; 284 | showEnvVarsInLog = 0; 285 | }; 286 | A55EABD7B0C7F3A422A6CC61 /* [CP] Check Pods Manifest.lock */ = { 287 | isa = PBXShellScriptBuildPhase; 288 | buildActionMask = 2147483647; 289 | files = ( 290 | ); 291 | inputFileListPaths = ( 292 | ); 293 | inputPaths = ( 294 | "${PODS_PODFILE_DIR_PATH}/Podfile.lock", 295 | "${PODS_ROOT}/Manifest.lock", 296 | ); 297 | name = "[CP] Check Pods Manifest.lock"; 298 | outputFileListPaths = ( 299 | ); 300 | outputPaths = ( 301 | "$(DERIVED_FILE_DIR)/Pods-example-exampleTests-checkManifestLockResult.txt", 302 | ); 303 | runOnlyForDeploymentPostprocessing = 0; 304 | shellPath = /bin/sh; 305 | shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; 306 | showEnvVarsInLog = 0; 307 | }; 308 | C38B50BA6285516D6DCD4F65 /* [CP] Check Pods Manifest.lock */ = { 309 | isa = PBXShellScriptBuildPhase; 310 | buildActionMask = 2147483647; 311 | files = ( 312 | ); 313 | inputFileListPaths = ( 314 | ); 315 | inputPaths = ( 316 | "${PODS_PODFILE_DIR_PATH}/Podfile.lock", 317 | "${PODS_ROOT}/Manifest.lock", 318 | ); 319 | name = "[CP] Check Pods Manifest.lock"; 320 | outputFileListPaths = ( 321 | ); 322 | outputPaths = ( 323 | "$(DERIVED_FILE_DIR)/Pods-example-checkManifestLockResult.txt", 324 | ); 325 | runOnlyForDeploymentPostprocessing = 0; 326 | shellPath = /bin/sh; 327 | shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; 328 | showEnvVarsInLog = 0; 329 | }; 330 | C59DA0FBD6956966B86A3779 /* [CP] Embed Pods Frameworks */ = { 331 | isa = PBXShellScriptBuildPhase; 332 | buildActionMask = 2147483647; 333 | files = ( 334 | ); 335 | inputFileListPaths = ( 336 | "${PODS_ROOT}/Target Support Files/Pods-example-exampleTests/Pods-example-exampleTests-frameworks-${CONFIGURATION}-input-files.xcfilelist", 337 | ); 338 | name = "[CP] Embed Pods Frameworks"; 339 | outputFileListPaths = ( 340 | "${PODS_ROOT}/Target Support Files/Pods-example-exampleTests/Pods-example-exampleTests-frameworks-${CONFIGURATION}-output-files.xcfilelist", 341 | ); 342 | runOnlyForDeploymentPostprocessing = 0; 343 | shellPath = /bin/sh; 344 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-example-exampleTests/Pods-example-exampleTests-frameworks.sh\"\n"; 345 | showEnvVarsInLog = 0; 346 | }; 347 | E235C05ADACE081382539298 /* [CP] Copy Pods Resources */ = { 348 | isa = PBXShellScriptBuildPhase; 349 | buildActionMask = 2147483647; 350 | files = ( 351 | ); 352 | inputFileListPaths = ( 353 | "${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-resources-${CONFIGURATION}-input-files.xcfilelist", 354 | ); 355 | name = "[CP] Copy Pods Resources"; 356 | outputFileListPaths = ( 357 | "${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-resources-${CONFIGURATION}-output-files.xcfilelist", 358 | ); 359 | runOnlyForDeploymentPostprocessing = 0; 360 | shellPath = /bin/sh; 361 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-resources.sh\"\n"; 362 | showEnvVarsInLog = 0; 363 | }; 364 | F6A41C54EA430FDDC6A6ED99 /* [CP] Copy Pods Resources */ = { 365 | isa = PBXShellScriptBuildPhase; 366 | buildActionMask = 2147483647; 367 | files = ( 368 | ); 369 | inputFileListPaths = ( 370 | "${PODS_ROOT}/Target Support Files/Pods-example-exampleTests/Pods-example-exampleTests-resources-${CONFIGURATION}-input-files.xcfilelist", 371 | ); 372 | name = "[CP] Copy Pods Resources"; 373 | outputFileListPaths = ( 374 | "${PODS_ROOT}/Target Support Files/Pods-example-exampleTests/Pods-example-exampleTests-resources-${CONFIGURATION}-output-files.xcfilelist", 375 | ); 376 | runOnlyForDeploymentPostprocessing = 0; 377 | shellPath = /bin/sh; 378 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-example-exampleTests/Pods-example-exampleTests-resources.sh\"\n"; 379 | showEnvVarsInLog = 0; 380 | }; 381 | FD10A7F022414F080027D42C /* Start Packager */ = { 382 | isa = PBXShellScriptBuildPhase; 383 | buildActionMask = 2147483647; 384 | files = ( 385 | ); 386 | inputFileListPaths = ( 387 | ); 388 | inputPaths = ( 389 | ); 390 | name = "Start Packager"; 391 | outputFileListPaths = ( 392 | ); 393 | outputPaths = ( 394 | ); 395 | runOnlyForDeploymentPostprocessing = 0; 396 | shellPath = /bin/sh; 397 | shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n exit 2\n fi\n else\n open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n fi\nfi\n"; 398 | showEnvVarsInLog = 0; 399 | }; 400 | /* End PBXShellScriptBuildPhase section */ 401 | 402 | /* Begin PBXSourcesBuildPhase section */ 403 | 00E356EA1AD99517003FC87E /* Sources */ = { 404 | isa = PBXSourcesBuildPhase; 405 | buildActionMask = 2147483647; 406 | files = ( 407 | 00E356F31AD99517003FC87E /* exampleTests.m in Sources */, 408 | ); 409 | runOnlyForDeploymentPostprocessing = 0; 410 | }; 411 | 13B07F871A680F5B00A75B9A /* Sources */ = { 412 | isa = PBXSourcesBuildPhase; 413 | buildActionMask = 2147483647; 414 | files = ( 415 | 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */, 416 | 13B07FC11A68108700A75B9A /* main.m in Sources */, 417 | ); 418 | runOnlyForDeploymentPostprocessing = 0; 419 | }; 420 | /* End PBXSourcesBuildPhase section */ 421 | 422 | /* Begin PBXTargetDependency section */ 423 | 00E356F51AD99517003FC87E /* PBXTargetDependency */ = { 424 | isa = PBXTargetDependency; 425 | target = 13B07F861A680F5B00A75B9A /* example */; 426 | targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */; 427 | }; 428 | /* End PBXTargetDependency section */ 429 | 430 | /* Begin XCBuildConfiguration section */ 431 | 00E356F61AD99517003FC87E /* Debug */ = { 432 | isa = XCBuildConfiguration; 433 | baseConfigurationReference = 5B7EB9410499542E8C5724F5 /* Pods-example-exampleTests.debug.xcconfig */; 434 | buildSettings = { 435 | BUNDLE_LOADER = "$(TEST_HOST)"; 436 | GCC_PREPROCESSOR_DEFINITIONS = ( 437 | "DEBUG=1", 438 | "$(inherited)", 439 | ); 440 | INFOPLIST_FILE = exampleTests/Info.plist; 441 | IPHONEOS_DEPLOYMENT_TARGET = 12.4; 442 | LD_RUNPATH_SEARCH_PATHS = ( 443 | "$(inherited)", 444 | "@executable_path/Frameworks", 445 | "@loader_path/Frameworks", 446 | ); 447 | OTHER_LDFLAGS = ( 448 | "-ObjC", 449 | "-lc++", 450 | "$(inherited)", 451 | ); 452 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 453 | PRODUCT_NAME = "$(TARGET_NAME)"; 454 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/example.app/example"; 455 | }; 456 | name = Debug; 457 | }; 458 | 00E356F71AD99517003FC87E /* Release */ = { 459 | isa = XCBuildConfiguration; 460 | baseConfigurationReference = 89C6BE57DB24E9ADA2F236DE /* Pods-example-exampleTests.release.xcconfig */; 461 | buildSettings = { 462 | BUNDLE_LOADER = "$(TEST_HOST)"; 463 | COPY_PHASE_STRIP = NO; 464 | INFOPLIST_FILE = exampleTests/Info.plist; 465 | IPHONEOS_DEPLOYMENT_TARGET = 12.4; 466 | LD_RUNPATH_SEARCH_PATHS = ( 467 | "$(inherited)", 468 | "@executable_path/Frameworks", 469 | "@loader_path/Frameworks", 470 | ); 471 | OTHER_LDFLAGS = ( 472 | "-ObjC", 473 | "-lc++", 474 | "$(inherited)", 475 | ); 476 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 477 | PRODUCT_NAME = "$(TARGET_NAME)"; 478 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/example.app/example"; 479 | }; 480 | name = Release; 481 | }; 482 | 13B07F941A680F5B00A75B9A /* Debug */ = { 483 | isa = XCBuildConfiguration; 484 | baseConfigurationReference = 3B4392A12AC88292D35C810B /* Pods-example.debug.xcconfig */; 485 | buildSettings = { 486 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 487 | CLANG_ENABLE_MODULES = YES; 488 | CURRENT_PROJECT_VERSION = 1; 489 | ENABLE_BITCODE = NO; 490 | INFOPLIST_FILE = example/Info.plist; 491 | LD_RUNPATH_SEARCH_PATHS = ( 492 | "$(inherited)", 493 | "@executable_path/Frameworks", 494 | ); 495 | MARKETING_VERSION = 1.0; 496 | OTHER_LDFLAGS = ( 497 | "$(inherited)", 498 | "-ObjC", 499 | "-lc++", 500 | ); 501 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 502 | PRODUCT_NAME = example; 503 | SWIFT_OPTIMIZATION_LEVEL = "-Onone"; 504 | SWIFT_VERSION = 5.0; 505 | VERSIONING_SYSTEM = "apple-generic"; 506 | }; 507 | name = Debug; 508 | }; 509 | 13B07F951A680F5B00A75B9A /* Release */ = { 510 | isa = XCBuildConfiguration; 511 | baseConfigurationReference = 5709B34CF0A7D63546082F79 /* Pods-example.release.xcconfig */; 512 | buildSettings = { 513 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 514 | CLANG_ENABLE_MODULES = YES; 515 | CURRENT_PROJECT_VERSION = 1; 516 | INFOPLIST_FILE = example/Info.plist; 517 | LD_RUNPATH_SEARCH_PATHS = ( 518 | "$(inherited)", 519 | "@executable_path/Frameworks", 520 | ); 521 | MARKETING_VERSION = 1.0; 522 | OTHER_LDFLAGS = ( 523 | "$(inherited)", 524 | "-ObjC", 525 | "-lc++", 526 | ); 527 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 528 | PRODUCT_NAME = example; 529 | SWIFT_VERSION = 5.0; 530 | VERSIONING_SYSTEM = "apple-generic"; 531 | }; 532 | name = Release; 533 | }; 534 | 83CBBA201A601CBA00E9B192 /* Debug */ = { 535 | isa = XCBuildConfiguration; 536 | buildSettings = { 537 | ALWAYS_SEARCH_USER_PATHS = NO; 538 | CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; 539 | CLANG_CXX_LANGUAGE_STANDARD = "c++17"; 540 | CLANG_CXX_LIBRARY = "libc++"; 541 | CLANG_ENABLE_MODULES = YES; 542 | CLANG_ENABLE_OBJC_ARC = YES; 543 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 544 | CLANG_WARN_BOOL_CONVERSION = YES; 545 | CLANG_WARN_COMMA = YES; 546 | CLANG_WARN_CONSTANT_CONVERSION = YES; 547 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 548 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 549 | CLANG_WARN_EMPTY_BODY = YES; 550 | CLANG_WARN_ENUM_CONVERSION = YES; 551 | CLANG_WARN_INFINITE_RECURSION = YES; 552 | CLANG_WARN_INT_CONVERSION = YES; 553 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 554 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 555 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 556 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 557 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 558 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 559 | CLANG_WARN_STRICT_PROTOTYPES = YES; 560 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 561 | CLANG_WARN_UNREACHABLE_CODE = YES; 562 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 563 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 564 | COPY_PHASE_STRIP = NO; 565 | ENABLE_STRICT_OBJC_MSGSEND = YES; 566 | ENABLE_TESTABILITY = YES; 567 | "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = ""; 568 | GCC_C_LANGUAGE_STANDARD = gnu99; 569 | GCC_DYNAMIC_NO_PIC = NO; 570 | GCC_NO_COMMON_BLOCKS = YES; 571 | GCC_OPTIMIZATION_LEVEL = 0; 572 | GCC_PREPROCESSOR_DEFINITIONS = ( 573 | "DEBUG=1", 574 | "$(inherited)", 575 | ); 576 | GCC_SYMBOLS_PRIVATE_EXTERN = NO; 577 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 578 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 579 | GCC_WARN_UNDECLARED_SELECTOR = YES; 580 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 581 | GCC_WARN_UNUSED_FUNCTION = YES; 582 | GCC_WARN_UNUSED_VARIABLE = YES; 583 | IPHONEOS_DEPLOYMENT_TARGET = 12.4; 584 | LD_RUNPATH_SEARCH_PATHS = ( 585 | /usr/lib/swift, 586 | "$(inherited)", 587 | ); 588 | LIBRARY_SEARCH_PATHS = ( 589 | "\"$(SDKROOT)/usr/lib/swift\"", 590 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", 591 | "\"$(inherited)\"", 592 | ); 593 | MTL_ENABLE_DEBUG_INFO = YES; 594 | ONLY_ACTIVE_ARCH = YES; 595 | OTHER_CPLUSPLUSFLAGS = ( 596 | "$(OTHER_CFLAGS)", 597 | "-DFOLLY_NO_CONFIG", 598 | "-DFOLLY_MOBILE=1", 599 | "-DFOLLY_USE_LIBCPP=1", 600 | ); 601 | SDKROOT = iphoneos; 602 | }; 603 | name = Debug; 604 | }; 605 | 83CBBA211A601CBA00E9B192 /* Release */ = { 606 | isa = XCBuildConfiguration; 607 | buildSettings = { 608 | ALWAYS_SEARCH_USER_PATHS = NO; 609 | CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; 610 | CLANG_CXX_LANGUAGE_STANDARD = "c++17"; 611 | CLANG_CXX_LIBRARY = "libc++"; 612 | CLANG_ENABLE_MODULES = YES; 613 | CLANG_ENABLE_OBJC_ARC = YES; 614 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 615 | CLANG_WARN_BOOL_CONVERSION = YES; 616 | CLANG_WARN_COMMA = YES; 617 | CLANG_WARN_CONSTANT_CONVERSION = YES; 618 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 619 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 620 | CLANG_WARN_EMPTY_BODY = YES; 621 | CLANG_WARN_ENUM_CONVERSION = YES; 622 | CLANG_WARN_INFINITE_RECURSION = YES; 623 | CLANG_WARN_INT_CONVERSION = YES; 624 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 625 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 626 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 627 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 628 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 629 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 630 | CLANG_WARN_STRICT_PROTOTYPES = YES; 631 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 632 | CLANG_WARN_UNREACHABLE_CODE = YES; 633 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 634 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 635 | COPY_PHASE_STRIP = YES; 636 | ENABLE_NS_ASSERTIONS = NO; 637 | ENABLE_STRICT_OBJC_MSGSEND = YES; 638 | "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = ""; 639 | GCC_C_LANGUAGE_STANDARD = gnu99; 640 | GCC_NO_COMMON_BLOCKS = YES; 641 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 642 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 643 | GCC_WARN_UNDECLARED_SELECTOR = YES; 644 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 645 | GCC_WARN_UNUSED_FUNCTION = YES; 646 | GCC_WARN_UNUSED_VARIABLE = YES; 647 | IPHONEOS_DEPLOYMENT_TARGET = 12.4; 648 | LD_RUNPATH_SEARCH_PATHS = ( 649 | /usr/lib/swift, 650 | "$(inherited)", 651 | ); 652 | LIBRARY_SEARCH_PATHS = ( 653 | "\"$(SDKROOT)/usr/lib/swift\"", 654 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", 655 | "\"$(inherited)\"", 656 | ); 657 | MTL_ENABLE_DEBUG_INFO = NO; 658 | OTHER_CPLUSPLUSFLAGS = ( 659 | "$(OTHER_CFLAGS)", 660 | "-DFOLLY_NO_CONFIG", 661 | "-DFOLLY_MOBILE=1", 662 | "-DFOLLY_USE_LIBCPP=1", 663 | ); 664 | SDKROOT = iphoneos; 665 | VALIDATE_PRODUCT = YES; 666 | }; 667 | name = Release; 668 | }; 669 | /* End XCBuildConfiguration section */ 670 | 671 | /* Begin XCConfigurationList section */ 672 | 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "exampleTests" */ = { 673 | isa = XCConfigurationList; 674 | buildConfigurations = ( 675 | 00E356F61AD99517003FC87E /* Debug */, 676 | 00E356F71AD99517003FC87E /* Release */, 677 | ); 678 | defaultConfigurationIsVisible = 0; 679 | defaultConfigurationName = Release; 680 | }; 681 | 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "example" */ = { 682 | isa = XCConfigurationList; 683 | buildConfigurations = ( 684 | 13B07F941A680F5B00A75B9A /* Debug */, 685 | 13B07F951A680F5B00A75B9A /* Release */, 686 | ); 687 | defaultConfigurationIsVisible = 0; 688 | defaultConfigurationName = Release; 689 | }; 690 | 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "example" */ = { 691 | isa = XCConfigurationList; 692 | buildConfigurations = ( 693 | 83CBBA201A601CBA00E9B192 /* Debug */, 694 | 83CBBA211A601CBA00E9B192 /* Release */, 695 | ); 696 | defaultConfigurationIsVisible = 0; 697 | defaultConfigurationName = Release; 698 | }; 699 | /* End XCConfigurationList section */ 700 | }; 701 | rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */; 702 | } 703 | -------------------------------------------------------------------------------- /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/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : RCTAppDelegate 5 | 6 | @end 7 | -------------------------------------------------------------------------------- /example/ios/example/AppDelegate.mm: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | 5 | @implementation AppDelegate 6 | 7 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 8 | { 9 | self.moduleName = @"example"; 10 | // You can add your custom initial props in the dictionary below. 11 | // They will be passed down to the ViewController used by React Native. 12 | self.initialProps = @{}; 13 | 14 | return [super application:application didFinishLaunchingWithOptions:launchOptions]; 15 | } 16 | 17 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 18 | { 19 | #if DEBUG 20 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; 21 | #else 22 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 23 | #endif 24 | } 25 | 26 | @end 27 | -------------------------------------------------------------------------------- /example/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "scale" : "2x", 6 | "size" : "20x20" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "scale" : "3x", 11 | "size" : "20x20" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "scale" : "2x", 16 | "size" : "29x29" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "scale" : "3x", 21 | "size" : "29x29" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "scale" : "2x", 26 | "size" : "40x40" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "scale" : "3x", 31 | "size" : "40x40" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "scale" : "2x", 36 | "size" : "60x60" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "scale" : "3x", 41 | "size" : "60x60" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "scale" : "1x", 46 | "size" : "1024x1024" 47 | } 48 | ], 49 | "info" : { 50 | "author" : "xcode", 51 | "version" : 1 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /example/ios/example/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /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 | $(MARKETING_VERSION) 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | $(CURRENT_PROJECT_VERSION) 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSExceptionDomains 30 | 31 | localhost 32 | 33 | NSExceptionAllowsInsecureHTTPLoads 34 | 35 | 36 | 37 | 38 | NSLocationWhenInUseUsageDescription 39 | 40 | UILaunchStoryboardName 41 | LaunchScreen 42 | UIRequiredDeviceCapabilities 43 | 44 | armv7 45 | 46 | UISupportedInterfaceOrientations 47 | 48 | UIInterfaceOrientationPortrait 49 | UIInterfaceOrientationLandscapeLeft 50 | UIInterfaceOrientationLandscapeRight 51 | 52 | UIViewControllerBasedStatusBarAppearance 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /example/ios/example/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /example/ios/example/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | @autoreleasepool { 8 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /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/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( 38 | ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 39 | if (level >= RCTLogLevelError) { 40 | redboxError = message; 41 | } 42 | }); 43 | #endif 44 | 45 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 46 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 48 | 49 | foundElement = [self findSubviewInView:vc.view 50 | matching:^BOOL(UIView *view) { 51 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 52 | return YES; 53 | } 54 | return NO; 55 | }]; 56 | } 57 | 58 | #ifdef DEBUG 59 | RCTSetLogFunction(RCTDefaultLogFunction); 60 | #endif 61 | 62 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 63 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 64 | } 65 | 66 | @end 67 | -------------------------------------------------------------------------------- /example/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'react-native', 3 | }; 4 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); 2 | 3 | /** 4 | * Metro configuration 5 | * https://facebook.github.io/metro/docs/configuration 6 | * 7 | * @type {import('metro-config').MetroConfig} 8 | */ 9 | const config = {}; 10 | 11 | module.exports = mergeConfig(getDefaultConfig(__dirname), config); 12 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "lint": "eslint .", 9 | "start": "react-native start", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "dayjs": "^1.11.10", 14 | "react": "18.2.0", 15 | "react-native": "0.72.7" 16 | }, 17 | "devDependencies": { 18 | "@babel/core": "^7.20.0", 19 | "@babel/preset-env": "^7.20.0", 20 | "@babel/runtime": "^7.20.0", 21 | "@react-native/eslint-config": "^0.72.2", 22 | "@react-native/metro-config": "^0.72.11", 23 | "@tsconfig/react-native": "^3.0.0", 24 | "@types/react": "^18.0.24", 25 | "@types/react-test-renderer": "^18.0.0", 26 | "babel-jest": "^29.2.1", 27 | "eslint": "^8.19.0", 28 | "jest": "^29.2.1", 29 | "metro-react-native-babel-preset": "0.76.8", 30 | "prettier": "^2.4.1", 31 | "react-test-renderer": "18.2.0", 32 | "typescript": "4.0.3" 33 | }, 34 | "engines": { 35 | "node": ">=16" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /example/src/CalendarList.tsx: -------------------------------------------------------------------------------- 1 | import React, {useMemo, useCallback} from 'react'; 2 | import dayjs from 'dayjs'; 3 | import {FlatList, View, ActivityIndicator, FlatListProps} from 'react-native'; 4 | // components 5 | import Month from './Month'; 6 | // data 7 | import {getMonths} from './utils/data'; 8 | // types 9 | import {Month_Type} from './utils/data'; 10 | import {LOCALE_TYPE} from './utils/locale'; 11 | import {Style} from './index'; 12 | 13 | interface Props { 14 | pastYearRange: number; 15 | futureYearRange: number; 16 | initialNumToRender: number; 17 | locale: LOCALE_TYPE; 18 | handlePress: (date: string) => void; 19 | startDate: string | null; 20 | endDate: string | null; 21 | style?: Style; 22 | flatListProps?: FlatListProps; 23 | isMonthFirst?: boolean; 24 | disabledBeforeToday?: boolean; 25 | disabledAfterToday?: boolean; 26 | } 27 | 28 | const LAYOUT_HEIGHT = 370; 29 | const CalendarList = ({ 30 | pastYearRange, 31 | futureYearRange, 32 | initialNumToRender, 33 | locale, 34 | handlePress, 35 | startDate, 36 | endDate, 37 | flatListProps, 38 | isMonthFirst, 39 | disabledBeforeToday, 40 | disabledAfterToday, 41 | style, 42 | }: Props) => { 43 | const months: Month_Type[] = useMemo( 44 | () => getMonths(pastYearRange, futureYearRange), 45 | [pastYearRange, futureYearRange], 46 | ); 47 | 48 | const getInitialIndex = useCallback(() => { 49 | return months.findIndex((month: Month_Type) => { 50 | const targetDate = startDate ? dayjs(startDate) : dayjs(); 51 | return month.id === targetDate.format('YYYY-MM'); 52 | }); 53 | }, []); 54 | 55 | const handleRenderItem = useCallback( 56 | ({item}: {item: Month_Type}) => ( 57 | 62 | 73 | 74 | ), 75 | [locale.today, startDate, endDate], 76 | ); 77 | 78 | return ( 79 | 84 | 94 | 95 | 96 | item.id} 98 | data={months} 99 | renderItem={handleRenderItem} 100 | getItemLayout={(_, index) => ({ 101 | length: LAYOUT_HEIGHT, 102 | offset: LAYOUT_HEIGHT * index, 103 | index, 104 | })} 105 | initialScrollIndex={getInitialIndex()} 106 | initialNumToRender={initialNumToRender} 107 | {...flatListProps} 108 | /> 109 | 110 | ); 111 | }; 112 | 113 | export default CalendarList; 114 | -------------------------------------------------------------------------------- /example/src/Day.tsx: -------------------------------------------------------------------------------- 1 | import React, {memo} from 'react'; 2 | import {View, Text, StyleProp, ViewStyle} from 'react-native'; 3 | import dayjs from 'dayjs'; 4 | // types 5 | import {LOCALE_TYPE} from './utils/locale'; 6 | import {Day_Type} from './utils/data'; 7 | import {Style} from './index'; 8 | 9 | interface Props { 10 | day: Day_Type; 11 | locale: LOCALE_TYPE; 12 | disabledBeforeToday?: boolean; 13 | disabledAfterToday?: boolean; 14 | style?: Style; 15 | } 16 | 17 | function Day({ 18 | day, 19 | locale, 20 | disabledBeforeToday, 21 | disabledAfterToday, 22 | style, 23 | }: Props) { 24 | const {date, type, isHoliday, isToday, isBeforeToday, isAfterToday} = day; 25 | 26 | const dayTextColor = style?.dayTextColor || '#1d1c1d'; 27 | const holidayColor = style?.holidayColor || '#f26522'; 28 | const todayColor = style?.todayColor || '#1692e4'; 29 | const selectedDayTextColor = style?.selectedDayTextColor || '#fff'; 30 | const disabledTextColor = style?.disabledTextColor || '#ccc'; 31 | const selectedDayBackgroundColor = 32 | style?.selectedDayBackgroundColor || '#83bc44'; 33 | const selectedBetweenDayTextColor = 34 | style?.selectedBetweenDayTextColor || '#1d1c1d'; 35 | const selectedBetweenDayBackgroundTextColor = 36 | style?.selectedBetweenDayBackgroundTextColor || '#F2F2F2'; 37 | 38 | let markStyle: StyleProp = { 39 | width: 30, 40 | height: 30, 41 | justifyContent: 'center', 42 | alignItems: 'center', 43 | }; 44 | let betweenStyle: StyleProp = { 45 | width: '50%', 46 | height: 30, 47 | position: 'absolute', 48 | backgroundColor: selectedBetweenDayBackgroundTextColor, 49 | }; 50 | let dayStyle = { 51 | color: 52 | (disabledBeforeToday && isBeforeToday) || 53 | (disabledAfterToday && isAfterToday) 54 | ? disabledTextColor 55 | : isToday 56 | ? todayColor 57 | : isHoliday 58 | ? holidayColor 59 | : dayTextColor, 60 | }; 61 | 62 | switch (type) { 63 | case 'single': 64 | markStyle = { 65 | ...markStyle, 66 | backgroundColor: selectedDayBackgroundColor, 67 | borderRadius: 15, 68 | }; 69 | dayStyle = {color: selectedDayTextColor}; 70 | break; 71 | case 'start': 72 | markStyle = { 73 | ...markStyle, 74 | backgroundColor: selectedDayBackgroundColor, 75 | borderRadius: 15, 76 | }; 77 | dayStyle = {color: selectedDayTextColor}; 78 | break; 79 | case 'end': 80 | markStyle = { 81 | ...markStyle, 82 | backgroundColor: selectedDayBackgroundColor, 83 | borderRadius: 15, 84 | }; 85 | dayStyle = {color: selectedDayTextColor}; 86 | break; 87 | case 'between': 88 | markStyle = { 89 | ...markStyle, 90 | backgroundColor: selectedBetweenDayBackgroundTextColor, 91 | width: '101%', 92 | }; 93 | dayStyle = { 94 | color: isToday 95 | ? todayColor 96 | : isHoliday 97 | ? holidayColor 98 | : selectedBetweenDayTextColor, 99 | }; 100 | 101 | break; 102 | 103 | default: 104 | break; 105 | } 106 | 107 | return ( 108 | <> 109 | {type === 'end' ? : null} 110 | {type === 'start' ? : null} 111 | {date ? ( 112 | 113 | 114 | {dayjs(date).date()} 115 | 116 | 117 | ) : null} 118 | {isToday ? ( 119 | 120 | {locale.today} 121 | 122 | ) : null} 123 | 124 | ); 125 | } 126 | 127 | function areEqual(prevProps: Props, nextProps: Props) { 128 | if (prevProps.day.type === nextProps.day.type) return true; 129 | return false; 130 | } 131 | 132 | export default memo(Day, areEqual); 133 | -------------------------------------------------------------------------------- /example/src/Month.tsx: -------------------------------------------------------------------------------- 1 | import React, {memo} from 'react'; 2 | import {StyleSheet, View, Text} from 'react-native'; 3 | import dayjs from 'dayjs'; 4 | // components 5 | import Week from './Week'; 6 | // types 7 | import {getWeeks, Month_Type, Week_Type} from './utils/data'; 8 | import {LOCALE_TYPE} from './utils/locale'; 9 | import {Style} from './index'; 10 | 11 | interface Props { 12 | item: Month_Type; 13 | locale: LOCALE_TYPE; 14 | handlePress: (date: string) => void; 15 | startDate: string | null; 16 | endDate: string | null; 17 | isMonthFirst?: boolean; 18 | disabledBeforeToday?: boolean; 19 | disabledAfterToday?: boolean; 20 | style?: Style; 21 | } 22 | 23 | const PADDING_HORIZONTAL = 10; 24 | function Month({ 25 | item, 26 | locale, 27 | handlePress, 28 | startDate, 29 | endDate, 30 | isMonthFirst, 31 | disabledBeforeToday, 32 | disabledAfterToday, 33 | style, 34 | }: Props) { 35 | const {year, month} = item; 36 | 37 | const renderDayNames = () => { 38 | const result = []; 39 | const dayNames = locale.dayNames; 40 | 41 | for (let i = 0; i < dayNames.length; i++) { 42 | result.push( 43 | 44 | 45 | {dayNames[i]} 46 | 47 | , 48 | ); 49 | } 50 | return result; 51 | }; 52 | 53 | const renderWeeks = () => { 54 | const result = []; 55 | const weeks: Week_Type[] = getWeeks(item.id, startDate, endDate); 56 | const is6Weeks = weeks.length > 5; 57 | 58 | for (let i = 0; i < weeks.length; i++) { 59 | result.push( 60 | , 70 | ); 71 | } 72 | return result; 73 | }; 74 | 75 | return ( 76 | 77 | 78 | 79 | {isMonthFirst ? {locale.monthNames[month - 1]} : null} 80 | {year} 81 | {locale.year} 82 | {!isMonthFirst ? {locale.monthNames[month - 1]} : null} 83 | 84 | 85 | {renderDayNames()} 86 | {renderWeeks()} 87 | 88 | ); 89 | } 90 | 91 | function areEqual(prevProps: Props, nextProps: Props) { 92 | const newId = nextProps.item.id; 93 | if ( 94 | nextProps.startDate && 95 | dayjs(nextProps.startDate).format('YYYY-MM') === newId 96 | ) { 97 | return false; 98 | } 99 | 100 | if ( 101 | nextProps.endDate && 102 | dayjs(nextProps.endDate).format('YYYY-MM') === newId 103 | ) { 104 | return false; 105 | } 106 | 107 | if ( 108 | prevProps.startDate && 109 | dayjs(prevProps.startDate).format('YYYY-MM') === newId 110 | ) { 111 | return false; 112 | } 113 | 114 | if ( 115 | prevProps.endDate && 116 | dayjs(prevProps.endDate).format('YYYY-MM') === newId 117 | ) { 118 | return false; 119 | } 120 | 121 | if ( 122 | nextProps.startDate && 123 | nextProps.endDate && 124 | dayjs(nextProps.startDate).format('YYYYMM') < 125 | dayjs(newId).format('YYYYMM') && 126 | dayjs(nextProps.endDate).format('YYYYMM') > dayjs(newId).format('YYYYMM') 127 | ) { 128 | return false; 129 | } 130 | 131 | if ( 132 | prevProps.endDate && 133 | prevProps.startDate && 134 | dayjs(prevProps.startDate).format('YYYYMM') < 135 | dayjs(newId).format('YYYYMM') && 136 | dayjs(prevProps.endDate).format('YYYYMM') > dayjs(newId).format('YYYYMM') 137 | ) { 138 | return false; 139 | } 140 | 141 | if ( 142 | prevProps.locale && 143 | nextProps.locale && 144 | prevProps.locale.today !== nextProps.locale.today 145 | ) { 146 | return false; 147 | } 148 | 149 | return true; 150 | } 151 | 152 | export default memo(Month, areEqual); 153 | 154 | const styles = StyleSheet.create({ 155 | monthContainer: { 156 | paddingTop: 20, 157 | paddingHorizontal: PADDING_HORIZONTAL, 158 | backgroundColor: '#fff', 159 | }, 160 | monthNameContainer: { 161 | flexDirection: 'row', 162 | alignItems: 'center', 163 | height: 30, 164 | paddingLeft: 16, 165 | }, 166 | monthName: { 167 | fontSize: 16, 168 | }, 169 | dayNamesContainer: { 170 | height: 50, 171 | flexDirection: 'row', 172 | alignItems: 'center', 173 | }, 174 | dayNameContainer: { 175 | flex: 1, 176 | justifyContent: 'center', 177 | alignItems: 'center', 178 | }, 179 | dayName: { 180 | fontSize: 15, 181 | color: '#bababe', 182 | }, 183 | dayContainer: { 184 | flexDirection: 'row', 185 | flexWrap: 'wrap', 186 | }, 187 | }); 188 | -------------------------------------------------------------------------------- /example/src/Week.tsx: -------------------------------------------------------------------------------- 1 | import React, { memo } from "react"; 2 | import { View, StyleSheet, TouchableOpacity } from "react-native"; 3 | // components 4 | import Day from "./Day"; 5 | // types 6 | import { LOCALE_TYPE } from "./utils/locale"; 7 | import { Week_Type } from "./utils/data"; 8 | import { Style } from "./index"; 9 | 10 | interface Props { 11 | week: Week_Type; 12 | locale: LOCALE_TYPE; 13 | handlePress: (date: string) => void; 14 | is6Weeks: boolean; 15 | disabledBeforeToday?: boolean; 16 | disabledAfterToday?: boolean; 17 | style?: Style; 18 | } 19 | 20 | function Week({ 21 | week, 22 | locale, 23 | handlePress, 24 | is6Weeks, 25 | disabledBeforeToday, 26 | disabledAfterToday, 27 | style, 28 | }: Props) { 29 | const renderDayNames = () => { 30 | const result = []; 31 | for (let i = 0; i < 7; i++) { 32 | const day = week[i]; 33 | const DayComponent = day.date ? ( 34 | handlePress(day.date || "")} 44 | activeOpacity={1} 45 | key={day.date || i} 46 | > 47 | 54 | 55 | ) : ( 56 | 57 | ); 58 | result.push(DayComponent); 59 | } 60 | return result; 61 | }; 62 | 63 | return {renderDayNames()}; 64 | } 65 | 66 | function areEqual(prevProps: Props, nextProps: Props) { 67 | if (JSON.stringify(prevProps.week) === JSON.stringify(nextProps.week)) return true; 68 | return false; 69 | } 70 | 71 | export default memo(Week, areEqual); 72 | 73 | const styles = StyleSheet.create({ 74 | weekContainer: { 75 | flexDirection: "row", 76 | alignItems: "center", 77 | }, 78 | }); 79 | -------------------------------------------------------------------------------- /example/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState, useRef} from 'react'; 2 | import dayjs from 'dayjs'; 3 | // components 4 | import CalendarList from './CalendarList'; 5 | // data 6 | import {LOCALE, LOCALE_TYPE} from './utils/locale'; 7 | 8 | export interface Style { 9 | container?: {}; 10 | monthContainer?: {}; 11 | monthOverlayContainer?: {}; 12 | weekContainer?: {}; 13 | monthNameText?: {}; 14 | dayNameText?: {}; 15 | dayText?: {}; 16 | dayTextColor?: string; 17 | holidayColor?: string; 18 | todayColor?: string; 19 | disabledTextColor?: string; 20 | selectedDayTextColor?: string; 21 | selectedDayBackgroundColor?: string; 22 | selectedBetweenDayTextColor?: string; 23 | selectedBetweenDayBackgroundTextColor?: string; 24 | } 25 | interface onChangeParams { 26 | startDate: string | null; 27 | endDate: string | null; 28 | } 29 | 30 | interface Props { 31 | pastYearRange?: number; 32 | futureYearRange?: number; 33 | locale?: LOCALE_TYPE; 34 | startDate?: string; 35 | endDate?: string; 36 | onChange: (params: onChangeParams | any) => void; 37 | style?: Style; 38 | singleSelectMode?: boolean; 39 | initialNumToRender?: number; 40 | flatListProps?: any; 41 | isMonthFirst?: boolean; 42 | disabledBeforeToday?: boolean; 43 | disabledAfterToday?: boolean; 44 | } 45 | 46 | export default function Index({ 47 | pastYearRange = 1, 48 | futureYearRange = 2, 49 | initialNumToRender = 7, 50 | locale = LOCALE, 51 | startDate: prevStartDate, 52 | endDate: prevEndDate, 53 | onChange, 54 | style, 55 | singleSelectMode, 56 | flatListProps, 57 | isMonthFirst, 58 | disabledBeforeToday, 59 | disabledAfterToday, 60 | }: Props) { 61 | const [startDate, setStartDate] = useState( 62 | prevStartDate ? prevStartDate : null, 63 | ); 64 | const [endDate, setEndDate] = useState(prevEndDate ? prevEndDate : null); 65 | const startDateRef = useRef(null); 66 | const endDateRef = useRef(null); 67 | 68 | const handleSetStartDate = (startDate: string) => { 69 | setStartDate(startDate); 70 | setEndDate(null); 71 | startDateRef.current = startDate; 72 | endDateRef.current = null; 73 | if (singleSelectMode) { 74 | onChange(startDate); 75 | } else { 76 | onChange({startDate, endDate: null}); 77 | } 78 | }; 79 | 80 | const handleSetEndDate = (startDate: string, endDate: string) => { 81 | setEndDate(endDate); 82 | endDateRef.current = endDate; 83 | onChange({startDate, endDate}); 84 | }; 85 | 86 | const handlePress = (date: string) => { 87 | if (singleSelectMode) { 88 | handleSetStartDate(date); 89 | return; 90 | } 91 | 92 | if (!startDateRef.current && !endDateRef.current) { 93 | handleSetStartDate(date); 94 | return; 95 | } 96 | 97 | if (startDateRef.current && endDateRef.current) { 98 | handleSetStartDate(date); 99 | return; 100 | } 101 | 102 | if (startDateRef.current) { 103 | if (dayjs(date).isBefore(startDateRef.current)) { 104 | handleSetStartDate(date); 105 | } else { 106 | handleSetEndDate(startDateRef.current, date); 107 | } 108 | } 109 | }; 110 | 111 | return ( 112 | 126 | ); 127 | } 128 | -------------------------------------------------------------------------------- /example/src/utils/data.ts: -------------------------------------------------------------------------------- 1 | import dayjs from 'dayjs'; 2 | 3 | export interface Day_Type { 4 | type: 'single' | 'start' | 'end' | 'between' | null; 5 | date: string | null; 6 | isToday: boolean; 7 | isBeforeToday: boolean; 8 | isAfterToday: boolean; 9 | isHoliday: boolean; 10 | } 11 | 12 | export type Week_Type = Day_Type[]; 13 | export interface Month_Type { 14 | id: string; 15 | year: number; 16 | month: number; 17 | } 18 | 19 | export function getMonths(pastYearRange: number, futureYearRange: number) { 20 | const currentYear = dayjs().year(); 21 | const startYear = currentYear - pastYearRange; 22 | const endYear = currentYear + futureYearRange; 23 | 24 | const months: Month_Type[] = []; 25 | for (let i = 0; i < endYear - startYear; i++) { 26 | const year = startYear + i; 27 | for (let j = 1; j <= 12; j++) { 28 | let id = ''; 29 | id = `${year}-${j <= 9 ? '0' : ''}${j}`; 30 | months.push({ 31 | id, 32 | year, 33 | month: j, 34 | }); 35 | } 36 | } 37 | return months; 38 | } 39 | 40 | export function getWeeks( 41 | date: string, 42 | selectedStartDate?: string | null, 43 | selectedEndDate?: string | null, 44 | ) { 45 | const DATE_FORMAT = 'YYYY-MM-DD'; 46 | const today = dayjs().format(DATE_FORMAT); 47 | const targetMonth = dayjs(date).month(); 48 | 49 | const month: Week_Type[] = []; 50 | let calcDate = dayjs(date).startOf('month'); 51 | 52 | do { 53 | let week: Week_Type = []; 54 | for (let i = 0; i < 7; i++) { 55 | let dayObj: Day_Type = { 56 | type: null, 57 | date: null, 58 | isToday: false, 59 | isBeforeToday: false, 60 | isAfterToday: false, 61 | isHoliday: false, 62 | }; 63 | const formattedCalcDate = calcDate.format(DATE_FORMAT); 64 | if (i == calcDate.day() && calcDate.month() == targetMonth) { 65 | if (selectedStartDate && selectedStartDate === formattedCalcDate) { 66 | if (!selectedEndDate) { 67 | dayObj.type = 'single'; 68 | } else { 69 | dayObj.type = 'start'; 70 | } 71 | } 72 | 73 | if (selectedEndDate && selectedEndDate == formattedCalcDate) { 74 | if (selectedStartDate === selectedEndDate) { 75 | dayObj.type = 'single'; 76 | } else { 77 | dayObj.type = 'end'; 78 | } 79 | } 80 | if ( 81 | selectedStartDate && 82 | selectedStartDate < formattedCalcDate && 83 | selectedEndDate && 84 | selectedEndDate > formattedCalcDate 85 | ) { 86 | dayObj.type = 'between'; 87 | } 88 | 89 | const date = calcDate.clone().format(DATE_FORMAT); 90 | const passedDayFromToday = calcDate.diff(dayjs(), 'day') < 0; 91 | const futureDayFromToday = calcDate.diff(dayjs(), 'hours') > 0; 92 | dayObj.date = date; 93 | if (date === today) { 94 | dayObj.isToday = true; 95 | } 96 | if (passedDayFromToday) { 97 | dayObj.isBeforeToday = true; 98 | } 99 | if (futureDayFromToday) { 100 | dayObj.isAfterToday = true; 101 | } 102 | if (i === 0 || i === 6) { 103 | dayObj.isHoliday = true; 104 | } 105 | week.push(dayObj); 106 | calcDate = calcDate.add(1, 'day'); 107 | } else { 108 | if ( 109 | selectedStartDate && 110 | selectedEndDate && 111 | selectedStartDate < selectedStartDate && 112 | selectedEndDate >= selectedStartDate 113 | ) { 114 | dayObj.type = 'between'; 115 | } 116 | week.push(dayObj); 117 | } 118 | } 119 | month.push(week); 120 | } while (calcDate.month() == targetMonth); 121 | 122 | return month; 123 | } 124 | -------------------------------------------------------------------------------- /example/src/utils/locale.ts: -------------------------------------------------------------------------------- 1 | export interface LOCALE_TYPE { 2 | monthNames: string[]; 3 | dayNames: string[]; 4 | today: string; 5 | year: string; 6 | } 7 | 8 | export const LOCALE = { 9 | monthNames: [ 10 | "January", 11 | "February", 12 | "March", 13 | "April", 14 | "May", 15 | "June", 16 | "July", 17 | "August", 18 | "September", 19 | "October", 20 | "November", 21 | "December", 22 | ], 23 | dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], 24 | today: "Today", 25 | year: "", 26 | 27 | // monthNames: [ 28 | // '1월', 29 | // '2월', 30 | // '3월', 31 | // '4월', 32 | // '5월', 33 | // '6월', 34 | // '7월', 35 | // '8월', 36 | // '9월', 37 | // '10월', 38 | // '11월', 39 | // '12월', 40 | // ], 41 | // dayNames: ['일', '월', '화', '수', '목', '금', '토'], 42 | // today: '오늘', 43 | // year: '년', 44 | }; 45 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "noImplicitAny": true 4 | }, 5 | "extends": "@tsconfig/react-native/tsconfig.json" 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-calendar-range-picker", 3 | "version": "1.6.0", 4 | "description": "A Simple React Native calendar picker.", 5 | "main": "dist/index.js", 6 | "types": "dist/index.d.ts", 7 | "keywords": [ 8 | "react-native", 9 | "react", 10 | "calendar", 11 | "range", 12 | "picker", 13 | "javascript" 14 | ], 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/huurray/react-native-calendar-range-picker.git" 18 | }, 19 | "author": "JunHyeok Heo ", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/huurray/react-native-calendar-range-picker/issues" 23 | }, 24 | "homepage": "https://github.com/huurray/react-native-calendar-range-picker#readme", 25 | "scripts": { 26 | "test": "echo \"Error: no test specified\" && exit 1", 27 | "build": "rm -rf dist && tsc" 28 | }, 29 | "peerDependencies": { 30 | "react": "*", 31 | "react-native": "*" 32 | }, 33 | "dependencies": { 34 | "dayjs": "^1.11.10", 35 | "react": "*", 36 | "react-native": "*" 37 | }, 38 | "devDependencies": { 39 | "@types/react": "*", 40 | "@types/react-native": "*", 41 | "typescript": "4.0.3" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/CalendarList.tsx: -------------------------------------------------------------------------------- 1 | import React, {useMemo, useCallback} from 'react'; 2 | import dayjs from 'dayjs'; 3 | import {FlatList, View, ActivityIndicator, FlatListProps} from 'react-native'; 4 | // components 5 | import Month from './Month'; 6 | // data 7 | import {getMonths} from './utils/data'; 8 | // types 9 | import {Month_Type} from './utils/data'; 10 | import {LOCALE_TYPE} from './utils/locale'; 11 | import {Style} from './index'; 12 | 13 | interface Props { 14 | pastYearRange: number; 15 | futureYearRange: number; 16 | initialNumToRender: number; 17 | locale: LOCALE_TYPE; 18 | handlePress: (date: string) => void; 19 | startDate: string | null; 20 | endDate: string | null; 21 | style?: Style; 22 | flatListProps?: FlatListProps; 23 | isMonthFirst?: boolean; 24 | disabledBeforeToday?: boolean; 25 | disabledAfterToday?: boolean; 26 | } 27 | 28 | const LAYOUT_HEIGHT = 370; 29 | const CalendarList = ({ 30 | pastYearRange, 31 | futureYearRange, 32 | initialNumToRender, 33 | locale, 34 | handlePress, 35 | startDate, 36 | endDate, 37 | flatListProps, 38 | isMonthFirst, 39 | disabledBeforeToday, 40 | disabledAfterToday, 41 | style, 42 | }: Props) => { 43 | const months: Month_Type[] = useMemo( 44 | () => getMonths(pastYearRange, futureYearRange), 45 | [pastYearRange, futureYearRange], 46 | ); 47 | 48 | const getInitialIndex = useCallback(() => { 49 | return months.findIndex((month: Month_Type) => { 50 | const targetDate = startDate ? dayjs(startDate) : dayjs(); 51 | return month.id === targetDate.format('YYYY-MM'); 52 | }); 53 | }, []); 54 | 55 | const handleRenderItem = useCallback( 56 | ({item}: {item: Month_Type}) => ( 57 | 62 | 73 | 74 | ), 75 | [locale.today, startDate, endDate], 76 | ); 77 | 78 | return ( 79 | 84 | 94 | 95 | 96 | item.id} 98 | data={months} 99 | renderItem={handleRenderItem} 100 | getItemLayout={(_, index) => ({ 101 | length: LAYOUT_HEIGHT, 102 | offset: LAYOUT_HEIGHT * index, 103 | index, 104 | })} 105 | initialScrollIndex={getInitialIndex()} 106 | initialNumToRender={initialNumToRender} 107 | {...flatListProps} 108 | /> 109 | 110 | ); 111 | }; 112 | 113 | export default CalendarList; 114 | -------------------------------------------------------------------------------- /src/Day.tsx: -------------------------------------------------------------------------------- 1 | import React, {memo} from 'react'; 2 | import {View, Text, StyleProp, ViewStyle} from 'react-native'; 3 | import dayjs from 'dayjs'; 4 | // types 5 | import {LOCALE_TYPE} from './utils/locale'; 6 | import {Day_Type} from './utils/data'; 7 | import {Style} from './index'; 8 | 9 | interface Props { 10 | day: Day_Type; 11 | locale: LOCALE_TYPE; 12 | disabledBeforeToday?: boolean; 13 | disabledAfterToday?: boolean; 14 | style?: Style; 15 | } 16 | 17 | function Day({ 18 | day, 19 | locale, 20 | disabledBeforeToday, 21 | disabledAfterToday, 22 | style, 23 | }: Props) { 24 | const {date, type, isHoliday, isToday, isBeforeToday, isAfterToday} = day; 25 | 26 | const dayTextColor = style?.dayTextColor || '#1d1c1d'; 27 | const holidayColor = style?.holidayColor || '#f26522'; 28 | const todayColor = style?.todayColor || '#1692e4'; 29 | const selectedDayTextColor = style?.selectedDayTextColor || '#fff'; 30 | const disabledTextColor = style?.disabledTextColor || '#ccc'; 31 | const selectedDayBackgroundColor = 32 | style?.selectedDayBackgroundColor || '#83bc44'; 33 | const selectedBetweenDayTextColor = 34 | style?.selectedBetweenDayTextColor || '#1d1c1d'; 35 | const selectedBetweenDayBackgroundTextColor = 36 | style?.selectedBetweenDayBackgroundTextColor || '#F2F2F2'; 37 | 38 | let markStyle: StyleProp = { 39 | width: 30, 40 | height: 30, 41 | justifyContent: 'center', 42 | alignItems: 'center', 43 | }; 44 | let betweenStyle: StyleProp = { 45 | width: '50%', 46 | height: 30, 47 | position: 'absolute', 48 | backgroundColor: selectedBetweenDayBackgroundTextColor, 49 | }; 50 | let dayStyle = { 51 | color: 52 | (disabledBeforeToday && isBeforeToday) || 53 | (disabledAfterToday && isAfterToday) 54 | ? disabledTextColor 55 | : isToday 56 | ? todayColor 57 | : isHoliday 58 | ? holidayColor 59 | : dayTextColor, 60 | }; 61 | 62 | switch (type) { 63 | case 'single': 64 | markStyle = { 65 | ...markStyle, 66 | backgroundColor: selectedDayBackgroundColor, 67 | borderRadius: 15, 68 | }; 69 | dayStyle = {color: selectedDayTextColor}; 70 | break; 71 | case 'start': 72 | markStyle = { 73 | ...markStyle, 74 | backgroundColor: selectedDayBackgroundColor, 75 | borderRadius: 15, 76 | }; 77 | dayStyle = {color: selectedDayTextColor}; 78 | break; 79 | case 'end': 80 | markStyle = { 81 | ...markStyle, 82 | backgroundColor: selectedDayBackgroundColor, 83 | borderRadius: 15, 84 | }; 85 | dayStyle = {color: selectedDayTextColor}; 86 | break; 87 | case 'between': 88 | markStyle = { 89 | ...markStyle, 90 | backgroundColor: selectedBetweenDayBackgroundTextColor, 91 | width: '101%', 92 | }; 93 | dayStyle = { 94 | color: isToday 95 | ? todayColor 96 | : isHoliday 97 | ? holidayColor 98 | : selectedBetweenDayTextColor, 99 | }; 100 | 101 | break; 102 | 103 | default: 104 | break; 105 | } 106 | 107 | return ( 108 | <> 109 | {type === 'end' ? : null} 110 | {type === 'start' ? : null} 111 | {date ? ( 112 | 113 | 114 | {dayjs(date).date()} 115 | 116 | 117 | ) : null} 118 | {isToday ? ( 119 | 120 | {locale.today} 121 | 122 | ) : null} 123 | 124 | ); 125 | } 126 | 127 | function areEqual(prevProps: Props, nextProps: Props) { 128 | if (prevProps.day.type === nextProps.day.type) return true; 129 | return false; 130 | } 131 | 132 | export default memo(Day, areEqual); 133 | -------------------------------------------------------------------------------- /src/Month.tsx: -------------------------------------------------------------------------------- 1 | import React, {memo} from 'react'; 2 | import {StyleSheet, View, Text} from 'react-native'; 3 | import dayjs from 'dayjs'; 4 | // components 5 | import Week from './Week'; 6 | // types 7 | import {getWeeks, Month_Type, Week_Type} from './utils/data'; 8 | import {LOCALE_TYPE} from './utils/locale'; 9 | import {Style} from './index'; 10 | 11 | interface Props { 12 | item: Month_Type; 13 | locale: LOCALE_TYPE; 14 | handlePress: (date: string) => void; 15 | startDate: string | null; 16 | endDate: string | null; 17 | isMonthFirst?: boolean; 18 | disabledBeforeToday?: boolean; 19 | disabledAfterToday?: boolean; 20 | style?: Style; 21 | } 22 | 23 | const PADDING_HORIZONTAL = 10; 24 | function Month({ 25 | item, 26 | locale, 27 | handlePress, 28 | startDate, 29 | endDate, 30 | isMonthFirst, 31 | disabledBeforeToday, 32 | disabledAfterToday, 33 | style, 34 | }: Props) { 35 | const {year, month} = item; 36 | 37 | const renderDayNames = () => { 38 | const result = []; 39 | const dayNames = locale.dayNames; 40 | 41 | for (let i = 0; i < dayNames.length; i++) { 42 | result.push( 43 | 44 | 45 | {dayNames[i]} 46 | 47 | , 48 | ); 49 | } 50 | return result; 51 | }; 52 | 53 | const renderWeeks = () => { 54 | const result = []; 55 | const weeks: Week_Type[] = getWeeks(item.id, startDate, endDate); 56 | const is6Weeks = weeks.length > 5; 57 | 58 | for (let i = 0; i < weeks.length; i++) { 59 | result.push( 60 | , 70 | ); 71 | } 72 | return result; 73 | }; 74 | 75 | return ( 76 | 77 | 78 | 79 | {isMonthFirst ? {locale.monthNames[month - 1]} : null} 80 | {year} 81 | {locale.year} 82 | {!isMonthFirst ? {locale.monthNames[month - 1]} : null} 83 | 84 | 85 | {renderDayNames()} 86 | {renderWeeks()} 87 | 88 | ); 89 | } 90 | 91 | function areEqual(prevProps: Props, nextProps: Props) { 92 | const newId = nextProps.item.id; 93 | if ( 94 | nextProps.startDate && 95 | dayjs(nextProps.startDate).format('YYYY-MM') === newId 96 | ) { 97 | return false; 98 | } 99 | 100 | if ( 101 | nextProps.endDate && 102 | dayjs(nextProps.endDate).format('YYYY-MM') === newId 103 | ) { 104 | return false; 105 | } 106 | 107 | if ( 108 | prevProps.startDate && 109 | dayjs(prevProps.startDate).format('YYYY-MM') === newId 110 | ) { 111 | return false; 112 | } 113 | 114 | if ( 115 | prevProps.endDate && 116 | dayjs(prevProps.endDate).format('YYYY-MM') === newId 117 | ) { 118 | return false; 119 | } 120 | 121 | if ( 122 | nextProps.startDate && 123 | nextProps.endDate && 124 | dayjs(nextProps.startDate).format('YYYYMM') < 125 | dayjs(newId).format('YYYYMM') && 126 | dayjs(nextProps.endDate).format('YYYYMM') > dayjs(newId).format('YYYYMM') 127 | ) { 128 | return false; 129 | } 130 | 131 | if ( 132 | prevProps.endDate && 133 | prevProps.startDate && 134 | dayjs(prevProps.startDate).format('YYYYMM') < 135 | dayjs(newId).format('YYYYMM') && 136 | dayjs(prevProps.endDate).format('YYYYMM') > dayjs(newId).format('YYYYMM') 137 | ) { 138 | return false; 139 | } 140 | 141 | if ( 142 | prevProps.locale && 143 | nextProps.locale && 144 | prevProps.locale.today !== nextProps.locale.today 145 | ) { 146 | return false; 147 | } 148 | 149 | return true; 150 | } 151 | 152 | export default memo(Month, areEqual); 153 | 154 | const styles = StyleSheet.create({ 155 | monthContainer: { 156 | paddingTop: 20, 157 | paddingHorizontal: PADDING_HORIZONTAL, 158 | backgroundColor: '#fff', 159 | }, 160 | monthNameContainer: { 161 | flexDirection: 'row', 162 | alignItems: 'center', 163 | height: 30, 164 | paddingLeft: 16, 165 | }, 166 | monthName: { 167 | fontSize: 16, 168 | }, 169 | dayNamesContainer: { 170 | height: 50, 171 | flexDirection: 'row', 172 | alignItems: 'center', 173 | }, 174 | dayNameContainer: { 175 | flex: 1, 176 | justifyContent: 'center', 177 | alignItems: 'center', 178 | }, 179 | dayName: { 180 | fontSize: 15, 181 | color: '#bababe', 182 | }, 183 | dayContainer: { 184 | flexDirection: 'row', 185 | flexWrap: 'wrap', 186 | }, 187 | }); 188 | -------------------------------------------------------------------------------- /src/Week.tsx: -------------------------------------------------------------------------------- 1 | import React, { memo } from "react"; 2 | import { View, StyleSheet, TouchableOpacity } from "react-native"; 3 | // components 4 | import Day from "./Day"; 5 | // types 6 | import { LOCALE_TYPE } from "./utils/locale"; 7 | import { Week_Type } from "./utils/data"; 8 | import { Style } from "./index"; 9 | 10 | interface Props { 11 | week: Week_Type; 12 | locale: LOCALE_TYPE; 13 | handlePress: (date: string) => void; 14 | is6Weeks: boolean; 15 | disabledBeforeToday?: boolean; 16 | disabledAfterToday?: boolean; 17 | style?: Style; 18 | } 19 | 20 | function Week({ 21 | week, 22 | locale, 23 | handlePress, 24 | is6Weeks, 25 | disabledBeforeToday, 26 | disabledAfterToday, 27 | style, 28 | }: Props) { 29 | const renderDayNames = () => { 30 | const result = []; 31 | for (let i = 0; i < 7; i++) { 32 | const day = week[i]; 33 | const DayComponent = day.date ? ( 34 | handlePress(day.date || "")} 44 | activeOpacity={1} 45 | key={day.date || i} 46 | > 47 | 54 | 55 | ) : ( 56 | 57 | ); 58 | result.push(DayComponent); 59 | } 60 | return result; 61 | }; 62 | 63 | return {renderDayNames()}; 64 | } 65 | 66 | function areEqual(prevProps: Props, nextProps: Props) { 67 | if (JSON.stringify(prevProps.week) === JSON.stringify(nextProps.week)) return true; 68 | return false; 69 | } 70 | 71 | export default memo(Week, areEqual); 72 | 73 | const styles = StyleSheet.create({ 74 | weekContainer: { 75 | flexDirection: "row", 76 | alignItems: "center", 77 | }, 78 | }); 79 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState, useRef} from 'react'; 2 | import dayjs from 'dayjs'; 3 | // components 4 | import CalendarList from './CalendarList'; 5 | // data 6 | import {LOCALE, LOCALE_TYPE} from './utils/locale'; 7 | 8 | export interface Style { 9 | container?: {}; 10 | monthContainer?: {}; 11 | monthOverlayContainer?: {}; 12 | weekContainer?: {}; 13 | monthNameText?: {}; 14 | dayNameText?: {}; 15 | dayText?: {}; 16 | dayTextColor?: string; 17 | holidayColor?: string; 18 | todayColor?: string; 19 | disabledTextColor?: string; 20 | selectedDayTextColor?: string; 21 | selectedDayBackgroundColor?: string; 22 | selectedBetweenDayTextColor?: string; 23 | selectedBetweenDayBackgroundTextColor?: string; 24 | } 25 | interface onChangeParams { 26 | startDate: string | null; 27 | endDate: string | null; 28 | } 29 | 30 | interface Props { 31 | pastYearRange?: number; 32 | futureYearRange?: number; 33 | locale?: LOCALE_TYPE; 34 | startDate?: string; 35 | endDate?: string; 36 | onChange: (params: onChangeParams | any) => void; 37 | style?: Style; 38 | singleSelectMode?: boolean; 39 | initialNumToRender?: number; 40 | flatListProps?: any; 41 | isMonthFirst?: boolean; 42 | disabledBeforeToday?: boolean; 43 | disabledAfterToday?: boolean; 44 | } 45 | 46 | export default function Index({ 47 | pastYearRange = 1, 48 | futureYearRange = 2, 49 | initialNumToRender = 7, 50 | locale = LOCALE, 51 | startDate: prevStartDate, 52 | endDate: prevEndDate, 53 | onChange, 54 | style, 55 | singleSelectMode, 56 | flatListProps, 57 | isMonthFirst, 58 | disabledBeforeToday, 59 | disabledAfterToday, 60 | }: Props) { 61 | const [startDate, setStartDate] = useState( 62 | prevStartDate ? prevStartDate : null, 63 | ); 64 | const [endDate, setEndDate] = useState(prevEndDate ? prevEndDate : null); 65 | const startDateRef = useRef(null); 66 | const endDateRef = useRef(null); 67 | 68 | const handleSetStartDate = (startDate: string) => { 69 | setStartDate(startDate); 70 | setEndDate(null); 71 | startDateRef.current = startDate; 72 | endDateRef.current = null; 73 | if (singleSelectMode) { 74 | onChange(startDate); 75 | } else { 76 | onChange({startDate, endDate: null}); 77 | } 78 | }; 79 | 80 | const handleSetEndDate = (startDate: string, endDate: string) => { 81 | setEndDate(endDate); 82 | endDateRef.current = endDate; 83 | onChange({startDate, endDate}); 84 | }; 85 | 86 | const handlePress = (date: string) => { 87 | if (singleSelectMode) { 88 | handleSetStartDate(date); 89 | return; 90 | } 91 | 92 | if (!startDateRef.current && !endDateRef.current) { 93 | handleSetStartDate(date); 94 | return; 95 | } 96 | 97 | if (startDateRef.current && endDateRef.current) { 98 | handleSetStartDate(date); 99 | return; 100 | } 101 | 102 | if (startDateRef.current) { 103 | if (dayjs(date).isBefore(startDateRef.current)) { 104 | handleSetStartDate(date); 105 | } else { 106 | handleSetEndDate(startDateRef.current, date); 107 | } 108 | } 109 | }; 110 | 111 | return ( 112 | 126 | ); 127 | } 128 | -------------------------------------------------------------------------------- /src/utils/data.ts: -------------------------------------------------------------------------------- 1 | import dayjs from 'dayjs'; 2 | 3 | export interface Day_Type { 4 | type: 'single' | 'start' | 'end' | 'between' | null; 5 | date: string | null; 6 | isToday: boolean; 7 | isBeforeToday: boolean; 8 | isAfterToday: boolean; 9 | isHoliday: boolean; 10 | } 11 | 12 | export type Week_Type = Day_Type[]; 13 | export interface Month_Type { 14 | id: string; 15 | year: number; 16 | month: number; 17 | } 18 | 19 | export function getMonths(pastYearRange: number, futureYearRange: number) { 20 | const currentYear = dayjs().year(); 21 | const startYear = currentYear - pastYearRange; 22 | const endYear = currentYear + futureYearRange; 23 | 24 | const months: Month_Type[] = []; 25 | for (let i = 0; i < endYear - startYear; i++) { 26 | const year = startYear + i; 27 | for (let j = 1; j <= 12; j++) { 28 | let id = ''; 29 | id = `${year}-${j <= 9 ? '0' : ''}${j}`; 30 | months.push({ 31 | id, 32 | year, 33 | month: j, 34 | }); 35 | } 36 | } 37 | return months; 38 | } 39 | 40 | export function getWeeks( 41 | date: string, 42 | selectedStartDate?: string | null, 43 | selectedEndDate?: string | null, 44 | ) { 45 | const DATE_FORMAT = 'YYYY-MM-DD'; 46 | const today = dayjs().format(DATE_FORMAT); 47 | const targetMonth = dayjs(date).month(); 48 | 49 | const month: Week_Type[] = []; 50 | let calcDate = dayjs(date).startOf('month'); 51 | 52 | do { 53 | let week: Week_Type = []; 54 | for (let i = 0; i < 7; i++) { 55 | let dayObj: Day_Type = { 56 | type: null, 57 | date: null, 58 | isToday: false, 59 | isBeforeToday: false, 60 | isAfterToday: false, 61 | isHoliday: false, 62 | }; 63 | const formattedCalcDate = calcDate.format(DATE_FORMAT); 64 | if (i == calcDate.day() && calcDate.month() == targetMonth) { 65 | if (selectedStartDate && selectedStartDate === formattedCalcDate) { 66 | if (!selectedEndDate) { 67 | dayObj.type = 'single'; 68 | } else { 69 | dayObj.type = 'start'; 70 | } 71 | } 72 | 73 | if (selectedEndDate && selectedEndDate == formattedCalcDate) { 74 | if (selectedStartDate === selectedEndDate) { 75 | dayObj.type = 'single'; 76 | } else { 77 | dayObj.type = 'end'; 78 | } 79 | } 80 | if ( 81 | selectedStartDate && 82 | selectedStartDate < formattedCalcDate && 83 | selectedEndDate && 84 | selectedEndDate > formattedCalcDate 85 | ) { 86 | dayObj.type = 'between'; 87 | } 88 | 89 | const date = calcDate.clone().format(DATE_FORMAT); 90 | const passedDayFromToday = calcDate.diff(dayjs(), 'day') < 0; 91 | const futureDayFromToday = calcDate.diff(dayjs(), 'hours') > 0; 92 | dayObj.date = date; 93 | if (date === today) { 94 | dayObj.isToday = true; 95 | } 96 | if (passedDayFromToday) { 97 | dayObj.isBeforeToday = true; 98 | } 99 | if (futureDayFromToday) { 100 | dayObj.isAfterToday = true; 101 | } 102 | if (i === 0 || i === 6) { 103 | dayObj.isHoliday = true; 104 | } 105 | week.push(dayObj); 106 | calcDate = calcDate.add(1, 'day'); 107 | } else { 108 | if ( 109 | selectedStartDate && 110 | selectedEndDate && 111 | selectedStartDate < selectedStartDate && 112 | selectedEndDate >= selectedStartDate 113 | ) { 114 | dayObj.type = 'between'; 115 | } 116 | week.push(dayObj); 117 | } 118 | } 119 | month.push(week); 120 | } while (calcDate.month() == targetMonth); 121 | 122 | return month; 123 | } 124 | -------------------------------------------------------------------------------- /src/utils/locale.ts: -------------------------------------------------------------------------------- 1 | export interface LOCALE_TYPE { 2 | monthNames: string[]; 3 | dayNames: string[]; 4 | today: string; 5 | year: string; 6 | } 7 | 8 | export const LOCALE = { 9 | monthNames: [ 10 | "January", 11 | "February", 12 | "March", 13 | "April", 14 | "May", 15 | "June", 16 | "July", 17 | "August", 18 | "September", 19 | "October", 20 | "November", 21 | "December", 22 | ], 23 | dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], 24 | today: "Today", 25 | year: "", 26 | 27 | // monthNames: [ 28 | // '1월', 29 | // '2월', 30 | // '3월', 31 | // '4월', 32 | // '5월', 33 | // '6월', 34 | // '7월', 35 | // '8월', 36 | // '9월', 37 | // '10월', 38 | // '11월', 39 | // '12월', 40 | // ], 41 | // dayNames: ['일', '월', '화', '수', '목', '금', '토'], 42 | // today: '오늘', 43 | // year: '년', 44 | }; 45 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "target": "es5", 5 | "lib": ["es6", "dom", "es2016", "es2017"], 6 | "sourceMap": true, 7 | "allowJs": false, 8 | "jsx": "react-native", 9 | "declaration": true, 10 | "declarationMap": true, 11 | "moduleResolution": "node", 12 | "forceConsistentCasingInFileNames": true, 13 | "noImplicitReturns": true, 14 | "noImplicitThis": true, 15 | "noImplicitAny": true, 16 | "strictNullChecks": true, 17 | "noUnusedLocals": true, 18 | "outDir": "dist", 19 | "skipLibCheck": true, 20 | "allowSyntheticDefaultImports": true, 21 | "removeComments": true 22 | }, 23 | "include": ["src"], 24 | "exclude": ["node_modules", "example", "dist"] 25 | } 26 | --------------------------------------------------------------------------------