diff --git a/example/App.js b/example/App.js
index 1565c0f..845c404 100644
--- a/example/App.js
+++ b/example/App.js
@@ -4,22 +4,7 @@ import SearchInput, { createFilter } from 'react-native-search-filter';
import DeviceInfo from 'react-native-device-info';
import DatePicker from 'react-native-date-picker-x';
import locales from './locales';
-import MinimalExample from './MinimalExample';
-import ExtendedExample from './ExtendedExample';
-
-const MINIMAL_EXAMPLE = 'MINIMAL_EXAMPLE';
-const EXTENDED_EXAMPLE = 'EXTENDED_EXAMPLE';
-
-const examples = {
- [MINIMAL_EXAMPLE]: {
- buttonTitle: 'Show minimal example',
- component:
- },
- [EXTENDED_EXAMPLE]: {
- buttonTitle: 'Show extended example',
- component:
- }
-}
+import examples from './examples';
export default class App extends Component {
@@ -28,6 +13,7 @@ export default class App extends Component {
render() {
return (
+ Examples
{!this.state.picker && this.renderButtons()}
{!!this.state.picker && this.renderBackButton()}
{!!this.state.picker && this.renderPicker()}
@@ -67,12 +53,16 @@ const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
- // justifyContent: 'center',
backgroundColor: 'white',
marginTop: 15,
},
text: {
color: 'dodgerblue',
fontSize: 16,
+ },
+ header: {
+ color: 'black',
+ fontSize: 22,
+ margin: 20,
}
})
diff --git a/example/exampleKeys.js b/example/exampleKeys.js
new file mode 100644
index 0000000..86580e6
--- /dev/null
+++ b/example/exampleKeys.js
@@ -0,0 +1,5 @@
+export const EXAMPLE_KEYS = {
+ MINIMAL : 'MINIMAL',
+ ADVANCED : 'ADVANCED',
+ TIME_MODE : 'TIME_MODE',
+}
\ No newline at end of file
diff --git a/example/examples.js b/example/examples.js
new file mode 100644
index 0000000..4efa8be
--- /dev/null
+++ b/example/examples.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react'
+import Minimal from './examples/Minimal'
+import Advanced from './examples/Advanced'
+import TimeMode from './examples/TimeMode'
+import { EXAMPLE_KEYS } from './exampleKeys'
+
+export default {
+ [EXAMPLE_KEYS.MINIMAL]: {
+ buttonTitle: 'Minimal',
+ component:
+ },
+ [EXAMPLE_KEYS.ADVANCED]: {
+ buttonTitle: 'Advanced',
+ component:
+ },
+ [EXAMPLE_KEYS.TIME_MODE]: {
+ buttonTitle: 'Time mode',
+ component:
+ }
+}
diff --git a/example/ExtendedExample.js b/example/examples/Advanced.js
similarity index 93%
rename from example/ExtendedExample.js
rename to example/examples/Advanced.js
index 892e5bf..e3b1d4d 100644
--- a/example/ExtendedExample.js
+++ b/example/examples/Advanced.js
@@ -3,7 +3,7 @@ import { Button, View, StyleSheet, ScrollView, Text, TouchableOpacity } from 're
import SearchInput, { createFilter } from 'react-native-search-filter';
import DeviceInfo from 'react-native-device-info';
import DatePicker from 'react-native-date-picker-x';
-import locales from './locales';
+import locales from '../locales';
Date.prototype.addHours = function(h) {
this.setTime(this.getTime() + (h*60*60*1000));
@@ -12,18 +12,12 @@ Date.prototype.addHours = function(h) {
export default class App extends Component {
- searchUpdated(term) {
- this.setState({ searchTerm: term })
- }
-
state = {
chosenDate: new Date(),
searchTerm: '',
locale: DeviceInfo.getDeviceLocale(),
}
- setDate = (newDate) => this.setState({ chosenDate: newDate })
-
render() {
const result = locales.filter(createFilter(this.state.searchTerm)).slice(0, 5);
@@ -48,7 +42,7 @@ export default class App extends Component {
})} />
{ this.searchUpdated(term) }}
+ onChangeText={this.searchUpdated}
style={styles.searchInput}
placeholder="Change locale"
/>
@@ -64,6 +58,8 @@ export default class App extends Component {
);
}
+ setDate = (newDate) => this.setState({ chosenDate: newDate })
+ searchUpdated = (term) => this.setState({ searchTerm: term })
}
diff --git a/example/MinimalExample.js b/example/examples/Minimal.js
similarity index 82%
rename from example/MinimalExample.js
rename to example/examples/Minimal.js
index 873f412..fd93bbb 100644
--- a/example/MinimalExample.js
+++ b/example/examples/Minimal.js
@@ -8,7 +8,7 @@ export default class MinimalExample extends Component {
render = () =>
this.setState({ date })}
+ onDateChange={date => this.setState({ date })}
/>
}
diff --git a/example/examples/TimeMode.js b/example/examples/TimeMode.js
new file mode 100644
index 0000000..c07315d
--- /dev/null
+++ b/example/examples/TimeMode.js
@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import DatePicker from 'react-native-date-picker-x';
+
+export default class TimeMode extends Component {
+
+ state = { date: new Date() }
+
+ render = () =>
+ this.setState({ date })}
+ mode={'time'}
+ />
+
+}
diff --git a/example/index.js b/example/index.js
index d390dbb..bd7c799 100644
--- a/example/index.js
+++ b/example/index.js
@@ -1,5 +1,4 @@
-import { AppRegistry } from 'react-native';
-import App from './App';
-import MinimalExample from './MinimalExample';
+import { AppRegistry } from 'react-native'
+import App from './App'
-AppRegistry.registerComponent('DatePickerExample', () => App);
+AppRegistry.registerComponent('DatePickerExample', () => App)
diff --git a/example/package.json b/example/package.json
index d00475b..a4036f4 100644
--- a/example/package.json
+++ b/example/package.json
@@ -10,10 +10,10 @@
"moment": "^2.22.1",
"react": "16.3.1",
"react-native": "0.55.2",
- "react-native-date-picker-x": "^1.0.6",
+ "react-native-date-picker-x": "^1.3.0",
"react-native-device-info": "^0.21.5",
"react-native-search-filter": "^0.1.3"
- },
+ },
"devDependencies": {
"babel-jest": "22.4.3",
"babel-preset-react-native": "4.0.0",