Improved examples.

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: <MinimalExample />
-  },
-  [EXTENDED_EXAMPLE]: {
-    buttonTitle: 'Show extended example',
-    component: <ExtendedExample />
-  }
-}
+import examples from './examples';
 
 export default class App extends Component {
 
@@ -28,6 +13,7 @@ export default class App extends Component {
   render() {
     return (
       <View style={styles.container}>
+        <Text style={styles.header}>Examples</Text>
         {!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,
   }
 })

example/exampleKeys.js

@@ -0,0 +1,5 @@
+export const EXAMPLE_KEYS = {
+    MINIMAL : 'MINIMAL',
+    ADVANCED : 'ADVANCED',
+    TIME_MODE : 'TIME_MODE',
+}

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: <Minimal />
+    },
+    [EXAMPLE_KEYS.ADVANCED]: {
+        buttonTitle: 'Advanced',
+        component: <Advanced />
+    },
+    [EXAMPLE_KEYS.TIME_MODE]: {
+        buttonTitle: 'Time mode',
+        component: <TimeMode />
+    }
+}

example/ExtendedExample.js → 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 {
           })} />
 
         <SearchInput
-          onChangeText={(term) => { this.searchUpdated(term) }}
+          onChangeText={this.searchUpdated}
           style={styles.searchInput}
           placeholder="Change locale"
         />
@@ -64,6 +58,8 @@ export default class App extends Component {
       </View>
     );
   }
+  setDate = (newDate) => this.setState({ chosenDate: newDate })
+  searchUpdated = (term) => this.setState({ searchTerm: term })
 
 }
 

example/MinimalExample.js → example/examples/Minimal.js

@@ -8,7 +8,7 @@ export default class MinimalExample extends Component {
   render = () =>
     <DatePicker
       date={this.state.date}
-      onDateChange={date => this.setState({ date })}
+      onDateChange={date => this.setState({ date })} 
     />
 
 }

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 = () =>
+    <DatePicker
+      date={this.state.date}
+      onDateChange={date => this.setState({ date })}
+      mode={'time'}
+    />
+
+}

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)

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",