Added minimal example

example/App.js

@@ -1,69 +1,65 @@
 import React, { Component } from 'react';
-import { Button, View, StyleSheet, ScrollView, Text, TouchableOpacity } from 'react-native';
+import { Button, View, StyleSheet, ScrollView, Text, TouchableOpacity, TouchableHighlight } from 'react-native';
 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';
 
-Date.prototype.addHours = function(h) {    
-  this.setTime(this.getTime() + (h*60*60*1000)); 
-  return this;   
-}
-
-export default class App extends Component {
+const MINIMAL_EXAMPLE = 'MINIMAL_EXAMPLE';
+const EXTENDED_EXAMPLE = 'EXTENDED_EXAMPLE';
 
-  searchUpdated(term) {
-    this.setState({ searchTerm: term })
+const examples = {
+  [MINIMAL_EXAMPLE]: {
+    buttonTitle: 'Show minimal example',
+    component: <MinimalExample />
+  },
+  [EXTENDED_EXAMPLE]: {
+    buttonTitle: 'Show extended example',
+    component: <ExtendedExample />
   }
+}
 
-  state = {
-    chosenDate: new Date(),
-    searchTerm: '',
-    locale: DeviceInfo.getDeviceLocale(),
-  }
+export default class App extends Component {
 
-  setDate = (newDate) => this.setState({ chosenDate: newDate })
+  state = { picker: undefined }
 
   render() {
-    const result = locales.filter(createFilter(this.state.searchTerm)).slice(0, 5);    
-
     return (
       <View style={styles.container}>
-        <DatePicker
-          date={this.state.chosenDate}
-          onDateChange={this.setDate}
-          locale={this.state.locale}
-          minuteInterval={1}
-          minimumDate={new Date()}
-          maximumDate={(new Date()).addHours(24*5)}
-        />
+        {!this.state.picker && this.renderButtons()}
+        {!!this.state.picker && this.renderBackButton()}
+        {!!this.state.picker && this.renderPicker()}
+      </View>
+    );
+  }
 
-        <Text>Current locale: {this.state.locale}</Text>
-        <Text>Current date: {this.state.chosenDate.toISOString()}</Text>
-        <Text></Text>
+  renderPicker = () => examples[this.state.picker].component
 
-        <Button title='Change date';
-          onPress={() => this.setState({
-            chosenDate: new Date(this.state.chosenDate.getTime() + 86400000)
-          })} />
+  renderButtons = () =>
+    Object.keys(examples)
+      .filter(key => key !== this.state.picker)
+      .map(this.renderButton)
 
-        <SearchInput
-          onChangeText={(term) => { this.searchUpdated(term) }}
-          style={styles.searchInput}
-          placeholder="Change locale"
-        />
-        <ScrollView>
-          {result.map(locale => (
-            <TouchableOpacity onPress={() => this.setState({ locale })} key={locale} style={styles.item}>
-              <Text>{locale}</Text>
-            </TouchableOpacity>
-          ))
-          }
-        </ScrollView>
+  renderButton = (key) => (
+    <TouchableOpacity
+      key={key}
+      onPress={() => this.setState({ picker: key })}
+      style={{ margin: 10 }}
+    >
+      <Text style={styles.text}>{examples[key].buttonTitle}</Text>
+    </TouchableOpacity>
+  )
 
-      </View>
-    );
-  }
+  renderBackButton = (key) => (
+    <TouchableOpacity
+      onPress={() => this.setState({ picker: undefined })}
+      style={{ margin: 10 }}
+    >
+      <Text style={styles.text}>Back</Text>
+    </TouchableOpacity>
+  )
 
 }
 
@@ -71,25 +67,12 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'center',
+    // justifyContent: 'center',
     backgroundColor: 'white',
     marginTop: 15,
   },
-  item: {
-    borderWidth: 1,
-    marginTop: -1,
-    borderColor: 'rgba(0,0,0,1)',
-    padding: 3,
-    width: 100,
-    alignItems: 'center',
-  },
-  emailSubject: {
-    color: 'rgba(0,0,0,0.5)'
-  },
-  searchInput: {
-    padding: 5,
-    borderColor: '#CCC',
-    borderWidth: 1,
-    width: 100,
+  text: {
+    color: 'dodgerblue',
+    fontSize: 16,
   }
 })

example/ExtendedExample.js

@@ -0,0 +1,95 @@
+import React, { Component } from 'react';
+import { Button, View, StyleSheet, ScrollView, Text, TouchableOpacity } from 'react-native';
+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';
+
+Date.prototype.addHours = function(h) {    
+  this.setTime(this.getTime() + (h*60*60*1000)); 
+  return this;   
+}
+
+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);    
+
+    return (
+      <View style={styles.container}>
+        <DatePicker
+          date={this.state.chosenDate}
+          onDateChange={this.setDate}
+          locale={this.state.locale}
+          minuteInterval={1}
+          minimumDate={new Date()}
+          maximumDate={(new Date()).addHours(24*5)}
+        />
+
+        <Text>Current locale: {this.state.locale}</Text>
+        <Text>Current date: {this.state.chosenDate.toISOString()}</Text>
+        <Text></Text>
+
+        <Button title='Change date'
+          onPress={() => this.setState({
+            chosenDate: new Date(this.state.chosenDate.getTime() + 86400000)
+          })} />
+
+        <SearchInput
+          onChangeText={(term) => { this.searchUpdated(term) }}
+          style={styles.searchInput}
+          placeholder="Change locale"
+        />
+        <ScrollView>
+          {result.map(locale => (
+            <TouchableOpacity onPress={() => this.setState({ locale })} key={locale} style={styles.item}>
+              <Text>{locale}</Text>
+            </TouchableOpacity>
+          ))
+          }
+        </ScrollView>
+
+      </View>
+    );
+  }
+
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'white',
+    marginTop: 15,
+  },
+  item: {
+    borderWidth: 1,
+    marginTop: -1,
+    borderColor: 'rgba(0,0,0,1)',
+    padding: 3,
+    width: 100,
+    alignItems: 'center',
+  },
+  emailSubject: {
+    color: 'rgba(0,0,0,0.5)'
+  },
+  searchInput: {
+    padding: 5,
+    borderColor: '#CCC',
+    borderWidth: 1,
+    width: 100,
+  }
+})

example/MinimalExample.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import DatePicker from 'react-native-date-picker-x';
+
+export default class MinimalExample extends Component {
+
+  state = { date: new Date() }
+
+  render = () =>
+    <DatePicker
+      date={this.state.date}
+      onDateChange={date => this.setState({ date })}
+    />
+
+}

example/index.js

@@ -1,4 +1,5 @@
 import { AppRegistry } from 'react-native';
 import App from './App';
+import MinimalExample from './MinimalExample';
 
 AppRegistry.registerComponent('DatePickerExample', () => App);