Added examples as a subdirectory

.npmignore

@@ -1,4 +1,4 @@
 .github/
 node_modules/
-
+examples
 package-lock.json

README.md

@@ -1,38 +1,41 @@
 # React Native Dropdown Picker
 
-<p align="left">
-  <a href="https://github.com/hossein-zare/react-native-dropdown-picker/blob/dev-5.x/LICENSE">
-    <img src="https://img.shields.io/badge/license-MIT-blue.svg"
-      alt="react-native-dropdown-picker is released under the MIT license." />
-  </a>
-  <a href="https://www.npmjs.org/package/react-native-dropdown-picker">
-    <img src="https://img.shields.io/npm/v/react-native-dropdown-picker?color=brightgreen&label=npm%20package"
-      alt="Current npm package version." />
-  </a>
-</p>
+[![react-native-dropdown-picker is released under the MIT license.](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/hossein-zare/react-native-dropdown-picker/blob/dev-5.x/LICENSE)
+[![Current npm package version.](https://img.shields.io/npm/v/react-native-dropdown-picker?color=brightgreen&label=npm%20package)](https://www.npmjs.org/package/react-native-dropdown-picker)
+
+[//]: # (TODO: add badge linking to GitHub repo)
+
+---
 
 ## Screenshots
 
 <p float="left">
     <img src="https://user-images.githubusercontent.com/56504893/116790110-e0b36880-aac7-11eb-9ebd-196acee64f7a.png"
       width="270" alt="Screenshot showing basic dropdown" />
     <img src="https://user-images.githubusercontent.com/56504893/116789802-faec4700-aac5-11eb-837b-86f18cbfcf3d.png"
       width="270" alt="Screenshot showing badges" />
     <img src="https://user-images.githubusercontent.com/56504893/116789839-2c651280-aac6-11eb-99e0-b43b608ed8c7.png"
       width="270" alt="Screenshot showing dark theme and parent items" />
 </p>
 
-The above screenshots are taken from the following
-example: [https://snack.expo.dev/8mHmLfcZf](https://snack.expo.dev/8mHmLfcZf)
+The above screenshots were taken
+from [this example](https://snack.expo.dev/8mHmLfcZf).
 
 ## Usage
 
-See [the relevant documentation](https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/usage).
+You can find runnable examples in the `examples` subdirectory, which is a
+working [Expo](https://github.com/expo/expo) project demonstrating this library.
+Navigate into the `examples` subdirectory, run `npm install`, and then run
+`npx expo start` to see the examples working.
+
+For further information on how to use this library,
+read [the relevant documentation](https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/usage).
 
 ## Further documentation
 
 The docs can be read
-at: [https://hossein-zare.github.io/react-native-dropdown-picker-website](https://hossein-zare.github.io/react-native-dropdown-picker-website).
+at: [https://hossein-zare.github.io/react-native-dropdown-picker-website](https://hossein-zare.github.io/react-native-dropdown-picker-website)
+
 The docs can be edited
 at: [https://github.com/hossein-zare/react-native-dropdown-picker-website](https://github.com/hossein-zare/react-native-dropdown-picker-website)
 
@@ -60,9 +63,8 @@
   works well
 * You can test changes to the library and experiment easily
   with [patch-package](https://www.npmjs.com/package/patch-package)
-* Use `npm pack` to test the new version of the library locally and check it
-  works correctly;
-  see [https://dev.to/scooperdev/use-npm-pack-to-test-your-packages-locally-486e](https://dev.to/scooperdev/use-npm-pack-to-test-your-packages-locally-486e)
+* Once you have made changes, and after finalizing them, use `npm pack`
+  to [test your new, changed version of the library locally and check it works correctly](https://dev.to/scooperdev/use-npm-pack-to-test-your-packages-locally-486e)
 * Make and merge a final PR into the development branch that increments the
   version number in `package.json`
 * Make and merge a PR from the development branch to the release branch

examples/.gitignore

@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

examples/App.tsx

@@ -0,0 +1,159 @@
+import React, { JSX } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import DropDownPicker, { ItemType } from 'react-native-dropdown-picker';
+import JavascriptClassExample from './example-src-files/javascript-class-example';
+import JavascriptFunctionExample from './example-src-files/javascript-function-example';
+import TypescriptClassExample from './example-src-files/typescript-class-example';
+import TypescriptFunctionExample from './example-src-files/typescript-function-example';
+
+enum ExampleComponent {
+  JavaScriptClassSingleValue,
+  JavaScriptClassMultiValue,
+  JavaScriptFunctionSingleValue,
+  JavaScriptFunctionMultiValue,
+  TypeScriptClassSingleValue,
+  TypeScriptClassMultiValue,
+  TypeScriptFunctionSingleValue,
+  TypeScriptFunctionMultiValue,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    // backgroundColor: "#fff",
+    // alignItems: "center",
+    // justifyContent: "center",
+    flexDirection: 'column',
+    margin: 3,
+    marginTop: 20,
+    padding: 3,
+  },
+});
+
+const EXAMPLE_COMPONENT_ITEMS: Array<ItemType<ExampleComponent>> = [
+  {
+    label: 'JavaScript; class component; single-item',
+    value: ExampleComponent.JavaScriptClassSingleValue,
+  },
+  {
+    label: 'JavaScript; class component; multiple-item',
+    value: ExampleComponent.JavaScriptClassMultiValue,
+  },
+  {
+    label: 'JavaScript; function component; single-item',
+    value: ExampleComponent.JavaScriptFunctionSingleValue,
+  },
+  {
+    label: 'JavaScript; function component; multiple-item',
+    value: ExampleComponent.JavaScriptFunctionMultiValue,
+  },
+  {
+    label: 'TypeScript; class component; single-item',
+    value: ExampleComponent.TypeScriptClassSingleValue,
+  },
+  {
+    label: 'TypeScript; class component; multiple-item',
+    value: ExampleComponent.TypeScriptClassMultiValue,
+  },
+  {
+    label: 'TypeScript; function component; single-item',
+    value: ExampleComponent.TypeScriptFunctionSingleValue,
+  },
+  {
+    label: 'TypeScript; function component; multiple-item',
+    value: ExampleComponent.TypeScriptFunctionMultiValue,
+  },
+];
+
+type Props = Record<string, never>;
+type State = {
+  currentExample: ExampleComponent;
+  examplePickerOpen: boolean;
+  exampleComponents: Array<ItemType<ExampleComponent>>;
+};
+
+export default class App extends React.Component<Props, State> {
+  constructor(props: Readonly<Props>) {
+    super(props);
+    this.state = {
+      currentExample: ExampleComponent.JavaScriptClassSingleValue,
+      exampleComponents: EXAMPLE_COMPONENT_ITEMS,
+      examplePickerOpen: false,
+    };
+
+    this.setOpen = this.setOpen.bind(this);
+    this.setCurrentExample = this.setCurrentExample.bind(this);
+  }
+
+  private static getExample(egComponent: ExampleComponent): JSX.Element {
+    switch (egComponent) {
+      case ExampleComponent.JavaScriptClassSingleValue:
+        return <JavascriptClassExample multiple={false} />;
+      case ExampleComponent.JavaScriptClassMultiValue:
+        return <JavascriptClassExample multiple />;
+      case ExampleComponent.JavaScriptFunctionSingleValue:
+        return <JavascriptFunctionExample multiple={false} />;
+      case ExampleComponent.JavaScriptFunctionMultiValue:
+        return <JavascriptFunctionExample multiple />;
+      case ExampleComponent.TypeScriptClassSingleValue:
+        return <TypescriptClassExample multiple={false} />;
+      case ExampleComponent.TypeScriptClassMultiValue:
+        return <TypescriptClassExample multiple />;
+      case ExampleComponent.TypeScriptFunctionSingleValue:
+        return <TypescriptFunctionExample multiple={false} />;
+      case ExampleComponent.TypeScriptFunctionMultiValue:
+        return <TypescriptFunctionExample multiple />;
+      default:
+        throw new Error(
+          "couldn't match example component in getExample() in App.tsx. egComponent was: ",
+          egComponent,
+        );
+    }
+  }
+
+  setOpen(examplePickerOpen: boolean): void {
+    this.setState({ examplePickerOpen });
+  }
+
+  setCurrentExample(
+    callback: (prevState: ExampleComponent | null) => ExampleComponent | null,
+  ): void {
+    this.setState((state: Readonly<State>) => ({
+      currentExample: callback(state.currentExample),
+    }));
+  }
+
+  // todo: fix picker items being under text
+
+  render(): JSX.Element {
+    const { currentExample, examplePickerOpen, exampleComponents } = this.state;
+
+    return (
+      <View style={styles.container}>
+        <View style={{ flex: 1 }}>
+          <View style={{ flex: 1 }}>
+            <Text>Choose example:</Text>
+          </View>
+
+          <View style={{ flex: 1 }}>
+            <DropDownPicker
+              setValue={this.setCurrentExample}
+              value={currentExample}
+              items={exampleComponents}
+              open={examplePickerOpen}
+              setOpen={this.setOpen}
+            />
+          </View>
+        </View>
+
+        <View style={{ flex: 3 }}>
+          <View style={{ flex: 1 }}>
+            <Text>Example:</Text>
+          </View>
+
+          {App.getExample(currentExample)}
+        </View>
+      </View>
+    );
+  }
+}

examples/app.json

@@ -0,0 +1,28 @@
+{
+  "expo": {
+    "name": "examples",
+    "slug": "examples",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

examples/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};