Register CustomDatePickerIOS

pinguinjkeke · Feb 4, 2018 · 7708399 · 7708399
1 parent 1ad55a0
commit 7708399
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 8 deletions.
diff --git a/Demo/App.js b/Demo/App.js
@@ -1,6 +1,9 @@
 import React, { Component } from 'react';
 import { ScrollView, StyleSheet, Text, View } from 'react-native';
-import { DatePicker, Picker } from 'react-native-wheel-datepicker';
+import { Picker, registerCustomDatePickerIOS } from 'react-native-wheel-datepicker';
+import CustomDatePickerIOS from 'react-native-custom-datepicker-ios';
+
+const DatePicker = registerCustomDatePickerIOS(CustomDatePickerIOS);
 
 const styles = StyleSheet.create({
   container: {
@@ -21,7 +24,11 @@ const styles = StyleSheet.create({
 });
 
 export default class App extends Component {
-  state = {};
+  state = {
+    firstDate: new Date(),
+    secondDate: new Date(),
+    thirdDate: new Date(),
+  };
 
   render() {
     return (
@@ -32,17 +39,20 @@ export default class App extends Component {
               current date: {this.state.date && this.state.date.toJSON()}
             </Text>
             <DatePicker
+              date={this.state.firstDate}
               mode="date"
               textSize={36}
               textColor='red'
               onDateChange={date => this.setState({ date })}
+              style={{ width: '100%' }}
             />
 
             <View style={styles.separator} />
             <Text style={styles.text__info}>
               current time: {this.state.time && this.state.time.toJSON()}
             </Text>
             <DatePicker
+              date={this.state.secondDate}
               mode="time"
               onDateChange={time => this.setState({ time })}
             />
@@ -53,6 +63,7 @@ export default class App extends Component {
               current datetime: {this.state.datetime && this.state.datetime.toJSON()}
             </Text>
             <DatePicker
+              date={this.state.thirdDate}
               mode="datetime"
               onDateChange={datetime => this.setState({ datetime })}
               labelUnit={{ year: 'Y', month: 'M', date: 'D' }}

diff --git a/Demo/package.json b/Demo/package.json
@@ -14,7 +14,8 @@
 		"prop-types": "^15.6.0",
 		"react": "16.0.0-beta.5",
 		"react-native": "0.49.3",
-		"react-native-wheel-datepicker": "../"
+		"react-native-wheel-datepicker": "../",
+		"react-native-custom-datepicker-ios": "^0.0.2"
 	},
 	"devDependencies": {
 		"babel-jest": "21.2.0",

diff --git a/Demo/yarn.lock b/Demo/yarn.lock
@@ -3371,8 +3371,12 @@ react-devtools-core@^2.5.0:
     shell-quote "^1.6.1"
     ws "^2.0.3"
 
+react-native-custom-datepicker-ios@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/react-native-custom-datepicker-ios/-/react-native-custom-datepicker-ios-0.0.2.tgz#582276eeebfb80dbbd839e7faef50e0d15a7e114"
+
 react-native-wheel-datepicker@../:
-  version "2.1.5"
+  version "2.1.10"
   dependencies:
     moment "^2.19.1"
 

diff --git a/README.md b/README.md
@@ -41,6 +41,45 @@ Configration:
 react-native link react-native-wheel-datepicker
 ```
 
+## Ingegration with CustomDatePickerIOS
+
+By default, package provides default DatePickerIOS on the iOS side to simplify usage on both platforms.
+
+You can install [react-native-custom-datepicker-ios](https://github.com/pinguinjkeke/react-native-wheel-datepicker) package
+if you need textColor functionality on IOS platform.
+
+Just install:
+```
+npm i react-native-custom-datepicker-ios
+// or
+yarn add react-native-custom-datepicker-ios
+```
+link dependencies:
+```
+react-native link react-native-custom-datepicker-ios
+```
+And register CustomDatePickerIOS inside react-native-wheel-datepicker package.
+```js
+import { registerCustomDatePickerIOS } from 'react-native-wheel-datepicker';
+import CustomDatePickerIOS from 'react-native-custom-datepicker-ios';
+
+registerCustomDatePickerIOS(CustomDatePickerIOS);
+```
+Then you can use textColored components for both platforms inside render function!
+```jsx
+import { DatePicker } from 'react-native-wheel-datepicker';
+
+// ...
+render() {
+  return (
+    <DatePicker
+      mode="date"
+      textColor="green"
+    />
+  )
+}
+```
+
 ## Example code
 
 ```jsx

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-wheel-datepicker",
-  "version": "2.1.10",
+  "version": "2.2.0",
   "description": "React native cross platform iOS-style picker and datepicker.",
   "main": "src/index.js",
   "scripts": {

diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,17 @@
 'use strict';
 
-import Picker from './picker'
-import DatePicker from './date-picker'
+import { Platform } from 'react-native';
+import Picker from './picker';
+import DatePicker from './date-picker';
 
-module.exports = { Picker, DatePicker }
+let DatePickerComponent = DatePicker;
+
+const registerCustomDatePickerIOS = (CustomDatePickerIOS) => {
+  if (Platform.OS === 'ios') {
+    DatePickerComponent = CustomDatePickerIOS;
+  }
+
+  return DatePickerComponent;
+};
+
+module.exports = { Picker, DatePicker: DatePickerComponent, registerCustomDatePickerIOS };